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


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

{% block body %}
<div class="body-content d-flex">
  {% 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 %}
  </div>
  {% endblock sidebar %}

  <div class="main-content flex-grow-1">
    {% 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>
        <h5 class="mb-0">{% block page_title %} {{ title|default:"Dashboard" }} {% endblock page_title %}</h5>
      </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">
            <li><a class="dropdown-item" href="{% url 'admin:password_change' %}"><i class="bi bi-key"></i> Change Password</a></li>
            <li><a class="dropdown-item" href="{% url 'admin:profile' %}"><i class="bi bi-person"></i> View Profile</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><button type="submit" form="logout" class="dropdown-item" href="{% url 'admin:logout' %}"><i class="bi bi-box-arrow-right"></i> Logout </a></li>
          </ul>
        </div>
      </div>
    </div>
    {% endblock topbar %}

    {% 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 %}
    
    <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-start 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-start 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-start 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-start 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 %}