{% load i18n static %}
{% get_current_language as LANGUAGE_CODE %}{% get_current_language_bidi as LANGUAGE_BIDI %}

<!DOCTYPE html>
<html lang="{{ LANGUAGE_CODE|default:'en' }}" dir="{% if LANGUAGE_BIDI %}rtl{% else %}ltr{% endif %}"
      data-lucus-appearance="{{ lucus_selected_appearance|default:'auto' }}"
      data-theme="{% if lucus_selected_appearance == 'auto' %}auto{% else %}{{ lucus_selected_appearance }}{% endif %}">
  <head>
    <meta charset="utf-8">
    {% if lucus_selected_appearance == 'auto' %}
    <script>
      (function () {
        try {
          var m = window.matchMedia("(prefers-color-scheme: dark)");
          var s = function () {
            document.documentElement.setAttribute("data-theme", m.matches ? "dark" : "light");
          };
          s();
          m.addEventListener("change", s);
        } catch (e) {}
      })();
    </script>
    {% endif %}
    <title>
      {% block title %}{% if title %}{{ title }} | {% endif %}{{ site_title|default:'' }}{% endblock %}
    </title>

    {% block dark-mode-vars %}{# Appearance: data-theme on <html> (script above + lucus-appearance.js for auto). #}{% endblock %}

    {% block extrastyle %}
      {# Lucus only: layout/tokens, then admin UI layer, then palette (overrides CSS variables). #}
      <link rel="stylesheet" href="{% static 'lucus/css/style.css' %}">
      <link rel="stylesheet" href="{% static 'lucus/css/lucus-admin.css' %}">
      <link rel="stylesheet" href="{% static lucus_scheme_stylesheet|default:'lucus/css/olivia.css' %}">
      {% if lucus_extra_stylesheets %}
      {% for lucus_extra_stylesheet in lucus_extra_stylesheets %}
      <link rel="stylesheet" href="{% static lucus_extra_stylesheet %}">
      {% endfor %}
      {% endif %}
    {% endblock %}

    {% block responsive %}
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    {% endblock %}

    {% block extrahead %}
      <script>
        (function() {
          document.addEventListener('DOMContentLoaded', function() {
            var dropdown = document.getElementById('lucus-user-dropdown');
            if (!dropdown) return;
            var trigger = dropdown.querySelector('.lucus-header__user-trigger');
            var menu = dropdown.querySelector('.lucus-header__user-menu');
            if (!trigger || !menu) return;
            function open() {
              dropdown.setAttribute('data-open', 'true');
              menu.removeAttribute('hidden');
              trigger.setAttribute('aria-expanded', 'true');
            }
            function close() {
              dropdown.removeAttribute('data-open');
              menu.setAttribute('hidden', '');
              trigger.setAttribute('aria-expanded', 'false');
            }
            function toggle(e) {
              e.preventDefault();
              if (dropdown.getAttribute('data-open') === 'true') close(); else open();
            }
            trigger.addEventListener('click', toggle);
            document.addEventListener('click', function(e) {
              if (dropdown.getAttribute('data-open') === 'true' && !dropdown.contains(e.target)) close();
            });
          });
        })();
        (function() {
          document.addEventListener('DOMContentLoaded', function() {
            var nav = document.querySelector('.lucus-header__breadcrumbs .breadcrumbs');
            if (!nav || !nav.innerHTML.trim()) return;
            var html = nav.innerHTML.replace(/\s*(?:&rsaquo;|&#8250;|›)\s*/g, '<span class="lucus-breadcrumb-sep" aria-hidden="true">/</span>');
            nav.innerHTML = html;
            var nodes = nav.childNodes;
            for (var i = nodes.length - 1; i >= 0; i--) {
              var n = nodes[i];
              if (n.nodeType === 3 && n.textContent && n.textContent.trim()) {
                var span = document.createElement('span');
                span.className = 'lucus-breadcrumb-current';
                span.appendChild(n.cloneNode(true));
                n.parentNode.replaceChild(span, n);
                break;
              }
            }
          });
        })();
      </script>
    {% endblock %}
  </head>

  <body class="{% if is_popup %}popup {% endif %}{% block bodyclass %}{% endblock %}">
    <a href="#content-start" class="skip-to-content-link">{% translate 'Skip to main content' %}</a>

    <div id="container">
      {% if not is_popup %}
        {% block header %}
          <header id="header" class="lucus-header">
            <div class="lucus-header__inner">
              <div class="lucus-header__left">
                <nav class="lucus-header__breadcrumbs" aria-label="{% translate 'Breadcrumbs' %}">
                  {% block breadcrumbs %}{% endblock %}
                </nav>
              </div>
              {% if has_permission %}
                <div class="lucus-header__right">
                  {% if lucus_color_scheme_choices %}
                  <form method="post" action="{% url 'admin:lucus_save_ui' %}" class="lucus-header__theme-form">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.get_full_path }}">
                    <label class="visually-hidden" for="lucus-theme-scheme">{% translate "Color scheme" %}</label>
                    <select name="color_scheme" id="lucus-theme-scheme" class="lucus-header__theme-select" aria-label="{% translate 'Color scheme' %}" onchange="this.form.submit()">
                      {% for slug, label in lucus_color_scheme_choices %}
                        <option value="{{ slug }}" {% if slug == lucus_selected_color_scheme %}selected{% endif %}>{{ label }}</option>
                      {% endfor %}
                    </select>
                    <label class="visually-hidden" for="lucus-theme-appearance">{% translate "Appearance" %}</label>
                    <select name="appearance" id="lucus-theme-appearance" class="lucus-header__theme-select" aria-label="{% translate 'Appearance' %}" onchange="this.form.submit()">
                      {% for slug, label in lucus_appearance_choices %}
                        <option value="{{ slug }}" {% if slug == lucus_selected_appearance %}selected{% endif %}>{{ label }}</option>
                      {% endfor %}
                    </select>
                  </form>
                  {% endif %}
                  {% if lucus_user_avatar_url %}
                  <span class="lucus-header__avatar" aria-hidden="true">
                    <img src="{{ lucus_user_avatar_url }}" alt="" width="40" height="40" loading="lazy" decoding="async">
                  </span>
                  {% endif %}
                  <div class="lucus-header__user" id="lucus-user-dropdown">
                    <button type="button" class="lucus-header__user-trigger" aria-expanded="false" aria-controls="lucus-user-menu" aria-haspopup="true">
                      <span class="lucus-header__user-name">{% firstof user.get_short_name user.get_username %}</span>
                      <span class="lucus-header__user-chevron" aria-hidden="true"></span>
                    </button>
                    <div class="lucus-header__user-menu" id="lucus-user-menu" role="menu" hidden>
                      {% url "set_language" as set_language_url %}
                      {% if set_language_url %}
                        <form action="{{ set_language_url }}" method="post" class="lucus-header__lang-form lucus-header__user-item">
                          {% csrf_token %}
                          <input name="next" type="hidden" value="{{ request.get_full_path }}">
                          {% get_available_languages as admin_languages %}
                          <label for="lucus-lang" class="visually-hidden">{% translate "Язык админки" %}</label>
                          <select id="lucus-lang" name="language" onchange="this.form.submit()" aria-label="{% translate "Язык админки" %}">
                            {% for code, name in admin_languages %}
                              <option value="{{ code }}" {% if LANGUAGE_CODE == code %}selected{% endif %}>{{ name }}</option>
                            {% endfor %}
                          </select>
                        </form>
                      {% endif %}
                      {% if site_url %}<a href="{{ site_url }}" class="lucus-header__user-item" role="menuitem">{% translate 'View site' %}</a>{% endif %}
                      {% if user.has_usable_password %}<a href="{% url 'admin:password_change' %}" class="lucus-header__user-item" role="menuitem">{% translate 'Change password' %}</a>{% endif %}
                      {% if lucus_ui_high_contrast_toggle %}
                      <button type="button" class="lucus-header__user-item lucus-header__user-item-btn" id="lucus-high-contrast-toggle" role="menuitem" aria-pressed="false">{% translate "High contrast" %}</button>
                      {% endif %}
                      <form id="logout-form" method="post" action="{% url 'admin:logout' %}" class="lucus-header__logout-form lucus-header__user-item">
                        {% csrf_token %}
                        <button type="submit" class="lucus-header__user-item lucus-header__user-item-btn" role="menuitem">{% translate 'Log out' %}</button>
                      </form>
                    </div>
                  </div>
                </div>
              {% endif %}
            </div>
          </header>
        {% endblock %}
      {% endif %}

      <div class="main" id="main">
        <main id="content-start" class="content" tabindex="-1">
          {% block nav-breadcrumbs %}{% endblock %}

          <div id="content" class="{% block coltype %}colM{% endblock %}">
            {% block messages %}
              {% if messages %}
                <ul class="messagelist">
                  {% for message in messages %}
                    <li class="{{ message.tags }}">{{ message|capfirst }}</li>
                  {% endfor %}
                </ul>
              {% endif %}
            {% endblock %}

            {% block pretitle %}{% endblock %}
            {% block content_title %}{% if title %}{{ title }}{% endif %}{% endblock %}

            {% block object-tools %}{% endblock %}
            {% block content %}{{ content }}{% endblock %}

            {% block sidebar %}{% endblock %}
            {% block footer %}{% endblock %}
          </div>
        </main>
      </div>
    </div>

    {% block extrabody %}
      <script src="{% static 'lucus/js/lucus-appearance.js' %}" defer></script>
      <script src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
      <script src="{% static 'admin/js/vendor/xregexp/xregexp.js' %}"></script>
      <script src="{% static 'admin/js/vendor/select2/select2.full.js' %}"></script>

      <script src="{% static 'admin/js/jquery.init.js' %}"></script>
      <script src="{% static 'admin/js/core.js' %}"></script>

      <script src="{% static 'admin/js/actions.js' %}"></script>
      <script src="{% static 'admin/js/calendar.js' %}"></script>
      <script src="{% static 'admin/js/SelectFilter2.js' %}"></script>
      <script src="{% static 'admin/js/SelectBox.js' %}"></script>
      <script src="{% static 'admin/js/urlify.js' %}"></script>

      <script src="{% static 'admin/js/autocomplete.js' %}"></script>
      <script src="{% static 'admin/js/filters.js' %}"></script>
      <script src="{% static 'admin/js/inlines.js' %}"></script>

      <script src="{% static 'admin/js/prepopulate_init.js' %}"></script>
      <script src="{% static 'admin/js/prepopulate.js' %}"></script>

      <script src="{% static 'admin/js/change_form.js' %}"></script>
      <script src="{% static 'admin/js/popup_response.js' %}"></script>
      <script src="{% static 'admin/js/unusable_password_field.js' %}"></script>
      <script src="{% static 'admin/js/admin/DateTimeShortcuts.js' %}"></script>
      <script src="{% static 'admin/js/admin/RelatedObjectLookups.js' %}"></script>

      <script src="{% static 'lucus/js/lucus-ui.js' %}" defer></script>
    {% endblock extrabody %}
  </body>
</html>
