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

{% block title %}Site Settings{% endblock %}

{% block sidebar_nav %}
  {% with tabs=active_tab %}

  {% url 'codex_showcase:site_settings_tab' 'contact' as url_contact %}
  {% url 'codex_showcase:site_settings_tab' 'geo' as url_geo %}
  {% url 'codex_showcase:site_settings_tab' 'social' as url_social %}
  {% url 'codex_showcase:site_settings_tab' 'marketing' as url_marketing %}
  {% url 'codex_showcase:site_settings_tab' 'technical' as url_technical %}
  {% url 'codex_showcase:site_settings_tab' 'email' as url_email %}
  {% url 'codex_showcase:site_settings_tab' 'topbar' as url_topbar %}

  <li>
    <a href="{{ url_contact }}"
       hx-get="{{ url_contact }}"
       hx-target="#cab-content"
       hx-push-url="true"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2{% if active_tab == 'contact' %} cab-nav__item--active{% endif %}"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-telephone fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Contacts</span>
    </a>
  </li>
  <li>
    <a href="{{ url_geo }}"
       hx-get="{{ url_geo }}"
       hx-target="#cab-content"
       hx-push-url="true"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2{% if active_tab == 'geo' %} cab-nav__item--active{% endif %}"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-geo-alt fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Geo Data</span>
    </a>
  </li>
  <li>
    <a href="{{ url_social }}"
       hx-get="{{ url_social }}"
       hx-target="#cab-content"
       hx-push-url="true"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2{% if active_tab == 'social' %} cab-nav__item--active{% endif %}"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-share fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Social Media</span>
    </a>
  </li>
  <li>
    <a href="{{ url_marketing }}"
       hx-get="{{ url_marketing }}"
       hx-target="#cab-content"
       hx-push-url="true"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2{% if active_tab == 'marketing' %} cab-nav__item--active{% endif %}"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-graph-up fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Marketing</span>
    </a>
  </li>
  <li>
    <a href="{{ url_technical }}"
       hx-get="{{ url_technical }}"
       hx-target="#cab-content"
       hx-push-url="true"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2{% if active_tab == 'technical' %} cab-nav__item--active{% endif %}"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-gear-wide fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Technical</span>
    </a>
  </li>
  <li>
    <a href="{{ url_email }}"
       hx-get="{{ url_email }}"
       hx-target="#cab-content"
       hx-push-url="true"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2{% if active_tab == 'email' %} cab-nav__item--active{% endif %}"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-envelope fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Email / SMTP</span>
    </a>
  </li>
  <li><hr class="mx-3 my-1" style="border-color: rgba(255,255,255,0.08);"></li>

  <li>
    <a href="{{ url_topbar }}"
       hx-get="{{ url_topbar }}"
       hx-target="#cab-content"
       hx-push-url="true"
       class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2{% if active_tab == 'topbar' %} cab-nav__item--active{% endif %}"
       style="color: var(--cab-sidebar-text); transition: background 0.15s;">
      <span class="bi bi-lightning fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Quick Access</span>
    </a>
  </li>
  {% endwith %}
{% endblock %}

{% block cabinet_content %}
  {% with partial="showcase/cabinet/site_settings/partials/_"|add:active_tab|add:".html" %}
    {% include partial %}
  {% endwith %}
{% endblock %}