{% extends "admin/base.html" %}
{% load i18n static palette humanize palette_admin %}


{% block extrastyle %}
{% endblock extrastyle %}

{% block body %}
<div class="body-content d-flex {% if is_popup %} is-popup {% endif %}">
  {% if not is_popup %}
    {% block sidebar %}
    <div class="sidebar collapsed">
      <div class="d-flex align-items-center justify-content-center gap-4 text-center mb-4 py-4">
        {% if site_logo %}
        <img src="{{ site_logo }}" alt="{{ site_header }} logo" class="img-fluid rounded-circle" style="width: 50px; height: 50px;">
        {% elif site_icon %}
        <i class="{{ site_icon }} fs-2"></i>
        {% else %}
        <i class="bi bi-grid-3x3-gap-fill"></i>
        {% endif %}
        <h5 class="text-center mb-0"> {{ site_header|default:"Palette"}} </h5>
      </div>

      <div class="nav flex-column mb-3 p-2">
        <a href="{% url 'admin:index' %}" class="nav-link {% if request.path == '/admin/' %}active{% endif %}">
          <i class="bi bi-house-door-fill me-2"></i> Dashboard
        </a>
      </div>

      {% with app_list=available_apps %}
        {% for app in app_list %}
          <div>
              <a href="{{ app.app_url }}" class="gap-2 text-decoration-none d-flex fw-bold bg-dark text-white p-2 m-0">
                <i class="icon {{ app|app_icon_class }}"></i>
                <span class="small"> {{ app.name }} </span>
              </a>
              <div class="nav flex-column mb-2 p-2 gap-3">
              {% for model in app.models %}
                  <div class="nav-item px-2 rounded-0 d-flex align-items-center justify-content-between">
                      <a href="{{ model.admin_url }}" class="nav-link d-flex justify-content-between align-items-center {% if model.admin_url in request.path %}active{% endif %}">
                      <span><i class="icon {{ model|model_icon_class:app.app_label}} me-2"></i>{{ model.name }}</span>
                      {% if model.add_url %}
                        <a href="{{ model.add_url }}" class="btn btn-sm btn-primary sidebar-add-btn"><i class="bi bi-plus-circle"></i>  Add</a>
                      {% endif %}
                      </a>
                  </div>
              {% endfor %}
              </div>
          </div>
        {% endfor %}
      {% endwith %}

      
      {% if custom_links %}
      <div class="nav flex-column mb-3 p-2">
        {% for link in custom_links %}
        <a href="{{ link.resolved_url }}" class="nav-link d-flex align-items-center justify-content-between {% if link.resolved_url == request.path %}active{% endif %}">
          <span>
            {% if link.left_icon %}<i class="{{ link.left_icon }} me-2"></i>{% endif %}
            {{ link.label }}
          </span>
          {% if link.right_icon %}<i class="{{ link.right_icon }}"></i>{% endif %}
        </a>
        {% endfor %}
      </div>
      {% endif %}
    </div>
    {% endblock sidebar %}
  {% endif %}

  <div class="{% if is_popup %} {% endif %} main-content  flex-grow-1">
    {% if not is_popup %}
      {% block topbar %}
      <div class="topbar">
        <div class="d-flex align-items-center gap-2">
          <button class="sidebar-toggle" id="sidebarToggle" title="Toggle Sidebar">
            <i class="bi bi-list"></i>
          </button>
          <p class="mb-0 font-weight-bold">{% block page_title %} {{ title|default:"Dashboard" }} {% endblock page_title %}</p>
        </div>

        <div class="d-flex align-items-center gap-3">
          <!-- Dark Mode Toggle -->
          <button class="theme-toggle" id="themeToggle" title="Toggle dark mode" aria-label="Toggle dark mode">
            <div class="theme-toggle-icon">
              <i class="bi bi-brightness-high"></i>
            </div>
          </button>

          <!-- User Chip -->
          <div class="dropdown chip">
            <div class="account-chip dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
              <img src="https://ui-avatars.com/api/?name={{ user.username }}" alt="User">
              <span>{{ user.get_full_name|default:user.username }}</span>
            </div>
            <form id="logout" method="post" action="{% url 'admin:logout' %}" class="d-none">
              {% csrf_token %}
            </form>
            <ul class="dropdown-menu dropdown-menu-end py-0">
              <li><a class="dropdown-item p-2 border-bottom px-4" href="{% url 'admin:profile' %}"><i class="bi bi-person"></i> View Profile</a></li>
              <li><a class="dropdown-item p-2 border-bottom px-4" href="{% url 'admin:password_change' %}"><i class="bi bi-shield-lock"></i> Change Password</a></li>
              <li><button type="submit" form="logout" class="dropdown-item p-2 px-4" href="{% url 'admin:logout' %}"><i class="bi bi-box-arrow-right"></i> Logout </a></li>
            </ul>
          </div>
        </div>
      </div>
      {% endblock topbar %}
    {% endif %}

    {% if not is_popup %}
      {% block back_button %}
      <div class="px-2 py-2">
        {% if request.path != '/admin/' %}
          <a href="{% back_button %}" class="btn btn-small btn-outline-secondary me-3" title="Back">
            <i class="bi bi-arrow-left"></i> Back
          </a>
        {% endif %}
      </div>
      {% endblock back_button %}
    {% endif %}

    <div class="d-block">
      {% if messages %}
        {% for msg in messages %}
          {% if msg.level_tag == 'success' %}
            <div class="alert alert-success alert-message alert-dismissible fade show" role="alert">
              <div class="d-flex align-items-center gap-3">
                <i class="bi bi-check-circle-fill alert-icon"></i>
                <div class="flex-grow-1">{{ msg }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            </div>
          {% elif msg.level_tag == 'error' %}
            <div class="alert alert-danger alert-message alert-dismissible fade show" role="alert">
              <div class="d-flex align-items-center  gap-3">
                <i class="bi bi-exclamation-circle-fill alert-icon"></i>
                <div class="flex-grow-1">{{ msg }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            </div>
          {% elif msg.level_tag == 'warning' %}
            <div class="alert alert-warning alert-message alert-dismissible fade show" role="alert">
              <div class="d-flex align-items-center gap-3">
                <i class="bi bi-exclamation-triangle-fill alert-icon"></i>
                <div class="flex-grow-1">{{ msg }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            </div>
          {% else %}
            <div class="alert alert-info alert-message alert-dismissible fade show" role="alert">
              <div class="d-flex align-items-center gap-3">
                <i class="bi bi-info-circle-fill alert-icon"></i>
                <div class="flex-grow-1">{{ msg }}</div>
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
              </div>
            </div>
          {% endif %}
        {% endfor %}      
      {% endif %}

      {% block content %}
      {% endblock content %}
    </div>
  </div>
</div>


<script type="text/javascript">
  document.addEventListener('DOMContentLoaded', function() {
    const sidebar = document.querySelector('.sidebar');
    const bodyContent = document.querySelector('.body-content');
    const sidebarToggle = document.getElementById('sidebarToggle');
    const themeToggle = document.getElementById('themeToggle');
    const SIDEBAR_STATE_KEY = 'sidebarCollapsed';
    const THEME_STATE_KEY = 'darkMode';

    window.sidebar = sidebar;

    // ===== DARK MODE FUNCTIONALITY =====
    
    // Initialize dark mode from localStorage or system preference
    function initializeDarkMode() {
      const savedTheme = localStorage.getItem(THEME_STATE_KEY);
      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
      
      if (savedTheme !== null) {
        // Use saved preference
        const isDarkMode = savedTheme === 'true';
        setDarkMode(isDarkMode);
      } else if (prefersDark) {
        // Use system preference
        setDarkMode(true);
      }
    }

    function setDarkMode(isDark) {
      const html = document.documentElement;
      
      if (isDark) {
        document.body.classList.add('dark-mode');
        html.setAttribute('data-bs-theme', 'dark');
        themeToggle.classList.add('dark');
      } else {
        document.body.classList.remove('dark-mode');
        html.removeAttribute('data-bs-theme');
        themeToggle.classList.remove('dark');
      }
      
      localStorage.setItem(THEME_STATE_KEY, isDark);
    }

    function toggleDarkMode() {
      const isDarkMode = document.body.classList.contains('dark-mode');
      setDarkMode(!isDarkMode);
    }

    // Dark mode toggle button click handler
    themeToggle.addEventListener('click', toggleDarkMode);

    // Initialize dark mode on page load
    initializeDarkMode();

    // ===== SIDEBAR FUNCTIONALITY =====

    // Check if sidebar was previously collapsed
    const isSidebarCollapsed = sidebar.classList.contains('collapsed');
    
    // Toggle sidebar on button click
    sidebarToggle.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();

      console.log("Sidebar is collapsed?", isSidebarCollapsed)

      if (isSidebarCollapsed){
        sidebar.classList.replace('collapsed', 'open');
        bodyContent.classList.add('sidebar-collapsed');
      }else{
        sidebar.classList.replace('open', 'collapsed');
        bodyContent.classList.remove('sidebar-collapsed');
      }

      // Update toggle icon
      updateToggleIcon();
    });

    // Close sidebar when clicking outside (mobile)
    document.addEventListener('click', function(e) {
      if (window.innerWidth < 900) {
        if (!sidebar.contains(e.target) && !sidebarToggle.contains(e.target)) {
          sidebar.classList.replace('open', 'collapsed');
          bodyContent.classList.add('sidebar-collapsed');
        }
      }
    });

    // Handle window resize
    window.addEventListener('resize', function() {
      const _isSidebarCollapsed = sidebar.classList.contains('collapsed');
      
      if (window.innerWidth >= 900) {
        // Desktop: restore from saved state
        if (_isSidebarCollapsed) {
          bodyContent.classList.add('sidebar-collapsed');
        } else {
          sidebar.classList.replace('open', 'collapsed');
          bodyContent.classList.add('sidebar-collapsed');
        }
      }
    });

    function updateToggleIcon() {
      const icon = sidebarToggle.querySelector('i');
      if (sidebar.classList.contains('collapsed')) {
        icon.classList.remove('bi-list');
        icon.classList.add('bi-list-ul');
      } else {
        icon.classList.remove('bi-list-ul');
        icon.classList.add('bi-list');
      }
    }

    // Initialize icon
    updateToggleIcon();
  });
</script>
{% endblock body %}