{% extends "showcase/cabinet/base_client.html" %}
{% load i18n %}

{% block title %}Account{% endblock %}
{% block page_title %}Account{% endblock %}

{% block sidebar_nav %}
  <li>
    <a href="{% url 'codex_showcase:settings' %}"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 cab-nav__item--active"
       hx-get="{% url 'codex_showcase:settings' %}"
       hx-target="#cab-content"
       hx-push-url="true"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-shield-lock fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Security</span>
    </a>
  </li>
  <li>
    <a href="{% url 'codex_showcase:settings_notifications' %}"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2"
       hx-get="{% url 'codex_showcase:settings_notifications' %}"
       hx-target="#cab-content"
       hx-push-url="true"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-bell fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Notifications</span>
    </a>
  </li>
  <li>
    <a href="{% url 'codex_showcase:settings_privacy' %}"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2"
       hx-get="{% url 'codex_showcase:settings_privacy' %}"
       hx-target="#cab-content"
       hx-push-url="true"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-eye-slash fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Privacy</span>
    </a>
  </li>
{% endblock %}

{% block sidebar_settings_link %}
<a href="{% url 'codex_showcase:my_appointments' %}"
   class="cab-nav__item d-flex align-items-center px-3 py-2 mx-2 rounded"
   style="color: var(--cab-sidebar-text); transition: background 0.15s;">
  <span class="bi bi-arrow-left fs-5 flex-shrink-0"></span>
  <span class="cab-nav__label ms-3" style="white-space: nowrap; font-size: 0.875rem;">Cabinet</span>
</a>
{% endblock %}

{% block cabinet_content %}
<div class="row g-4">
  <div class="col-md-7">
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Login Details</h6>
      </div>
      <div class="card-body">
        <div class="mb-3">
          <div class="text-muted mb-1" style="font-size:.8rem;">Email</div>
          <div class="d-flex align-items-center justify-content-between">
            <span style="font-size:.9rem;">anna@example.com</span>
            <button class="btn btn-sm btn-outline-secondary">Change</button>
          </div>
        </div>
        <hr>
        <div>
          <div class="text-muted mb-1" style="font-size:.8rem;">Password</div>
          <div class="d-flex align-items-center justify-content-between">
            <span style="font-size:.9rem;">••••••••</span>
            <button class="btn btn-sm btn-outline-secondary">Change</button>
          </div>
        </div>
      </div>
    </div>

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">Social Networks</h6>
      </div>
      <div class="card-body">
        <div class="d-flex align-items-center justify-content-between py-2">
          <div class="d-flex align-items-center gap-2">
            <svg width="18" height="18" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
            <span style="font-size:.9rem;">Google</span>
          </div>
          <span class="badge" style="background:#dcfce7;color:#16a34a;">Connected</span>
        </div>
      </div>
    </div>

    <div class="card border-0 shadow-sm" style="border-left:3px solid #ef4444 !important;">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0 text-danger">Danger Zone</h6>
      </div>
      <div class="card-body d-flex flex-column gap-3">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <div style="font-size:.9rem;">Deactivate Account</div>
            <div class="text-muted" style="font-size:.8rem;">
              Login will be blocked, notifications disabled.<br>
              History of visits and orders will be preserved.
            </div>
          </div>
          <button class="btn btn-sm btn-outline-danger ms-3" style="white-space:nowrap;">Deactivate</button>
        </div>
        <hr class="my-0">
        <div class="d-flex align-items-center justify-content-between">
          <div>
            <div style="font-size:.9rem;">Request data deletion</div>
            <div class="text-muted" style="font-size:.8rem;">
              The application will be considered within 30 days.<br>
              Personal data will be deleted, anonymous statistics will be preserved.
            </div>
          </div>
          <button class="btn btn-sm btn-outline-secondary ms-3" style="white-space:nowrap;">Send Request</button>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}