{# Partial réutilisé par new + edit. Reçoit : data (array), errors (list), submit_label (string) #}
<form method="post" class="list-form" enctype="multipart/form-data" data-turbo="false">
    <input type="hidden" name="_token" value="{{ csrf_token('list-form') }}">

    {% if errors|length > 0 %}
        <ul class="list-form__errors">
            {% for err in errors %}<li>{{ err }}</li>{% endfor %}
        </ul>
    {% endif %}

    <div class="list-form__field">
        <label for="list-name">Nom</label>
        <input
            type="text"
            id="list-name"
            name="name"
            required
            minlength="1"
            maxlength="100"
            placeholder="Été 2026, À relire, Romans japonais…"
            value="{{ data.name }}"
            autocomplete="off"
            autofocus
        >
    </div>

    <div class="list-form__field">
        <label for="list-description">Description <span class="muted">(optionnel)</span></label>
        <textarea
            id="list-description"
            name="description"
            maxlength="500"
            rows="3"
            placeholder="Quelques mots sur la curation…"
        >{{ data.description }}</textarea>
    </div>

    {# Cover custom : uniquement en édition. Upload + recadrage (Stimulus
       avatar-uploader, ratio 2:3). Le recadrage canvas redresse aussi
       l'orientation EXIF (sinon l'image ressort tournée). Upload sécurisé
       côté serveur (ImageCacheService, kind 'lists'). #}
    {% if list is defined %}
        <div class="list-form__field list-form__cover" data-controller="avatar-uploader"
             data-avatar-uploader-aspect-value="0.6667"
             data-avatar-uploader-output-width-value="600"
             data-avatar-uploader-output-height-value="900"
             data-avatar-uploader-filename-value="cover.jpg">
            <label>Couverture <span class="muted">(optionnel)</span></label>
            <div class="list-form__cover-row">
                {% set current_cover = list_cover(list) %}
                <img class="list-form__cover-preview{{ current_cover ? '' : ' list-form__cover-preview--ph' }}"
                     {% if current_cover %}src="{{ current_cover }}"{% endif %}
                     alt=""
                     data-avatar-uploader-target="preview">
                <div class="list-form__cover-controls">
                    <label for="list-cover" class="btn btn--secondary btn--compact">Choisir une image</label>
                    <input id="list-cover" type="file"
                           accept="image/jpeg,image/png,image/webp,image/gif,image/heic,image/heif,.heic,.heif"
                           hidden
                           data-avatar-uploader-target="input"
                           data-action="change->avatar-uploader#pick">
                    <input type="file" name="cover" hidden data-avatar-uploader-target="hiddenInput">
                    {% if list.coverPath %}
                        <label class="list-form__cover-remove">
                            <input type="checkbox" name="remove_cover" value="1">
                            Retirer la couverture
                        </label>
                    {% endif %}
                    <span class="list-form__cover-hint" data-avatar-uploader-target="status">JPEG, PNG, WebP, HEIC (iPhone)</span>
                </div>
            </div>

            {# Overlay de recadrage, masqué tant qu'aucune image n'est choisie #}
            <div class="img-cropper" hidden data-avatar-uploader-target="cropArea">
                <div class="img-cropper__viewport">
                    <img alt="" data-avatar-uploader-target="cropImage">
                </div>
                <div class="img-cropper__actions">
                    <button type="button" class="btn btn--secondary btn--compact" data-action="avatar-uploader#cancel">Annuler</button>
                    <button type="button" class="btn btn--compact" data-action="avatar-uploader#confirm">Valider le cadrage</button>
                </div>
            </div>
        </div>
    {% endif %}

    <label class="list-form__check">
        <input type="checkbox" name="isPublic" value="1" {{ data.isPublic ? 'checked' : '' }}>
        <span>
            <strong>Visible par les autres lecteurs</strong>
            <span class="muted">Par défaut, ta liste reste privée. Coche pour la partager.</span>
        </span>
    </label>

    <div class="list-form__actions">
        <a href="{{ cancel_url|default(path('app_lists_index')) }}" class="btn btn--secondary btn--compact">Annuler</a>
        <button type="submit" class="btn btn--compact">{{ submit_label }}</button>
    </div>
</form>