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

{% block title %}Notifications — Log{% endblock %}

{% block sidebar_title %}
<span class="bi bi-bell fs-5" style="color: var(--cab-primary);"></span>
<span class="cab-sidebar__title ms-2 fw-semibold text-white" style="font-size: 1rem; white-space: nowrap;">Notifications</span>
{% endblock %}

{% block sidebar_nav %}
<li>
  <a href="{% url 'codex_showcase:notifications_log' %}"
     class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 cab-nav__item--active"
     style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-list-ul fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Sent Log</span>
  </a>
</li>
<li>
  <a href="{% url 'codex_showcase:notifications_templates' %}"
     class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2"
     style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-file-text fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Templates</span>
  </a>
</li>
{% endblock %}

{% block cabinet_content %}

  {# ── Header ── #}
  {% include "showcase/cabinet/includes/_page_header.html" with title="Notification Log" subtitle="History of all outgoing notifications" %}

  {# ── Stats row ── #}
  <div class="d-flex gap-3 mb-4 flex-wrap">
    <div class="rounded-3 border bg-white px-4 py-3 text-center" style="min-width: 100px;">
      <div class="fw-bold fs-4" style="color: #1e293b;">{{ stats.total }}</div>
      <div class="text-muted" style="font-size: .75rem;">Total</div>
    </div>
    <div class="rounded-3 border bg-white px-4 py-3 text-center" style="min-width: 100px;">
      <div class="fw-bold fs-4" style="color: #16a34a;">{{ stats.sent }}</div>
      <div class="text-muted" style="font-size: .75rem;">Sent</div>
    </div>
    <div class="rounded-3 border bg-white px-4 py-3 text-center" style="min-width: 100px;">
      <div class="fw-bold fs-4" style="color: #dc2626;">{{ stats.failed }}</div>
      <div class="text-muted" style="font-size: .75rem;">Failed</div>
    </div>
    <div class="rounded-3 border bg-white px-4 py-3 text-center" style="min-width: 100px;">
      <div class="fw-bold fs-4" style="color: #d97706;">{{ stats.pending }}</div>
      <div class="text-muted" style="font-size: .75rem;">Pending</div>
    </div>
  </div>

  {# ── Filters ── #}
  <div class="d-flex gap-2 mb-3 flex-wrap align-items-center">
    {# Channel tabs #}
    <div class="d-flex gap-1">
      {% for tab in channel_tabs %}
      <a href="?channel={{ tab.key }}{% if active_status != 'all' %}&status={{ active_status }}{% endif %}"
         class="btn btn-sm {% if tab.key == active_channel %}btn-dark{% else %}btn-outline-secondary{% endif %}"
         style="font-size: .78rem; border-radius: 20px;">
        {{ tab.label }}
        <span class="ms-1 {% if tab.key == active_channel %}text-white-50{% else %}text-muted{% endif %}" style="font-size: .7rem;">({{ tab.count }})</span>
      </a>
      {% endfor %}
    </div>
    <div class="vr mx-1"></div>
    {# Status tabs #}
    <div class="d-flex gap-1">
      {% for tab in status_tabs %}
      <a href="?status={{ tab.key }}{% if active_channel != 'all' %}&channel={{ active_channel }}{% endif %}"
         class="btn btn-sm {% if tab.key == active_status %}btn-dark{% else %}btn-outline-secondary{% endif %}"
         style="font-size: .78rem; border-radius: 20px;">
        {{ tab.label }}
        <span class="ms-1 {% if tab.key == active_status %}text-white-50{% else %}text-muted{% endif %}" style="font-size: .7rem;">({{ tab.count }})</span>
      </a>
      {% endfor %}
    </div>
  </div>

  {# ── Table ── #}
  <div class="bg-white rounded-3 border overflow-hidden">
    <table class="table mb-0" style="font-size: .84rem;">
      <thead style="background: #f8fafc; border-bottom: 2px solid #e2e8f0;">
        <tr>
          <th class="px-4 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 200px;">Recipient</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 110px;">Channel</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none;">Template / Subject</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 100px;">Status</th>
          <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 170px;">Sent at</th>
        </tr>
      </thead>
      <tbody>
        {% for entry in entries %}
        <tr class="align-middle">

          <td class="px-4 py-3" style="border: none;">
            <div class="fw-semibold" style="line-height: 1.3;">{{ entry.recipient }}</div>
            <div class="text-muted" style="font-size: .72rem;">{{ entry.email }}</div>
          </td>

          <td class="px-3 py-3" style="border: none;">
            <span class="badge rounded-pill px-2 py-1"
                  style="background: {{ entry.channel_bg }}; color: {{ entry.channel_color }}; font-size: .72rem; font-weight: 600;">
              <i class="bi {{ entry.channel_icon }} me-1"></i>{{ entry.channel_label }}
            </span>
          </td>

          <td class="px-3 py-3" style="border: none;">
            <div class="fw-semibold" style="line-height: 1.3;">{{ entry.template_label }}</div>
            <div class="text-muted" style="font-size: .75rem;">{{ entry.subject }}</div>
            {% if entry.error %}
            <div style="font-size: .72rem; color: #dc2626; margin-top: 2px;">
              <i class="bi bi-exclamation-circle me-1"></i>{{ entry.error }}
            </div>
            {% endif %}
          </td>

          <td class="px-3 py-3" style="border: none;">
            <span class="badge rounded-pill px-2 py-1"
                  style="background: {{ entry.status_bg }}; color: {{ entry.status_color }}; font-size: .72rem; font-weight: 600;">
              <span class="me-1" style="font-size: .55rem;">●</span>{{ entry.status_label }}
            </span>
          </td>

          <td class="px-3 py-3 text-muted" style="border: none; font-size: .8rem;">{{ entry.sent_at }}</td>

        </tr>
        {% empty %}
        <tr>
          <td colspan="5" style="border: none;">
            {% include "showcase/cabinet/includes/_empty_state.html" with icon="bi-bell-slash" title="No notifications" subtitle="No records found for the selected filters" %}
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>

{% endblock %}