{% load i18n %}
<div class="page-content">

    <div style="display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:1.25rem; flex-wrap:wrap;">
        <div>
            <div style="font-size:0.75rem; color:var(--color-muted-foreground); margin-bottom:0.35rem;">
                <a href="{% url 'user_groups' %}"
                   hx-get="{% url 'user_groups' %}" hx-target="#main-content" hx-push-url="{% url 'user_groups' %}"
                   hx-indicator="#loader"
                   style="color:inherit; text-decoration:none;">{% trans "Группы пользователей" %}</a>
                <span> › </span><span>{{ group.name }}</span>
            </div>
            <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">
                {% trans "Сводная таблица доступа" %} › {{ group.name }}
            </h1>
        </div>
        <form method="post" action="{% url 'user_group_access_copy' group.id %}"
              style="display:flex; gap:0.5rem; align-items:center; flex-wrap:wrap; margin:0;">
            {% csrf_token %}
            <select name="target_group_id" required
                    style="font-size:0.8125rem; padding:0.35rem 0.5rem; border-radius:0.375rem; border:1px solid var(--color-border); background:var(--color-card); color:var(--color-foreground);">
                <option value="">{% trans "Копировать в…" %}</option>
                {% for og in other_groups %}
                <option value="{{ og.id }}">{{ og.name }}</option>
                {% endfor %}
            </select>
            <button type="submit" class="btn btn-primary" style="font-size:0.8125rem;">{% trans "Копировать доступ" %}</button>
        </form>
    </div>

    {% if ug_message %}
    <div style="margin-bottom:1rem; padding:0.65rem 0.9rem; border-radius:0.5rem; background:color-mix(in srgb, #16a34a 12%, var(--color-card)); border:1px solid color-mix(in srgb, #16a34a 30%, var(--color-border)); font-size:0.8125rem;">{{ ug_message }}</div>
    {% endif %}
    {% if ug_error %}
    <div style="margin-bottom:1rem; padding:0.65rem 0.9rem; border-radius:0.5rem; background:color-mix(in srgb, #dc2626 12%, var(--color-card)); border:1px solid color-mix(in srgb, #dc2626 30%, var(--color-border)); font-size:0.8125rem;">{{ ug_error }}</div>
    {% endif %}

    <form method="post" action="{% url 'user_group_access_save' group.id %}" id="access-matrix-form">
        {% csrf_token %}
        <div style="background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); overflow:hidden;">
            <table style="width:100%; border-collapse:collapse; font-size:0.8125rem;">
                <thead>
                    <tr style="background:var(--color-muted);">
                        <th style="padding:0.625rem 1rem; text-align:left; font-size:0.7rem; text-transform:uppercase; color:var(--color-muted-foreground);">{% trans "Сущность" %}</th>
                        <th style="padding:0.625rem 1rem; text-align:left; font-size:0.7rem; text-transform:uppercase; color:var(--color-muted-foreground); width:14rem;">{% trans "Просмотр" %}</th>
                        <th style="padding:0.625rem 1rem; text-align:left; font-size:0.7rem; text-transform:uppercase; color:var(--color-muted-foreground);">{% trans "Доступ" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in matrix_rows %}
                    <tr class="tr-hover access-matrix-row" style="border-bottom:1px solid var(--color-border);" data-section="{{ row.key }}">
                        <td style="padding:0.75rem 1rem; color:var(--color-foreground); font-weight:500;">{{ row.label }}</td>
                        <td style="padding:0.65rem 1rem;">
                            <select name="view_{{ row.key }}" class="access-view-select"
                                    style="width:100%; font-size:0.8125rem; padding:0.35rem 0.5rem; border-radius:0.375rem; border:1px solid var(--color-border); background:var(--color-card); color:var(--color-foreground);">
                                <option value="0" {% if not row.can_view %}selected{% endif %}>{% trans "Нет" %}</option>
                                <option value="1" {% if row.can_view %}selected{% endif %}>{% trans "Просмотр" %}</option>
                            </select>
                        </td>
                        <td style="padding:0.65rem 1rem;">
                            <div class="access-cud" style="display:flex; flex-wrap:wrap; gap:0.75rem 1.25rem; {% if not row.can_view %}opacity:0.45; pointer-events:none;{% endif %}">
                                <label style="display:inline-flex; align-items:center; gap:0.35rem; cursor:pointer;">
                                    <input type="checkbox" name="create_{{ row.key }}" value="1" {% if row.can_create %}checked{% endif %}>
                                    <span>{% trans "Создать" %}</span>
                                </label>
                                <label style="display:inline-flex; align-items:center; gap:0.35rem; cursor:pointer;">
                                    <input type="checkbox" name="update_{{ row.key }}" value="1" {% if row.can_update %}checked{% endif %}>
                                    <span>{% trans "Обновить" %}</span>
                                </label>
                                <label style="display:inline-flex; align-items:center; gap:0.35rem; cursor:pointer;">
                                    <input type="checkbox" name="delete_{{ row.key }}" value="1" {% if row.can_delete %}checked{% endif %}>
                                    <span>{% trans "Удалить" %}</span>
                                </label>
                            </div>
                        </td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>

        <div style="margin-top:1rem; background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:1rem 1.25rem;">
            <div style="font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--color-muted-foreground); margin-bottom:0.5rem;">{% trans "Отчёты" %}</div>
            <label style="display:flex; align-items:flex-start; gap:0.6rem; cursor:pointer; font-size:0.875rem;">
                <input type="checkbox" name="view_all_reports" value="1" {% if view_all_reports %}checked{% endif %} style="margin-top:0.2rem;">
                <span>
                    <strong>{% trans "Видеть отчёты всех отделов" %}</strong>
                    <span style="display:block; font-size:0.8125rem; color:var(--color-muted-foreground); margin-top:0.2rem;">
                        {% trans "После публикации руководителем отдела. Без этой галочки сотрудник видит только отчёты своего отдела." %}
                    </span>
                </span>
            </label>
        </div>

        <div style="margin-top:1rem; background:var(--color-card); border-radius:0.75rem; border:1px solid var(--color-border); padding:1rem 1.25rem;">
            <div style="font-size:0.7rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--color-muted-foreground); margin-bottom:0.5rem;">{% trans "Документы" %}</div>
            <label style="display:flex; align-items:flex-start; gap:0.6rem; cursor:pointer; font-size:0.875rem; margin-bottom:0.75rem;">
                <input type="checkbox" name="view_all_documents" value="1" {% if view_all_documents or edit_all_documents %}checked{% endif %} style="margin-top:0.2rem;">
                <span>
                    <strong>{% trans "Просмотр всех документов" %}</strong>
                    <span style="display:block; font-size:0.8125rem; color:var(--color-muted-foreground); margin-top:0.2rem;">
                        {% trans "Все отделы, разделы, кадровые дела и документы аптек. Без галочки — только свой отдел и выданные ACL." %}
                    </span>
                </span>
            </label>
            <label style="display:flex; align-items:flex-start; gap:0.6rem; cursor:pointer; font-size:0.875rem;">
                <input type="checkbox" name="edit_all_documents" value="1" {% if edit_all_documents %}checked{% endif %} style="margin-top:0.2rem;">
                <span>
                    <strong>{% trans "Редактирование всех документов" %}</strong>
                    <span style="display:block; font-size:0.8125rem; color:var(--color-muted-foreground); margin-top:0.2rem;">
                        {% trans "Включает просмотр. Загрузка, изменение и удаление во всех разделах и аптеках." %}
                    </span>
                </span>
            </label>
        </div>

        <div style="display:flex; gap:0.75rem; margin-top:1.25rem; flex-wrap:wrap;">
            <a href="{% url 'user_groups' %}"
               hx-get="{% url 'user_groups' %}" hx-target="#main-content" hx-push-url="{% url 'user_groups' %}"
               hx-indicator="#loader"
               class="btn btn-secondary" style="text-decoration:none; border:1px solid var(--color-border);">{% trans "Назад" %}</a>
            <button type="submit" class="btn btn-primary">{% trans "Сохранить" %}</button>
        </div>
    </form>
</div>