{% extends 'core/base.html' %}
{% block title %}{{ title }} | Killian{% endblock %}
{% block content %}
<div class="page-head">
    <div>
        <div class="breadcrumb"><a href="{% url 'role_list' %}">Roles</a><span>/</span><span>{{ title }}</span></div>
        <h1>{{ title }}</h1>
        <p>Define the role identity and description here, then manage its application permissions separately.</p>
    </div>
    <div class="page-head-actions">
        {% if role %}<a class="button secondary" href="{% url 'permission_edit' role.pk %}">Permissions</a>{% endif %}
        <a class="button secondary" href="{% url 'role_list' %}">Back</a>
    </div>
</div>

{% if role and role.is_protected %}
<div style="padding:14px 16px;margin-bottom:20px;border:1px solid #b78a2c;border-radius:10px;background:rgba(183,138,44,.10);">
    <strong style="color:#e3b84f;">Protected built-in role</strong>
    <div style="margin-top:6px;">The {{ role.name }} role can be documented here, but its name and role identity cannot be changed or deleted.</div>
</div>
{% endif %}

<form method="post" class="form-card">
    {% csrf_token %}
    {% if form.non_field_errors %}<div class="msg error">{{ form.non_field_errors }}</div>{% endif %}
    {% for field in form %}
        <div class="form-field">
            <label for="{{ field.id_for_label }}">{{ field.label }}</label>
            {{ field }}
            {% if field.help_text %}<div class="helptext">{{ field.help_text }}</div>{% endif %}
            {% for error in field.errors %}<div class="field-error">{{ error }}</div>{% endfor %}
        </div>
    {% endfor %}
    <div class="form-actions">
        <button type="submit">Save role</button>
        <a class="button secondary" href="{% url 'role_list' %}">Cancel</a>
    </div>
</form>

{% if role %}
<section class="module-panel" style="margin-top:22px;">
    <div class="module-panel-head">
        <div>
            <h2>Assigned Users</h2>
            <span>{{ assigned_users|length }} account{{ assigned_users|length|pluralize }} currently use this role.</span>
        </div>
    </div>
    <div style="padding:12px 22px 22px;">
        {% for item in assigned_users %}
            <div style="display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);">
                <div>
                    <strong>{{ item.username }}</strong>
                    <div class="muted">{{ item.get_full_name|default:item.email|default:'No profile details' }}</div>
                </div>
                <a class="button secondary small-button" href="{% url 'user_edit' item.pk %}">Edit user</a>
            </div>
        {% empty %}
            <div class="empty-state">No users are assigned to this role.</div>
        {% endfor %}
    </div>
</section>
{% endif %}
{% endblock %}