{% load static %}
<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:'en' }}">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>{% block title %}User Portal{% endblock %}</title>
  {% include "showcase/cabinet/includes/_head.html" %}
</head>
<body>

  <div class="cab-wrapper"
       x-data="{ sidebarCollapsed: JSON.parse(localStorage.getItem('cab_client_sidebar') ?? 'false') }"
       x-effect="localStorage.setItem('cab_client_sidebar', sidebarCollapsed)">

    {# Client sidebar #}
    <aside class="cab-sidebar" :class="{ 'cab-sidebar--collapsed': sidebarCollapsed }">

      {# Logo #}
      <div class="cab-sidebar__logo d-flex align-items-center px-3"
           style="height: var(--cab-topbar-height); flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.08);">
        <span class="bi bi-grid-3x3-gap-fill fs-5" style="color: var(--cab-primary);"></span>
        <span class="cab-sidebar__title ms-2 fw-semibold text-white"
              style="font-size: 1rem; white-space: nowrap;">{{ SITE_NAME|default:'App' }}</span>
      </div>

      {# Client nav #}
      <nav class="cab-nav flex-grow-1 py-2">
        <ul class="list-unstyled mb-0">
          {% block sidebar_nav %}
          <li>
            <a href="{% url 'codex_showcase:my_appointments' %}"
               class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2
                      {% if active_section == 'my' %}cab-nav__item--active{% endif %}"
               hx-get="{% url 'codex_showcase:my_appointments' %}"
               hx-target="#cab-content"
               hx-push-url="true"
               style="color: var(--cab-sidebar-text); transition: background 0.15s;">
              <span class="bi bi-calendar-check fs-5 flex-shrink-0"></span>
              <span class="cab-nav__label ms-3" style="white-space: nowrap;">My Appointments</span>
            </a>
          </li>
          <li>
            <a href="{% url 'codex_showcase:profile' %}"
               class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2
                      {% if active_section == 'profile' %}cab-nav__item--active{% endif %}"
               hx-get="{% url 'codex_showcase:profile' %}"
               hx-target="#cab-content"
               hx-push-url="true"
               style="color: var(--cab-sidebar-text); transition: background 0.15s;">
              <span class="bi bi-person fs-5 flex-shrink-0"></span>
              <span class="cab-nav__label ms-3" style="white-space: nowrap;">My Corner</span>
            </a>
          </li>
          {% endblock %}
        </ul>
      </nav>

      {# Settings / back link + collapse #}
      <div style="border-top: 1px solid rgba(255,255,255,0.08); flex-shrink: 0;">
        {% block sidebar_settings_link %}
        <a href="{% url 'codex_showcase:settings' %}"
           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-gear fs-5 flex-shrink-0"></span>
          <span class="cab-nav__label ms-3" style="white-space: nowrap; font-size: 0.875rem;">Settings</span>
        </a>
        {% endblock %}
        <div class="px-3 py-2">
          <button @click="sidebarCollapsed = !sidebarCollapsed"
                  class="btn btn-sm d-flex align-items-center justify-content-center w-100"
                  style="background: var(--cab-sidebar-hover-bg); color: var(--cab-sidebar-text); border: none;">
            <span class="bi" :class="sidebarCollapsed ? 'bi-chevron-right' : 'bi-chevron-left'"></span>
            <span class="cab-nav__label ms-2" style="white-space: nowrap; font-size: 0.8rem;">Collapse</span>
          </button>
        </div>
      </div>

    </aside>

    {# Main area #}
    <div class="cab-main">

      {# Topbar — no section nav, only user dropdown #}
      <header class="cab-topbar">
        <div class="me-auto">
          <h6 class="mb-0 fw-semibold" style="color: var(--cab-text);">
            {% block page_title %}User Portal{% endblock %}
          </h6>
        </div>

        <div class="d-flex align-items-center gap-2">

          {# Notifications #}
          <button class="btn btn-sm position-relative" style="color: var(--cab-text-muted);">
            <span class="bi bi-bell fs-5"></span>
          </button>

          {# User dropdown #}
          <div class="dropdown">
            <button class="btn btn-sm d-flex align-items-center gap-2 dropdown-toggle"
                    type="button" data-bs-toggle="dropdown"
                    style="color: var(--cab-text); font-size: 0.875rem;">
              <span class="rounded-circle d-flex align-items-center justify-content-center fw-bold text-white"
                    style="width: 32px; height: 32px; background: var(--cab-primary); font-size: 0.75rem; flex-shrink: 0;">
                {{ request.user.first_name|first|upper }}{{ request.user.last_name|first|upper }}
              </span>
              <span>{{ request.user.get_full_name|default:request.user.username }}</span>
            </button>
            <ul class="dropdown-menu dropdown-menu-end shadow-sm">
              <li>
                <a class="dropdown-item" href="{% url 'codex_showcase:profile' %}">
                  <span class="bi bi-person me-2"></span>My Profile
                </a>
              </li>
              <li>
                <a class="dropdown-item" href="#">
                  <span class="bi bi-gear me-2"></span>Settings
                </a>
              </li>
              <li><hr class="dropdown-divider"></li>
              <li>
                <a class="dropdown-item text-danger" href="{% url 'account_logout' %}">
                  <span class="bi bi-box-arrow-right me-2"></span>Logout
                </a>
              </li>
            </ul>
          </div>

        </div>
      </header>

      <main class="cab-content" id="cab-content">
        {% block cabinet_content %}{% endblock %}
      </main>

    </div>

  </div>

  <script src="{% static 'showcase/cabinet/js/vendor/bootstrap.bundle.min.js' %}"></script>
  <script src="{% static 'showcase/cabinet/js/app/cabinet.js' %}"></script>
  {% block extra_js %}{% endblock %}

</body>
</html>
