{% extends 'base.html.twig' %}
{% form_theme form 'form/tailadmin_theme.html.twig' %}

{% block title %}{{ interview_published|default(false) ? 'Interview publiée' : 'Interview équipe' }}{% endblock %}

{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/team-interview.css') }}?v=2">
{% endblock %}

{% block body %}
    <section class="ta-topbar">
        <div>
            <p class="ta-page-subtitle">
                <a href="{{ path('app_account') }}#tab-interview" class="ta-link">← Retour au compte</a>
            </p>
            <h1 class="ta-page-title">Interview — {{ team.name }}</h1>
            {% if interview_published|default(false) %}
                <p class="ta-page-subtitle">
                    Publiée le {{ team.interviewPublishedAt|date('d/m/Y à H:i') }}.
                    Vous pouvez encore modifier vos réponses et photos.
                </p>
            {% else %}
                <p class="ta-page-subtitle">
                    Complétez votre portrait en brouillon, puis publiez-le pour le rendre visible sur la fiche publique de l’équipe.
                </p>
            {% endif %}
        </div>
    </section>

    <section class="ta-card team-interview-page">
        {% if interview_published|default(false) %}
            <div class="lpf-alert lpf-alert--success alert alert-success text-sm mb-6" role="status">
                <span>
                    Votre interview est visible sur la
                    <a href="{{ team_show_url }}" class="link link-primary">fiche publique de l’équipe</a>.
                </span>
            </div>
        {% endif %}

        {{ form_start(form, {'attr': {'class': 'team-interview-form space-y-6', 'data-turbo': 'false'}}) }}

        <div class="team-interview-section rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
            <h2 class="mb-2 text-lg font-semibold">Questions de la LPF</h2>
            <p class="ta-card-text mb-4">Répondez aux questions proposées par l’organisation (facultatif question par question).</p>

            <div class="space-y-4">
                {% for child in form %}
                    {% if child.vars.name starts with 'template_' %}
                        <div class="team-interview-question">
                            {{ form_row(child) }}
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>

        <div class="team-interview-section rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
            <h2 class="mb-2 text-lg font-semibold">Vos propres questions</h2>
            <p class="ta-card-text mb-4">
                Ajoutez des questions/réponses personnalisées pour compléter votre portrait.
            </p>

            <div
                class="team-interview-custom-entries space-y-4"
                data-team-interview-custom
                data-prototype="{{ form_widget(form.customEntries.vars.prototype)|e('html_attr') }}"
                data-index="{{ form.customEntries|length }}"
            >
                {% for entry in form.customEntries %}
                    <div class="team-interview-custom-entry rounded-box border border-base-200 bg-base-50 p-4">
                        <div class="flex items-start justify-between gap-3 mb-3">
                            <p class="m-0 text-sm font-medium text-base-content/70">Question personnalisée</p>
                            <button type="button" class="btn btn-ghost btn-xs text-error" data-team-interview-remove>
                                Supprimer
                            </button>
                        </div>
                        {{ form_row(entry.question) }}
                        {{ form_row(entry.answer) }}
                        {{ form_row(entry.id) }}
                    </div>
                {% endfor %}
            </div>

            <button type="button" class="btn btn-outline btn-primary btn-sm mt-4" data-team-interview-add>
                <i class="ti ti-plus" aria-hidden="true"></i>
                Ajouter une question
            </button>
        </div>

        <div class="team-interview-section rounded-box border border-base-300 bg-base-100 p-5 shadow-sm">
            <h2 class="mb-2 text-lg font-semibold">Photos</h2>
            <p class="ta-card-text mb-4">
                Jusqu’à {{ max_images }} images ({{ existing_images_count }} déjà enregistrée{{ existing_images_count > 1 ? 's' : '' }}).
            </p>

            {% if existing_images is not empty %}
                <div class="team-interview-gallery__grid mb-4">
                    {% for image in existing_images %}
                        <figure class="team-interview-gallery__item">
                            <img src="{{ asset(image.image) }}" alt="" class="team-interview-gallery__thumb" loading="lazy">
                            {% if form['remove_image_' ~ image.id] is defined %}
                                <div class="mt-2">
                                    {{ form_row(form['remove_image_' ~ image.id]) }}
                                </div>
                            {% endif %}
                        </figure>
                    {% endfor %}
                </div>
            {% endif %}

            {{ form_row(form.newImages) }}
        </div>

        <div class="team-interview-actions">
            <button type="submit" class="btn btn-primary">
                {% if interview_published|default(false) %}
                    Enregistrer les modifications
                {% else %}
                    Enregistrer le brouillon
                {% endif %}
                <i class="ti ti-device-floppy" aria-hidden="true"></i>
            </button>
        </div>

        {{ form_end(form) }}

        <div class="team-interview-publish mt-4 flex flex-wrap items-center gap-3">
            {% if can_publish|default(false) %}
                <form method="post" action="{{ path('app_team_interview_publish') }}" class="m-0"
                      onsubmit="return confirm('Publier l’interview ? Elle sera visible sur votre fiche équipe.');">
                    <input type="hidden" name="_token" value="{{ csrf_token('team_interview_publish') }}">
                    <button type="submit" class="btn btn-primary">
                        <i class="ti ti-send" aria-hidden="true"></i>
                        Publier l’interview
                    </button>
                </form>
            {% endif %}
        </div>

        {% if not interview_published|default(false) %}
            {% if not can_publish|default(false) %}
                <p class="ta-card-text text-sm mt-3">
                    Ajoutez au moins une réponse ou une photo pour pouvoir publier.
                </p>
            {% else %}
                <p class="ta-card-text text-sm mt-3">
                    Enregistrez vos modifications avant de publier.
                </p>
            {% endif %}
        {% endif %}
    </section>
{% endblock %}

{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/team-interview-form.js') }}?v=2" defer></script>
{% endblock %}