{% extends 'base.html.twig' %}

{% block title %}{{ editMode is defined and editMode ? 'Modifier' : 'Créer' }} un Épisode{% endblock %}

{% block body %}
    <div class="container mt-5">
        <h1>{{ editMode is defined and editMode ? 'Modifier' : 'Créer' }} un Épisode</h1>

        {{ form_start(form, {'attr': {'data-turbo': 'false', 'class': 'needs-validation', 'novalidate': 'novalidate'}}) }}
        
        <div class="mb-3">
            {{ form_label(form.title, null, {'label_attr': {'class': 'form-label'}}) }}
            {{ form_widget(form.title, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.title, {'attr': {'class': 'invalid-feedback'}}) }}
        </div>
        
        <div class="mb-3">
            {{ form_label(form.description, null, {'label_attr': {'class': 'form-label'}}) }}
            {# Utiliser la classe ckeditor mais supprimer l'ID pour éviter l'initialisation double #}
            {{ form_widget(form.description, {'attr': {'class': 'form-control ckeditor'}}) }}
            {{ form_errors(form.description, {'attr': {'class': 'invalid-feedback'}}) }}
        </div>
        
        <div class="mb-3">
            {{ form_label(form.createdAt, null, {'label_attr': {'class': 'form-label'}}) }}
            {{ form_widget(form.createdAt, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.createdAt, {'attr': {'class': 'invalid-feedback'}}) }}
        </div>

        {# 🔹 Affichage du fichier audio actuel #}
        {% if editMode is defined and editMode and episode.audio %}
            <div class="mb-3">
                <label class="form-label">Fichier audio actuel :</label>
                <p><a href="{{ episode.audio }}" target="_blank">{{ episode.audio }}</a></p>
                <audio controls class="w-100">
                    <source src="{{ episode.audio }}" type="audio/mpeg">
                    Votre navigateur ne supporte pas l'audio.
                </audio>
            </div>
        {% endif %}

        <div class="mb-3">
            {{ form_label(form.audioFile, null, {'label_attr': {'class': 'form-label'}}) }}
            {{ form_widget(form.audioFile, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.audioFile, {'attr': {'class': 'invalid-feedback'}}) }}
        </div>

        {# 🔹 Affichage de l'image actuelle #}
        {% if editMode is defined and editMode and episode.coverImage %}
            <div class="mb-3">
                <label class="form-label">Image actuelle :</label>
                <p><a href="{{ episode.coverImage }}" target="_blank">{{ episode.coverImage }}</a></p>
                <img src="{{ episode.coverImage }}" alt="Image de couverture" class="img-fluid" style="max-width: 200px;">
            </div>
        {% endif %}

        <div class="mb-3">
            {{ form_label(form.coverImageFile, null, {'label_attr': {'class': 'form-label'}}) }}
            {{ form_widget(form.coverImageFile, {'attr': {'class': 'form-control'}}) }}
            {{ form_errors(form.coverImageFile, {'attr': {'class': 'invalid-feedback'}}) }}
        </div>

        <button class="btn btn-primary">{{ editMode is defined and editMode ? 'Mettre à jour' : 'Enregistrer' }}</button>
        {{ form_end(form) }}

        {% if form_errors(form) %}
            <div class="alert alert-danger">
                {{ form_errors(form) }}
            </div>
        {% endif %}
        <div class="text-center">
            <a href="{{ path('app_home') }}" class="btn btn-secondary mt-3">Retour</a>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ parent() }}

{% endblock %}