{% extends "base.html" %}
{% block title %}نقش‌ها و دسترسی‌ها{% endblock %}
{% block page_title %}<i class="bi bi-shield-lock"></i> نقش‌ها و دسترسی‌ها (RBAC){% endblock %}

{% block content %}

{% macro perm_checkboxes(selected) %}
  {% set groups = {} %}
  {% for code, name, module, desc in catalog %}
    {% if groups.update({module: (groups.get(module, []) + [(code, name, desc)])}) %}{% endif %}
  {% endfor %}
  {% for module, perms in groups.items() %}
  <div class="mb-2">
    <div class="text-muted text-xs mb-1">{{ module }}</div>
    <div class="d-flex flex-wrap gap-2">
      {% for code, name, desc in perms %}
      <label class="d-inline-flex align-items-center gap-1" style="font-size:.78rem" title="{{ desc }}">
        <input type="checkbox" class="form-check-input" name="permissions" value="{{ code }}"
               {{ 'checked' if code in selected else '' }}>
        {{ name }}
      </label>
      {% endfor %}
    </div>
  </div>
  {% endfor %}
{% endmacro %}

<div class="row g-3">
  <div class="col-lg-7">
    <div class="card">
      <div class="card-header d-flex justify-content-between align-items-center">
        <h6><i class="bi bi-person-badge me-2"></i>نقش‌ها ({{ roles|length }})</h6>
        <button class="btn btn-sm btn-primary" data-bs-toggle="modal" data-bs-target="#addRole"><i class="bi bi-plus-lg me-1"></i>نقش جدید</button>
      </div>
      <div class="table-responsive">
        <table class="table table-hover align-middle mb-0">
          <thead><tr><th>#</th><th>نام</th><th>دسترسی‌ها</th><th>نوع</th><th></th></tr></thead>
          <tbody>
            {% for r in roles %}
            <tr>
              <td class="text-xs text-muted">{{ r.id }}</td>
              <td class="fw-semibold">{{ r.name }}<div class="text-muted text-xs">{{ r.description or '' }}</div></td>
              <td class="text-xs text-muted">{{ r.permission_codes()|length }} دسترسی</td>
              <td>{% if r.is_system %}<span class="chip chip-telegram">سیستمی</span>{% else %}<span class="chip chip-group">سفارشی</span>{% endif %}</td>
              <td>
                <div class="d-flex gap-1">
                  <button class="btn btn-xs btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#editRole{{ r.id }}"><i class="bi bi-pencil"></i></button>
                  {% if not r.is_system %}
                  <form method="POST" action="{{ url_for('roles.delete', role_id=r.id) }}" onsubmit="return confirm('حذف نقش «{{ r.name }}»؟')">
                    <button class="btn btn-xs btn-outline-danger"><i class="bi bi-trash3"></i></button>
                  </form>
                  {% endif %}
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  </div>

  <div class="col-lg-5">
    <div class="card">
      <div class="card-header"><h6><i class="bi bi-people me-2"></i>انتساب نقش به کاربران</h6></div>
      <div class="card-body">
        {% for u in users %}
        <form method="POST" action="{{ url_for('roles.assign', user_id=u.id) }}" class="mb-3 pb-2" style="border-bottom:1px solid var(--border-light)">
          <div class="d-flex justify-content-between align-items-center mb-1">
            <span class="fw-semibold">{{ u.username }}{% if u.is_admin %} <span class="chip chip-active">Superuser</span>{% endif %}</span>
            <button class="btn btn-xs btn-primary">ذخیره</button>
          </div>
          <div class="d-flex flex-wrap gap-2">
            {% for r in roles %}
            <label class="d-inline-flex align-items-center gap-1" style="font-size:.78rem">
              <input type="checkbox" class="form-check-input" name="role_ids" value="{{ r.id }}"
                     {{ 'checked' if r.id in user_roles.get(u.id, []) else '' }} {{ 'disabled' if u.is_admin else '' }}>
              {{ r.name }}
            </label>
            {% endfor %}
          </div>
        </form>
        {% endfor %}
        <div class="text-muted text-xs">کاربران Superuser به‌صورت خودکار همه دسترسی‌ها را دارند.</div>
      </div>
    </div>
  </div>
</div>

{# Add role modal #}
<div class="modal fade" id="addRole" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('roles.add') }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">نقش جدید</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
      <div class="row g-3 mb-2">
        <div class="col-md-6"><label class="form-label">نام *</label><input name="name" class="form-control" required></div>
        <div class="col-md-6"><label class="form-label">توضیح</label><input name="description" class="form-control"></div>
      </div>
      <label class="form-label">دسترسی‌ها</label>
      {{ perm_checkboxes([]) }}
    </div>
    <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button><button type="submit" class="btn btn-primary">ایجاد</button></div>
  </form>
</div></div>

{# Edit role modals #}
{% for r in roles %}
<div class="modal fade" id="editRole{{ r.id }}" tabindex="-1"><div class="modal-dialog modal-dialog-centered modal-lg">
  <form method="POST" action="{{ url_for('roles.edit', role_id=r.id) }}" class="modal-content">
    <div class="modal-header"><h5 class="modal-title">ویرایش «{{ r.name }}»</h5><button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
    <div class="modal-body">
      <div class="row g-3 mb-2">
        <div class="col-md-6"><label class="form-label">نام</label><input name="name" class="form-control" value="{{ r.name }}" {{ 'readonly' if r.is_system else '' }}></div>
        <div class="col-md-6"><label class="form-label">توضیح</label><input name="description" class="form-control" value="{{ r.description or '' }}"></div>
      </div>
      <label class="form-label">دسترسی‌ها</label>
      {{ perm_checkboxes(r.permission_codes()) }}
    </div>
    <div class="modal-footer"><button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">انصراف</button><button type="submit" class="btn btn-primary">ذخیره</button></div>
  </form>
</div></div>
{% endfor %}

{% endblock %}