{% extends sitecopy_base %}
{% set sitecopy_screen = 'group' %}
{% block title %}{{ group.title }} · Textos{% if sitecopy_brand %} · {{ sitecopy_brand }}{% endif %}{% endblock %}

{% block head %}<link rel="stylesheet" href="{{ url_for(sitecopy_bp ~ '.static', filename='css/sitecopy-shell.css') }}"><link rel="stylesheet" href="{{ url_for(sitecopy_bp ~ '.static', filename='css/sitecopy-admin.css') }}">{% endblock %}

{% from "sitecopy/_field.html" import field_control %}
{% block content %}
<a class="adm-back" href="{{ url_for(sitecopy_bp ~ '.index') }}">← Todos los textos</a>

<div class="ct-head">
    <div>
        <h1 class="adm-title">{{ group.title }}</h1>
        <p class="ct-lead">{{ group.description }}</p>
    </div>
    <a class="btn btn-ghost" href="{{ url_for(sitecopy_bp ~ '.group_preview', group_key=group.key) }}">
        Previsualizar
    </a>
</div>

{% if pending %}
<div class="ct-pending-inline">
    {{ pending }} {{ 'cambio' if pending == 1 else 'cambios' }} sin publicar en esta sección.
</div>
{% endif %}

{# Filter box: with a couple of hundred strings, finding one by scrolling is the
   slowest part of the job. Progressive enhancement — without JS the list is intact. #}
<div class="ct-filter" hidden data-ct-filter-wrap>
    <label class="visually-hidden" for="ctFilter">Buscar un texto</label>
    <input type="search" id="ctFilter" data-ct-filter placeholder="Buscar un texto…" autocomplete="off">
    <button type="button" class="ct-filter-clear" data-ct-filter-clear aria-label="Limpiar búsqueda">×</button>
</div>

<form method="post" action="{{ url_for(sitecopy_bp ~ '.group_save', group_key=group.key) }}"
      class="adm-form ct-form" id="contentForm"
      {% if sitecopy_uploads %}data-upload-url="{{ url_for(sitecopy_bp ~ '.upload') }}"{% endif %}>
    <input type="hidden" name="_sitecopy_csrf" value="{{ sitecopy_csrf }}">
    {% for sec in group.sections %}
    <section class="ct-section" data-ct-section>
        <h2 class="ct-section-title">{{ sec.title }}</h2>
        {% if sec.note %}<p class="ct-section-note">{{ sec.note }}</p>{% endif %}

        {% for f in sec.fields %}
        {{ field_control(f, states[f.key], loop.index0 ~ '-' ~ sec.key, f.key in invalid_keys,
                         field_errors, size_steps, baseline_prefix) }}
        {% endfor %}

        {# A collection: the same field controls, repeated once per item, plus the
           membership the editor can change. Order posts as one hidden input; add and
           delete are submits, so the whole thing works with JavaScript off. #}
        {% for col in sec.collections %}
        {% set cst = collections[col.key] %}
        <div class="ct-collection" data-ct-collection data-ct-collection-key="{{ col.key }}"
             data-ct-min="{{ col.min_items }}" data-ct-max="{{ col.max_items }}">
            <div class="ct-collection-head">
                <h3 class="ct-collection-title">{{ col.title }}</h3>
                <span class="ct-collection-count">{{ cst["items"] | length }} de {{ col.max_items }}</span>
            </div>
            {% if col.note %}<p class="ct-section-note">{{ col.note }}</p>{% endif %}
            <input type="hidden" name="{{ order_prefix }}{{ col.key }}"
                   value="{{ cst['order'] }}" data-ct-order>

            {% for item in cst["items"] %}
            <div class="ct-collection-item" data-ct-collection-item data-ct-item-id="{{ item.id }}">
                <div class="ct-collection-item-head">
                    <span class="ct-collection-item-label">{{ col.item_label }} {{ item.position }}</span>
                    <span class="ct-collection-item-tools">
                        {# Reordering posts like everything else on this screen, so it
                           works with JavaScript off. `formnovalidate` because moving a
                           row is not the moment to enforce a half-typed field. #}
                        <button type="submit" name="{{ collection_move }}"
                                value="{{ col.key }}:{{ item.id }}:up" class="ct-collection-move"
                                formnovalidate {% if loop.first %}disabled{% endif %}
                                aria-label="Subir {{ col.item_label | lower }} {{ item.position }}">↑</button>
                        <button type="submit" name="{{ collection_move }}"
                                value="{{ col.key }}:{{ item.id }}:down" class="ct-collection-move"
                                formnovalidate {% if loop.last %}disabled{% endif %}
                                aria-label="Bajar {{ col.item_label | lower }} {{ item.position }}">↓</button>
                        {% if cst["can_delete"] %}
                        <button type="submit" name="{{ collection_delete }}"
                                value="{{ col.key }}:{{ item.id }}" class="ct-collection-delete"
                                formnovalidate
                                data-ct-confirm="¿Borrar {{ col.item_label | lower }} {{ item.position }}? Se va a ver al publicar.">
                            Borrar
                        </button>
                        {% endif %}
                    </span>
                </div>
                {% for name, st in item["values"].items() %}
                {{ field_control(st.field, st, col.key ~ '-' ~ item.id ~ '-' ~ name,
                                 st.field.key in invalid_keys, field_errors, size_steps,
                                 baseline_prefix, restorable=st.is_declared) }}
                {% endfor %}
            </div>
            {% endfor %}

            {% if cst["can_add"] %}
            <button type="submit" name="{{ collection_add }}" value="{{ col.key }}"
                    class="ct-collection-add" formnovalidate>
                Agregar {{ col.item_label | lower }}
            </button>
            {% else %}
            <p class="ct-section-note">Llegaste al máximo de {{ col.max_items }}.</p>
            {% endif %}
        </div>
        {% endfor %}
    </section>
    {% endfor %}

    <p class="ct-empty-filter" hidden data-ct-no-results>Ningún texto coincide con la búsqueda.</p>

    <div class="ct-actions">
        <button type="submit" name="action" value="save" class="btn btn-ghost btn-lg">Guardar borrador</button>
        <button type="submit" name="action" value="publish" class="btn btn-primary btn-lg">Publicar esta sección</button>
        {% if pending %}
        <button type="submit" name="action" value="discard" class="btn btn-danger" formnovalidate
                data-ct-confirm="¿Descartar los cambios sin publicar de esta sección? No se puede deshacer.">
            Descartar borrador
        </button>
        {% endif %}
    </div>
</form>
{% endblock %}

{% block scripts %}
<script defer src="{{ url_for(sitecopy_bp ~ '.static', filename='js/sitecopy-admin.js') }}"></script>
{% endblock %}