{% load i18n %}
<div class="row g-4">
  <div class="col-md-8">

    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-0 d-flex align-items-center justify-content-between">
        <div>
          <h6 class="fw-semibold mb-0">Quick Access Tabs</h6>
          <div class="text-muted mt-1" style="font-size:.8rem;">
            Enabled items appear in the topbar next to the menu.
            <span class="fw-medium" style="color: var(--cab-primary);">1 of 5</span> active.
          </div>
        </div>
      </div>
    </div>

    {# ─── Booking ─── #}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-1 d-flex align-items-center gap-2">
        <span class="bi bi-calendar3" style="color: var(--cab-primary);"></span>
        <span class="fw-semibold" style="font-size:.9rem;">Booking</span>
      </div>
      <div class="card-body p-0">
        <ul class="list-unstyled mb-0">

          <li class="d-flex align-items-center gap-3 px-3 py-2" style="border-bottom: 1px solid #f1f5f9;">
            <span class="bi bi-calendar-week flex-shrink-0 text-muted" style="width:18px;"></span>
            <div class="flex-grow-1">
              <div style="font-size:.875rem; font-weight:500;">Schedule</div>
              <div class="text-muted" style="font-size:.75rem;">booking:index</div>
            </div>
            <div class="form-check form-switch mb-0">
              <input class="form-check-input" type="checkbox" role="switch" style="width:2em;height:1.1em;">
            </div>
          </li>

          <li class="d-flex align-items-center gap-3 px-3 py-2" style="border-bottom: 1px solid #f1f5f9;">
            <span class="bi bi-plus-circle flex-shrink-0 text-muted" style="width:18px;"></span>
            <div class="flex-grow-1">
              <div style="font-size:.875rem; font-weight:500;">New booking</div>
              <div class="text-muted" style="font-size:.75rem;">booking:new</div>
            </div>
            <div class="form-check form-switch mb-0">
              <input class="form-check-input" type="checkbox" role="switch" style="width:2em;height:1.1em;">
            </div>
          </li>

          <li class="d-flex align-items-center gap-3 px-3 py-2">
            <span class="bi bi-list-ul flex-shrink-0 text-muted" style="width:18px;"></span>
            <div class="flex-grow-1">
              <div style="font-size:.875rem; font-weight:500;">All Appointments</div>
              <div class="text-muted" style="font-size:.75rem;">booking:appointments</div>
            </div>
            <div class="form-check form-switch mb-0">
              <input class="form-check-input" type="checkbox" role="switch" style="width:2em;height:1.1em;">
            </div>
          </li>

        </ul>
      </div>
    </div>

    {# ─── Messaging ─── #}
    <div class="card border-0 shadow-sm mb-3">
      <div class="card-header bg-white border-0 pt-3 pb-1 d-flex align-items-center gap-2">
        <span class="bi bi-chat-dots" style="color: var(--cab-primary);"></span>
        <span class="fw-semibold" style="font-size:.9rem;">Messaging</span>
      </div>
      <div class="card-body p-0">
        <ul class="list-unstyled mb-0">

          <li class="d-flex align-items-center gap-3 px-3 py-2" style="border-bottom: 1px solid #f1f5f9;">
            <span class="bi bi-inbox flex-shrink-0 text-muted" style="width:18px;"></span>
            <div class="flex-grow-1">
              <div style="font-size:.875rem; font-weight:500;">Inbox</div>
              <div class="text-muted" style="font-size:.75rem;">messaging:index?folder=inbox</div>
            </div>
            <div class="form-check form-switch mb-0">
              <input class="form-check-input" type="checkbox" role="switch" style="width:2em;height:1.1em;">
            </div>
          </li>

          <li class="d-flex align-items-center gap-3 px-3 py-2" style="border-bottom: 1px solid #f1f5f9;">
            <span class="bi bi-check2-all flex-shrink-0 text-muted" style="width:18px;"></span>
            <div class="flex-grow-1">
              <div style="font-size:.875rem; font-weight:500;">Processed</div>
              <div class="text-muted" style="font-size:.75rem;">messaging:index?folder=processed</div>
            </div>
            <div class="form-check form-switch mb-0">
              <input class="form-check-input" type="checkbox" role="switch" style="width:2em;height:1.1em;">
            </div>
          </li>

          <li class="d-flex align-items-center gap-3 px-3 py-2">
            <span class="bi bi-chat-left-text flex-shrink-0 text-muted" style="width:18px;"></span>
            <div class="flex-grow-1">
              <div style="font-size:.875rem; font-weight:500;">All Threads</div>
              <div class="text-muted" style="font-size:.75rem;">messaging:index</div>
            </div>
            <div class="form-check form-switch mb-0">
              <input class="form-check-input" type="checkbox" role="switch" style="width:2em;height:1.1em;">
            </div>
          </li>

        </ul>
      </div>
    </div>

    {# ─── Hint ─── #}
    <div class="card border-0 shadow-sm" style="border-left: 3px solid var(--cab-primary) !important;">
      <div class="card-body py-2 px-3">
        <div class="d-flex align-items-start gap-2">
          <span class="bi bi-info-circle mt-1 flex-shrink-0" style="color: var(--cab-primary);"></span>
          <div class="text-muted" style="font-size:.8rem;">
            Enabled items will appear in the topbar after the "Services" menu.
            Maximum 5 tabs. New items are added automatically when modules are connected.
          </div>
        </div>
      </div>
    </div>

  </div>
</div>