{% load i18n %}
<div class="row g-4">
  <div class="col-12">
    <div class="card border-0 shadow-sm">
      <div class="card-header bg-white border-0 pt-3 pb-0">
        <h6 class="fw-semibold mb-0">{% trans "Owner quick access" %}</h6>
      </div>
      <div class="card-body">
        <p class="text-muted mb-4" style="font-size:.875rem;">
          {% trans "Choose which module links should appear in the owner quick-access bar." %}
        </p>

        <div
          x-data='{ selectedKeys: {{ selected_staff_quick_access|safe|default:"[]" }} }'
          class="d-flex flex-column gap-4"
        >
          <input type="hidden" name="staff_quick_access_links" :value="JSON.stringify(selectedKeys)">

          {% for group in quick_access_groups %}
            <section class="border rounded-4 p-3 bg-light-subtle">
              <div class="d-flex align-items-center gap-2 mb-3">
                <span class="bi {{ group.module_icon }} text-primary"></span>
                <div class="fw-semibold">{{ group.module_label }}</div>
              </div>

              <div class="d-flex flex-column gap-2">
                {% for item in group.items %}
                  <label class="d-flex align-items-center justify-content-between gap-3 bg-white rounded-3 px-3 py-2 border">
                    <div class="d-flex align-items-center gap-2">
                      {% if item.icon %}
                        <span class="bi {{ item.icon }} text-muted"></span>
                      {% endif %}
                      <div>
                        <div class="fw-medium">{{ item.label }}</div>
                        <div class="text-muted small">{{ item.url }}</div>
                      </div>
                    </div>
                    <div class="form-check form-switch m-0">
                      <input
                        class="form-check-input"
                        type="checkbox"
                        x-model="selectedKeys"
                        value="{{ item.key }}"
                      >
                    </div>
                  </label>
                {% endfor %}
              </div>
            </section>
          {% empty %}
            <div class="text-muted small">
              {% trans "No staff cabinet modules with sidebar links are registered yet." %}
            </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>