{# CODEX_DJANGO_CLI BLUEPRINT STATUS: MOVE_TO_CLI_BLUEPRINT. Reason: generated app-layer or scaffold-owned template for codex-django-cli blueprints. #}
{# Partial template for HTMX updates #}
{% load i18n %}

<div id="appointments-container" 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: 220px;">{% trans "Client" %}</th>
        <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none;">{% trans "SERVICE" %}</th>
        <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 130px;">{% trans "SPECIALIST" %}</th>
        <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 150px;">{% trans "Date / Time" %}</th>
        <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 80px;">{% trans "Price" %}</th>
        <th class="px-3 py-3 fw-semibold text-muted" style="font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; border: none; width: 130px;">{% trans "STATUS" %}</th>
      </tr>
    </thead>
    <tbody>
      {% for appt in appointments %}
      <tr class="appt-row align-middle"
          @click="$dispatch('open-modal', { url: '{% url 'cabinet:booking_modal' appt.id %}' })">

        <td class="px-4 py-3" style="border: none;">
          <div class="d-flex align-items-center gap-2">
            <div class="rounded-circle d-flex align-items-center justify-content-center text-white fw-bold flex-shrink-0"
                 style="width: 34px; height: 34px; font-size: .7rem; background: {{ appt.client_color }};">
                 {{ appt.initials }}
            </div>
            <div>
              <div class="fw-semibold" style="line-height: 1.3;">{{ appt.client_name }}</div>
              <div class="text-muted" style="font-size: .72rem;">{{ appt.phone|default:'' }}</div>
            </div>
          </div>
        </td>

        <td class="px-3 py-3" style="border: none;">
          <div style="line-height: 1.3;">{{ appt.service_title }}</div>
          <div class="text-muted" style="font-size: .72rem;">{{ appt.duration }} min</div>
        </td>

        <td class="px-3 py-3" style="border: none;">
          <div class="d-flex align-items-center gap-2">
            <div class="rounded-circle d-flex align-items-center justify-content-center text-white flex-shrink-0"
                 style="width: 26px; height: 26px; font-size: .6rem; background: var(--cab-primary);">
                 {{ appt.master_initials }}
            </div>
            <span style="font-size: .8rem;">{{ appt.master_name }}</span>
          </div>
        </td>

        <td class="px-3 py-3" style="border: none;">
          <div class="fw-semibold" style="line-height: 1.3;">{{ appt.date|default:'' }}</div>
          <div class="text-muted" style="font-size: .75rem;">{{ appt.time }}</div>
        </td>

        <td class="px-3 py-3 fw-semibold" style="border: none;">${{ appt.price }}</td>

        <td class="px-3 py-3" style="border: none;">
          <span class="badge rounded-pill px-2 py-1" style="background: {{ appt.status_bg }}; color: {{ appt.status_color }}; font-size: .72rem; font-weight: 600;">
            <span class="me-1" style="font-size: .55rem;">●</span>{{ appt.status_label }}
          </span>
        </td>
      </tr>
      {% empty %}
      <tr>
        <td colspan="6" class="text-center py-5 text-muted">
          <span class="bi bi-inbox fs-2 mb-2 d-block"></span>
          {% trans "No appointments found" %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>