{# CODEX_DJANGO_CLI BLUEPRINT STATUS: MOVE_TO_CLI_BLUEPRINT. Reason: generated app-layer or scaffold-owned template for codex-django-cli blueprints. #}
{% extends "cabinet/base_cabinet.html" %}
{% load i18n %}

{% block extra_css %}
<style>
[x-cloak] { display: none !important; }
.modal-overlay { display: flex; }
.appt-row { cursor: pointer; transition: background .12s; }
.appt-row:hover { background: #f8fafc; }
.action-btn { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; border: 1px solid #e2e8f0; background: #fff; width: 100%; text-align: left; transition: all .12s; cursor: pointer; font-size: .86rem; }
.action-btn:hover { border-color: var(--cab-primary); background: #f5f3ff; }
.action-btn--danger:hover { border-color: #ef4444; background: #fef2f2; }
.action-btn--success:hover { border-color: #22c55e; background: #f0fdf4; }
.action-btn .icon { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: .9rem; flex-shrink: 0; }
</style>
{% endblock %}

{% block cabinet_content %}
<div>
  {# Header #}
  <div class="d-flex align-items-start justify-content-between mb-4">
    <div>
      <h5 class="fw-semibold mb-0" style="color:#0f172a;">{% trans "Appointments" %}</h5>
      <span class="text-muted" style="font-size:.82rem;">{% trans "All bookings log" %}</span>
    </div>

    <a href="{% url 'cabinet:booking_new' %}" class="btn btn-sm btn-primary d-flex align-items-center gap-1" style="font-size:.82rem;">
      <span class="bi bi-plus-lg"></span>
      {% trans "+ New booking" %}
    </a>
  </div>

  {# Filters #}
  <div class="d-flex gap-2 mb-4 flex-wrap">
    {% for key, val in counts.items %}
    <a href="{% if key == 'all' %}{% url 'cabinet:booking_list' %}{% else %}{% url 'cabinet:booking_list_filtered' key %}{% endif %}"
       hx-get="{% if key == 'all' %}{% url 'cabinet:booking_list' %}{% else %}{% url 'cabinet:booking_list_filtered' key %}{% endif %}"
       hx-target="#appointments-container"
       hx-swap="outerHTML"
       hx-push-url="true"
       class="btn btn-sm {% if current_status == key %}btn-dark{% else %}btn-outline-secondary{% endif %}"
       style="font-size: .8rem; border-radius: 20px;">
      {% if key == 'all' %}{% trans "All Appointments" %}{% else %}{{ key|capfirst }}{% endif %}
      <span class="ms-1 {% if current_status == key %}text-white-50{% else %}text-muted{% endif %}" style="font-size: .72rem;">({{ val }})</span>
    </a>
    {% endfor %}
  </div>

  {# Table Container #}
  {% include "cabinet/booking/partials/_appointments_table.html" %}
</div>
{% endblock %}

{% block extra_js %}
<script>
// Legacy apptModal removed. Global modal in base_cabinet handles open-modal event.
</script>
{% endblock %}