{% 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 %}

{% 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"
      data-upload-url="{{ url_for(sitecopy_bp ~ '.upload') }}">
    <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 %}
        {% set st = states[f.key] %}
        {% set invalid = f.key in invalid_keys %}
        <div class="ct-field{% if invalid %} is-invalid{% elif st.has_draft %} is-draft{% elif st.is_overridden %} is-edited{% endif %}"
             data-ct-item
             {% if invalid %}data-ct-invalid{% endif %}
             data-ct-search="{{ st.search_text }}"
             data-ct-default="{{ f.default }}">
            <div class="ct-field-head">
                <label for="fld-{{ loop.index0 }}-{{ sec.key }}">{{ f.label }}</label>
                <span class="ct-field-flags">
                    {% if st.has_draft %}<span class="adm-tag ct-tag-draft">sin publicar</span>
                    {% elif st.is_overridden %}<span class="adm-tag ct-tag-edited">editado</span>{% endif %}
                </span>
            </div>
            {# Tie the hint and (when rejected) the error to the control, so a screen
               reader hears them with the field instead of just seeing a red border. #}
            {% set desc_ids = [] %}
            {% if f.hint %}{% set _ = desc_ids.append('hint-' ~ f.key) %}{% endif %}
            {% if invalid %}{% set _ = desc_ids.append('err-' ~ f.key) %}{% endif %}
            {% set describedby = desc_ids | join(' ') %}
            {% if f.hint %}<p class="hint" id="hint-{{ f.key }}">{{ f.hint }}</p>{% endif %}
            {% if invalid %}<p class="ct-error" id="err-{{ f.key }}">{{ field_errors.get(f.key, 'Revisá este texto.') }}</p>{% endif %}

            <input type="hidden" name="{{ baseline_prefix }}{{ f.key }}" value="{{ st.value }}">
            {% if f.is_multiline %}
            <textarea id="fld-{{ loop.index0 }}-{{ sec.key }}" name="{{ f.key }}"
                      rows="{{ 8 if f.type == 'rich' else 3 }}"
                      maxlength="{{ f.max_length }}"
                      data-ct-input
                      {% if invalid %}aria-invalid="true"{% endif %}
                      {% if describedby %}aria-describedby="{{ describedby }}"{% endif %}
                      class="ct-input ct-input-{{ f.type }}">{{ st.value }}</textarea>
            {% else %}
            {% set is_media = f.type in ('image', 'video') %}
            <input type="{{ 'url' if f.type in ('url', 'image', 'video') else 'text' }}"
                   id="fld-{{ loop.index0 }}-{{ sec.key }}" name="{{ f.key }}"
                   value="{{ st.value }}" maxlength="{{ f.max_length }}"
                   {% if invalid %}aria-invalid="true"{% endif %}
                   {% if describedby %}aria-describedby="{{ describedby }}"{% endif %}
                   {% if is_media %}data-ct-media-input data-ct-media-kind="{{ f.type }}"
                   data-ct-field-key="{{ f.key }}" aria-controls="prev-{{ f.key }}"{% endif %}
                   data-ct-input class="ct-input">
            {% if is_media %}
            {# A preview of what the URL points at, so the operator sees the picture/clip
               and not just a path. JS keeps it in step as they type. A button lets them
               upload a file instead of pasting a URL (progressive enhancement: shown by
               JS only, since it posts via fetch). #}
            <div class="ct-media-row" data-ct-media-row>
                {% if f.type == 'video' %}
                <video class="ct-media-preview" id="prev-{{ f.key }}" data-ct-media-preview
                       src="{{ st.value }}" controls muted preload="metadata"
                       {% if not st.value %}hidden{% endif %}
                       onloadeddata="this.hidden=false" onerror="this.hidden=true"></video>
                {% else %}
                <img class="ct-media-preview" id="prev-{{ f.key }}" alt=""
                     data-ct-media-preview src="{{ st.value }}"
                     {% if not st.value %}hidden{% endif %}
                     onload="this.hidden=false" onerror="this.hidden=true">
                {% endif %}
                <button type="button" class="ct-media-upload" data-ct-media-upload hidden>
                    {{ 'Subir un video' if f.type == 'video' else 'Subir una imagen' }}
                </button>
            </div>
            {% endif %}
            {% endif %}

            <div class="ct-field-foot">
                <span class="ct-counter" data-ct-counter data-max="{{ f.max_length }}" aria-live="polite"></span>
                {% if st.value != f.default %}
                {# No-JS safe: this submit posts the whole form and tells the server
                   which field to reset, so nothing typed elsewhere is lost. #}
                <button type="submit" name="restore" value="{{ f.key }}" class="ct-restore"
                        title="El texto con el que vino la web">
                    Volver al texto original
                </button>
                {% endif %}
            </div>
        </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 %}