{% extends "admin/change_list.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'dynamic_admin_columns/column-picker.css' %}">
{% endblock %}

{% block extrahead %}
{{ block.super }}
<script src="{% static 'dynamic_admin_columns/column-picker.js' %}" defer></script>
{% endblock %}

{% block object-tools-items %}
{{ block.super }}
{% if dynamic_admin_columns %}
<li>
    <a href="#"
       id="dyncol-button"
       class="dyncol-button{% if dynamic_admin_columns.has_personal_layout %} dyncol-personal{% endif %}"
       data-save-url="{{ dynamic_admin_columns.save_url }}"
       data-reset-url="{{ dynamic_admin_columns.reset_url }}"
       data-has-personal="{{ dynamic_admin_columns.has_personal_layout|yesno:'1,0' }}"
       data-is-superuser="{{ dynamic_admin_columns.is_superuser|yesno:'1,0' }}">
        {% translate "Columns" %}{% if dynamic_admin_columns.has_personal_layout %} ★{% endif %}
    </a>
</li>
{% endif %}
{% endblock %}

{% block content %}
{{ block.super }}

{% if dynamic_admin_columns %}
{# Per-scope column lists, swapped client-side when the scope radio changes. #}
{{ dynamic_admin_columns.personal_columns|json_script:"dyncol-personal-data" }}
{{ dynamic_admin_columns.global_columns|json_script:"dyncol-global-data" }}
{# Server-resolved translations consumed by ``column-picker.js``. #}
{{ dynamic_admin_columns.js_i18n|json_script:"dyncol-i18n" }}

<div id="dyncol-modal" class="dyncol-modal" hidden role="dialog" aria-modal="true" aria-labelledby="dyncol-modal-title">
    <div class="dyncol-modal-backdrop" data-dyncol-close></div>
    <div class="dyncol-modal-content" role="document">
        {# Rendered inside the modal so ``column-picker.js`` can read the
           token from the DOM. The cookie fallback only works when
           ``CSRF_COOKIE_HTTPONLY = False`` (the Django default); projects
           that harden it to ``True`` would otherwise see save/reset 403. #}
        {% csrf_token %}
        <h2 id="dyncol-modal-title">{% translate "Configure columns" %}</h2>

        {% if dynamic_admin_columns.is_superuser %}
        <fieldset class="dyncol-scope">
            <legend class="dyncol-sr-only">{% translate "Scope" %}</legend>
            <label class="dyncol-scope-option">
                <input type="radio" name="dyncol-scope" value="personal" checked>
                <span class="dyncol-scope-label">
                    <strong>{% translate "My personal layout" %}</strong>
                    <small>{% translate "Affects only your account." %}</small>
                </span>
            </label>
            <label class="dyncol-scope-option">
                <input type="radio" name="dyncol-scope" value="global">
                <span class="dyncol-scope-label">
                    <strong>{% translate "Global defaults" %}</strong>
                    <small>{% translate "Visible to every user that has no personal layout. Superusers only." %}</small>
                </span>
            </label>
        </fieldset>
        {% endif %}

        <p class="dyncol-status" id="dyncol-status" role="status">
            {% if dynamic_admin_columns.has_personal_layout %}
            <span class="dyncol-status-icon">★</span>
            {% translate "You are viewing your personal layout. Saves apply only to your account." %}
            {% else %}
            {% translate "You are viewing the global defaults. Saving will create a personal layout for your account." %}
            {% endif %}
        </p>

        <p class="dyncol-help">
            {% blocktranslate %}Drag rows to reorder; toggle the checkbox to show or hide a column.{% endblocktranslate %}
        </p>

        <ul id="dyncol-list" class="dyncol-list">
            <li class="dyncol-empty" id="dyncol-empty" hidden>
                {% translate "No user-configurable columns are declared for this admin." %}
            </li>
        </ul>

        <div class="dyncol-actions">
            <button type="button" class="dyncol-btn dyncol-btn-reset" id="dyncol-reset" hidden>
                {% translate "Discard personal layout" %}
            </button>
            <span class="dyncol-spacer"></span>
            <button type="button" class="dyncol-btn dyncol-btn-cancel" data-dyncol-close>
                {% translate "Cancel" %}
            </button>
            <button type="button" class="dyncol-btn dyncol-btn-save" id="dyncol-save">
                {% translate "Save" %}
            </button>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}