{# Picker UI under django-grappelli.                                    #}
{#                                                                      #}
{# Mirrors ``dynamic_admin_columns/change_list.html`` but uses          #}
{# grappelli's native idioms:                                           #}
{#                                                                      #}
{# * The picker anchor in ``object-tools`` carries no ``dyncol-button``  #}
{#   class — grappelli's own ``.grp-object-tools a`` rule already gives  #}
{#   it the round pill shape, font weight, color and border. We only    #}
{#   add ``grp-state-focus`` to flip its default ``opacity:.5`` to 1.    #}
{#                                                                      #}
{# * Modal action buttons are ``<button class="grp-button">`` rather    #}
{#   than ``<button class="dyncol-btn">``. Grappelli applies            #}
{#   ``overflow:hidden`` and a fixed ``height:28px`` to plain           #}
{#   ``<button>`` elements through its global reset, which would clip   #}
{#   the labels we render — wearing the ``.grp-button`` class           #}
{#   re-establishes a sane width and the proper Arial/12px metrics.     #}
{#                                                                      #}
{# JavaScript hooks (IDs ``dyncol-button``, ``dyncol-modal``,           #}
{# ``dyncol-save``, ``dyncol-reset``, ``dyncol-status``, the            #}
{# ``[data-dyncol-close]`` attribute and the ``dyncol-personal``       #}
{# / ``dyncol-global`` JSON script ids) are identical to the stock     #}
{# template so ``column-picker.js`` works unmodified.                   #}
{% extends "admin/change_list.html" %}
{% load i18n static %}

{% block extrastyle %}
{{ block.super }}
<link rel="stylesheet" href="{% static 'dynamic_admin_columns/column-picker.css' %}">
<link rel="stylesheet" href="{% static 'dynamic_admin_columns/column-picker-grappelli.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="grp-state-focus{% 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>
    {# Don't apply ``.grp-module`` here — grappelli styles it as a       #}
{# 100%-width / 960px-min-width float, which would break the modal   #}
{# overlay's fixed sizing. The modal-content styles in                #}
{# ``column-picker.css`` already give us a self-contained card.     #}
    <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>

        {# Don't add ``.grp-row`` here — grappelli styles it with        #}
{# ``float:left; width:100%; overflow:hidden`` which would break    #}
{# our flexbox spacer layout. We size the buttons explicitly in    #}
{# ``column-picker-grappelli.css`` to avoid the truncation that    #}
{# grappelli's ``button.grp-button { height:28px; overflow:hidden }``#}
{# would otherwise impose.                                         #}
        <div class="dyncol-actions">
            <button type="button"
                    class="grp-button dyncol-grp-reset"
                    id="dyncol-reset"
                    hidden>
                {% translate "Discard personal layout" %}
            </button>
            <span class="dyncol-spacer"></span>
            <button type="button"
                    class="grp-button dyncol-grp-cancel"
                    data-dyncol-close>
                {% translate "Cancel" %}
            </button>
            <button type="button"
                    class="grp-button grp-default dyncol-grp-save"
                    id="dyncol-save">
                {% translate "Save" %}
            </button>
        </div>
    </div>
</div>
{% endif %}
{% endblock %}