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

{% block sidebar_title %}
<span class="bi bi-calendar3 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;">Booking</span>
{% endblock %}

{% block sidebar_nav %}
{% with tab=booking_tab %}
<li>
  <a href="{% url 'codex_showcase:booking' %}" class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 {% if tab == 'schedule' %}cab-nav__item--active{% endif %}" style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-calendar-day fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Schedule</span>
  </a>
</li>
<li class="mt-1">
  <a href="{% url 'codex_showcase:booking_new' %}" class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 {% if tab == 'new' %}cab-nav__item--active{% endif %}" style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-plus-circle fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">New booking</span>
  </a>
</li>

<li class="mx-3 my-2"><hr style="border-color: rgba(255,255,255,.1); margin: 0;"></li>

<li>
  <a href="{% url 'codex_showcase:booking_appointments' %}?status=pending" class="cab-nav__item d-flex align-items-center justify-content-between px-3 py-2 rounded mx-2 {% if tab == 'pending' %}cab-nav__item--active{% endif %}" style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="d-flex align-items-center">
      <span class="bi bi-hourglass-split fs-5 flex-shrink-0"></span>
      <span class="cab-nav__label ms-3" style="white-space: nowrap;">Pending</span>
    </span>
    {% if pending_count %}<span class="badge rounded-pill cab-nav__label" style="background: #f59e0b; color: #fff; font-size: .65rem; min-width: 20px;">{{ pending_count }}</span>{% endif %}
  </a>
</li>
<li class="mt-1">
  <a href="{% url 'codex_showcase:booking_appointments' %}?status=completed" class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 {% if tab == 'completed' %}cab-nav__item--active{% endif %}" style="color: var(--cab-sidebar-text); transition: background 0.15s;">
    <span class="bi bi-check-circle fs-5 flex-shrink-0"></span>
    <span class="cab-nav__label ms-3" style="white-space: nowrap;">Completed</span>
  </a>
</li>
<li class="mt-1">
  <a href="{% url 'codex_showcase:booking_appointments' %}" class="cab-nav__item d-flex align-items-center px-3 py-2 rounded mx-2 {% if tab == 'all' %}cab-nav__item--active{% endif %}" 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;">All Appointments</span>
  </a>
</li>
{% endwith %}
{% endblock %}