{% extends "base.html" %}
{% block title %}Роли и права — Мои Товары{% endblock %}
{% block page_title %}Роли и права{% endblock %}

{% block content %}
<ol class="breadcrumb">
  <li><a href="/admin/users">Пользователи</a></li>
  <li>Роли и права</li>
</ol>

<div class="pg-title">Роли и права</div>
<div class="pg-sub">Управление разрешениями для каждой роли</div>

{% for role in roles %}
<div class="card" style="margin-bottom:14px;">
  <div class="card-hd">
    <div>
      <div class="card-title"><i class="bi bi-shield-lock" style="margin-right:6px;"></i>{{ role.name }}</div>
      {% if role.description %}
      <div class="card-sub">{{ role.description }}</div>
      {% endif %}
    </div>
  </div>
  <form method="post" action="/admin/roles/{{ role.id }}/permissions">
    <div style="display:flex;flex-wrap:wrap;gap:12px;margin-bottom:16px;">
      {% for perm in permissions %}
      <label style="display:flex;align-items:center;gap:7px;cursor:pointer;font-size:13px;padding:6px 10px;border:1px solid #E4E6EE;border-radius:7px;background:#F9FAFB;">
        <input type="checkbox" name="perm_{{ perm.id }}" value="{{ perm.id }}"
               {% if perm.id in role_perm_ids[role.id] %}checked{% endif %}
               style="accent-color:#FF5500;">
        {{ perm.name }}
        {% if perm.description %}
        <span style="font-size:11px;color:#9EA8BE;">({{ perm.description }})</span>
        {% endif %}
      </label>
      {% endfor %}
    </div>
    <button type="submit" class="btn btn-primary btn-sm">
      <i class="bi bi-save"></i> Сохранить права для «{{ role.name }}»
    </button>
  </form>
</div>
{% endfor %}
{% endblock %}