{% extends "base.html" %}{% load static %}

{% block title %}{% block page_title %}Tableau de bord{% endblock %} · Rédaction {{ site.site_name }}{% endblock %}
{% block meta %}<meta name="robots" content="noindex, nofollow">{% endblock %}
{% block body_class %}h-full bg-slate-100{% endblock %}

{% block body %}
<div x-data="{ nav: false }" class="min-h-full">

  {# ---------- Menu latéral ---------- #}
  <div x-cloak x-show="nav" x-transition.opacity class="fixed inset-0 z-40 bg-brand-950/60 lg:hidden" @click="nav = false"></div>
  <aside class="fixed inset-y-0 left-0 z-50 flex w-72 -translate-x-full flex-col bg-brand-900 transition-transform duration-200 lg:translate-x-0"
         :class="nav && '!translate-x-0'" aria-label="Navigation du back-office">
    <div class="flex h-16 shrink-0 items-center gap-3 border-b border-white/10 px-5">
      <img src="{% if site.logo %}{{ site.logo.url }}{% else %}{% static 'img/logo.jpg' %}{% endif %}" alt="" class="size-9 rounded-lg object-cover ring-2 ring-white/10">
      <div class="leading-tight">
        <p class="text-sm font-extrabold text-white">{{ site.site_name }}</p>
        <p class="text-[11px] font-semibold tracking-wider text-gold-400 uppercase">Espace rédaction</p>
      </div>
    </div>

    <nav class="flex-1 overflow-y-auto px-3 py-4">
      <a href="{% url 'backoffice:dashboard' %}" class="side-link {% nav_active '/admin/' exact=True %}">{% icon "dashboard" %} Tableau de bord</a>

      <p class="side-section">Contenus</p>
      <a href="{% url 'editorial:article-list' %}" class="side-link {% nav_active '/admin/articles/' %}">
        {% icon "newspaper" %} <span class="flex-1">Articles</span>
        {% if bo_counts.relecture %}<span class="rounded-full bg-gold-400 px-2 py-0.5 text-[11px] font-bold text-brand-950" title="En attente de relecture">{{ bo_counts.relecture }}</span>{% endif %}
      </a>
      <a href="{% url 'editorial:annonce-list' %}" class="side-link {% nav_active '/admin/annonces/' %}">{% icon "megaphone" %} Annonces</a>
      <a href="{% url 'medialib:list' %}" class="side-link {% nav_active '/admin/medias/' %}">{% icon "photo" %} Médiathèque</a>
      {% if can.taxonomy %}
      <a href="{% url 'taxonomy:category-list' %}" class="side-link {% nav_active '/admin/rubriques/' %}">{% icon "folder" %} Rubriques</a>
      <a href="{% url 'taxonomy:tag-list' %}" class="side-link {% nav_active '/admin/mots-cles/' %}">{% icon "tag" %} Mots-clés</a>
      {% endif %}

      {% if can.moderate or can.inbox or can.ads %}
      <p class="side-section">Audience &amp; marketing</p>
      {% if can.moderate %}
      <a href="{% url 'engagement:comment-list' %}" class="side-link {% nav_active '/admin/commentaires/' %}">
        {% icon "chat" %} <span class="flex-1">Commentaires</span>
        {% if bo_counts.comments %}<span class="rounded-full bg-signal-500 px-2 py-0.5 text-[11px] font-bold text-white">{{ bo_counts.comments }}</span>{% endif %}
      </a>
      {% endif %}
      {% if can.inbox %}
      <a href="{% url 'contact:message-list' %}" class="side-link {% nav_active '/admin/messages/' %}">
        {% icon "inbox" %} <span class="flex-1">Messages</span>
        {% if bo_counts.messages %}<span class="rounded-full bg-signal-500 px-2 py-0.5 text-[11px] font-bold text-white">{{ bo_counts.messages }}</span>{% endif %}
      </a>
      <a href="{% url 'contact:subscriber-list' %}" class="side-link {% nav_active '/admin/newsletter/' %}">{% icon "mail" %} Newsletter</a>
      {% endif %}
      {% if can.ads %}
      <a href="{% url 'ads:list' %}" class="side-link {% nav_active '/admin/publicites/' %}">{% icon "chart" %} Publicités</a>
      {% endif %}
      {% endif %}

      {% if can.editeur %}
      <p class="side-section">Site</p>
      <a href="{% url 'siteconfig:page-list' %}" class="side-link {% nav_active '/admin/pages/' %}">{% icon "document" %} Pages</a>
      <a href="{% url 'siteconfig:service-list' %}" class="side-link {% nav_active '/admin/services/' %}">{% icon "briefcase" %} Services</a>
      {% if can.settings %}<a href="{% url 'siteconfig:settings' %}" class="side-link {% nav_active '/admin/parametres/' %}">{% icon "settings" %} Paramètres</a>{% endif %}
      {% if can.users %}<a href="{% url 'users:list' %}" class="side-link {% nav_active '/admin/utilisateurs/' %}">{% icon "users" %} Utilisateurs</a>{% endif %}
      {% endif %}
    </nav>

    <div class="border-t border-white/10 p-3">
      <a href="{% url 'users:profile' %}" class="flex items-center gap-3 rounded-lg p-2 hover:bg-white/5">
        <span class="flex size-9 items-center justify-center rounded-full bg-gold-400 text-sm font-bold text-brand-950">{{ user.initials }}</span>
        <span class="min-w-0 flex-1 leading-tight">
          <span class="block truncate text-sm font-semibold text-white">{{ user.name }}</span>
          <span class="block text-xs text-brand-200">{{ user.get_role_display }}</span>
        </span>
      </a>
    </div>
  </aside>

  {# ---------- Zone principale ---------- #}
  <div class="lg:pl-72">
    <header class="sticky top-0 z-30 flex h-16 items-center gap-3 border-b border-slate-200 bg-white/90 px-4 backdrop-blur md:px-8">
      <button type="button" class="btn btn-ghost btn-icon lg:hidden" @click="nav = true" aria-label="Ouvrir le menu">{% icon "menu" %}</button>
      <div class="min-w-0 flex-1 text-sm text-slate-500">{% block breadcrumb %}{% endblock %}</div>
      {% block topbar_actions %}{% endblock %}
      <a href="{% url 'editorial:article-create' %}" class="btn btn-primary btn-sm hidden sm:inline-flex">{% icon "plus" %} Nouvel article</a>
      <a href="{% url 'public:home' %}" target="_blank" rel="noopener" class="btn btn-ghost btn-icon" title="Voir le site">{% icon "external" %}</a>
      <form method="post" action="{% url 'accounts:logout' %}">{% csrf_token %}
        <button class="btn btn-ghost btn-icon" title="Se déconnecter" aria-label="Se déconnecter">{% icon "logout" %}</button>
      </form>
    </header>

    <main class="mx-auto max-w-[1400px] px-4 py-6 md:px-8 md:py-8">
      <c-messages />
      {% block content %}{% endblock %}
    </main>
  </div>
</div>
{% endblock %}