{% extends "cabinet/base_cabinet.html" %}
{% load i18n %}

{% block title %}Настройки сайта{% endblock %}

{% block sidebar %}
  {% include "cabinet/includes/_sidebar_staff.html" with cabinet_sidebar_title="Настройки" cabinet_sidebar=tabs %}
{% endblock %}

{% block cabinet_content %}
  <div id="settings-response" style="max-width: 1024px;">
    {% if messages %}
      <div class="mb-4">
        {% for message in messages %}
          <div class="alert alert-{{ message.tags|default:'info' }} border-0 shadow-sm d-flex align-items-center gap-2 mb-2" role="alert" style="border-radius: .75rem;">
            <span class="bi {% if message.tags == 'success' %}bi-check-circle-fill{% else %}bi-exclamation-circle-fill{% endif %}"></span>
            <div>{{ message }}</div>
          </div>
        {% endfor %}
      </div>
    {% endif %}

    <div class="d-flex align-items-center justify-content-between mb-4 sticky-top bg-white py-3 border-bottom" style="z-index: 1020; margin: -1rem 0 2rem 0;">
      <h4 class="mb-0 fw-bold d-flex align-items-center gap-2">
        <span class="bi bi-gear-wide-connected text-primary"></span>
        Настройки сайта
      </h4>
      <button type="submit" form="settings-form" class="btn btn-primary d-flex align-items-center gap-2 px-4 shadow-sm fw-semibold">
        <span class="bi bi-check2-circle fs-5"></span>
        Сохранить все изменения
      </button>
    </div>

    <form id="settings-form"
          hx-post="{% url 'cabinet:site_settings' %}"
          hx-target="#settings-response"
          hx-select="#settings-response"
          hx-swap="outerHTML">

      {% csrf_token %}
      {% for tab in tabs %}
        <section id="{{ tab.slug }}" class="cab-settings-section mb-5">
          <div class="d-flex align-items-center justify-content-between border-bottom pb-2 mb-4"
               style="background:#f8fafc; margin: 0 -1.5rem; padding: 1rem 1.5rem; border-top: 1px solid #e2e8f0;">
            <h2 class="h5 mb-0 d-flex align-items-center gap-2 fw-semibold">
              <span class="bi {{ tab.icon }} text-primary"></span>
              {{ tab.label }}
            </h2>
          </div>

          <div class="cab-settings-card">
            {% include tab.partial_path %}
          </div>
        </section>
      {% endfor %}

    </form>
  </div>
{% endblock %}