{% extends 'base.html' %}
{% block content %}
<div class="container py-4">
  <div class="d-flex align-items-center justify-content-between mb-3">
    <h4 class="mb-0">🎛 User-Specific Permissions</h4>
    <span class="text-muted small">Grants/subtracts access independently of role.</span>
  </div>

  <!-- Select User -->
  <form method="GET" class="row g-3 mb-3">
    <div class="col-md-6">
      <label class="form-label">Select Employee</label>
      <select name="user_id" class="form-select" onchange="this.form.submit()" required>
        <option value="">-- Choose Employee --</option>
        {% for e in employees %}
          <option value="{{ e.id }}" {% if selected_user_id==e.id %}selected{% endif %}>
            {{ e.full_name }}{% if e.employee_code %} ({{ e.employee_code }}){% endif %}
            {% if e.role %} — role: {{ e.role.name }}{% endif %}
          </option>
        {% endfor %}
      </select>
    </div>
  </form>

  {% if selected_user_id %}
  <form method="POST">
    <input type="hidden" name="user_id" value="{{ selected_user_id }}">

    <div class="alert alert-info d-flex align-items-center" role="alert">
      <i class="bi bi-info-circle me-2"></i>
      These overrides are <strong>additive</strong> to role access. If role denies a submenu, granting it here will allow access.
    </div>

    <div class="accordion" id="menuAccordion">
      {% for menu in all_menus %}
      <div class="accordion-item mb-2">
        <h2 class="accordion-header" id="heading{{ menu.id }}">
          <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse"
                  data-bs-target="#collapse{{ menu.id }}" aria-expanded="false">
            <i class="bi {{ menu.icon or 'bi-list' }} me-2"></i> {{ menu.name }}
          </button>
        </h2>
        <div id="collapse{{ menu.id }}" class="accordion-collapse collapse" data-bs-parent="#menuAccordion">
          <div class="accordion-body">
            <div class="row">
            {% for submenu in menu.submenus %}
            <div class="col-md-4 mb-2">
                <div class="form-check">
                <input class="form-check-input" type="checkbox" name="submenu_ids"
                        id="sm{{ submenu.id }}" value="{{ submenu.id }}"
                        {% if submenu.id in selected_ids %}checked{% endif %}>
                <label class="form-check-label" for="sm{{ submenu.id }}">
                    {{ submenu.name }} <small class="text-muted">(order {{ submenu.order or 0 }})</small>
                </label>
                </div>
            </div>
            {% endfor %}
            </div>
          </div>
        </div>
      </div>
      {% endfor %}
    </div>

    <div class="mt-4 text-end">
      <button type="submit" class="btn btn-primary px-4">
        <i class="bi bi-save"></i> Save Overrides
      </button>
    </div>
  </form>
  {% endif %}
</div>
{% endblock %}