{% extends "tasks/base.html" %}
{% load tasks_tags %}
{% block title %}{{ form_title }} — Staff Panel{% endblock %}
{% block topbar_title %}{{ form_title }}{% endblock %}
{% block content %}
<div class="s-card s-card-pad" style="max-width:900px;">
    <form method="post">
        {% csrf_token %}
        <div class="staff-form-group">
            <label class="staff-form-label" for="{{ form.name.id_for_label }}">Role Name *</label>
            {{ form.name }}
            {% if form.name.errors %}<div style="font-size:11px;color:var(--s-red);margin-top:3px;">{{ form.name.errors.0 }}</div>{% endif %}
        </div>
        <div class="staff-form-group">
            <label class="staff-form-label" for="{{ form.description.id_for_label }}">Description</label>
            {{ form.description }}
        </div>
        {% for cat, entries in catalog.items %}
        <div style="margin-top:20px;">
            <div style="font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--s-text3);padding-bottom:8px;border-bottom:1px solid var(--s-border);margin-bottom:10px;">{{ cat }}</div>
            <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px 16px;">
                {% for key, label in entries %}
                {% with field_name='perm_'|add:key %}
                <label style="display:flex;align-items:center;gap:8px;font-size:12px;color:var(--s-text2);cursor:pointer;padding:4px 0;">
                    {{ form|field:field_name }}
                    <span>{{ label }}</span>
                </label>
                {% endwith %}
                {% endfor %}
            </div>
        </div>
        {% endfor %}
        <div style="display:flex;gap:8px;margin-top:24px;padding-top:16px;border-top:1px solid var(--s-border);">
            <button type="submit" class="s-btn s-btn-primary">Save Role</button>
            <a href="{% url 'task_management:role_list' %}" class="s-btn s-btn-outline">Cancel</a>
        </div>
    </form>
</div>
{% endblock %}