{% 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">🛡️ Manage User Roles</h4>
    <span class="text-muted small">Create roles, assign to users, and remove unused roles.</span>
  </div>

  <!-- Create Role -->
  <div class="card mb-4 shadow-sm">
    <div class="card-body">
      <form method="POST" class="row g-3 align-items-end">
        <div class="col-md-5">
          <label class="form-label">New Role Name</label>
          <input type="text" name="role_name" class="form-control" placeholder="e.g. hr, manager, finance" required>
          <div class="form-text">Names are stored in lowercase.</div>
        </div>
        <div class="col-md-3">
          <button type="submit" class="btn btn-primary w-100">
            <i class="bi bi-plus-circle"></i> Add Role
          </button>
        </div>
      </form>
    </div>
  </div>

  <div class="row g-4">
    <!-- Roles list -->
    <div class="col-lg-6">
      <div class="card h-100 shadow-sm">
        <div class="card-header bg-light">
          <strong>Roles</strong>
        </div>
        <div class="card-body p-0">
          <table class="table table-hover mb-0 align-middle">
            <thead class="table-secondary">
              <tr>
                <th>Role</th>
                <th class="text-center"># Users</th>
                <th class="text-end">Actions</th>
              </tr>
            </thead>
            <tbody>
              {% for role in roles %}
              <tr>
                <td class="fw-semibold text-capitalize">{{ role.name }}</td>
                <td class="text-center">
                  <span class="badge bg-primary-subtle text-primary">{{ role_counts.get(role.id, 0) }}</span>
                </td>
                <td class="text-end">
                  <form action="{{ url_for('auth.delete_role', role_id=role.id) }}" method="POST" class="d-inline"
                        onsubmit="return confirm('Delete role \"{{ role.name }}\"?');">
                    <button type="submit" class="btn btn-sm btn-outline-danger"
                            {% if role.name|lower == 'admin' %}disabled title="Protected role"{% endif %}>
                      <i class="bi bi-trash"></i>
                    </button>
                  </form>
                </td>
              </tr>
              {% else %}
              <tr><td colspan="3" class="text-muted text-center py-3">No roles found.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>

    <!-- Assign role -->
    <div class="col-lg-6">
      <div class="card h-100 shadow-sm">
        <div class="card-header bg-light">
          <strong>Assign Role to Employee</strong>
        </div>
        <div class="card-body">
          <form method="POST" action="{{ url_for('auth.assign_role') }}" class="row g-3">
            <div class="col-md-7">
              <label class="form-label">Employee</label>
              <select name="employee_id" class="form-select" required>
                <option value="">-- Select Employee --</option>
                {% for e in employees %}
                  <option value="{{ e.id }}">
                    {{ e.full_name }} {% if e.employee_code %}({{ e.employee_code }}){% endif %}
                    {% if e.role %} — current: {{ e.role.name }}{% endif %}
                  </option>
                {% endfor %}
              </select>
            </div>
            <div class="col-md-5">
              <label class="form-label">Role</label>
              <select name="role_id" class="form-select" required>
                <option value="">-- Select Role --</option>
                {% for r in roles %}
                  <option value="{{ r.id }}">{{ r.name }}</option>
                {% endfor %}
              </select>
            </div>
            <div class="col-12 text-end">
              <button class="btn btn-success">
                <i class="bi bi-person-check"></i> Assign
              </button>
            </div>
          </form>

          <div class="text-muted small mt-3">
            Tip: Use <em>Access Control</em> to map role → feature access via submenu endpoints.
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
{% endblock %}