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

{% block title %}Modifier la piste{% endblock %}

{% block body %}
    <div class="container mx-auto px-4 py-8">
        <div class="bg-white rounded-lg shadow-md p-6">
            <h1 class="text-2xl font-bold mb-6 text-gray-800">Modifier la piste</h1>

            {{ form_start(form, {'attr': {'class': 'space-y-6'}}) }}
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div class="space-y-4">
                    {{ form_row(form.title, {
                        'attr': {'class': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'},
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
                    }) }}

                    {{ form_row(form.auteur, {
                        'attr': {'class': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'},
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
                    }) }}

                    {{ form_row(form.duree, {
                        'attr': {'class': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'},
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
                    }) }}

                    {{ form_row(form.duree_format, {
                        'attr': {'class': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'},
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
                    }) }}
                </div>

                <div class="space-y-4">
                    {{ form_row(form.lieu, {
                        'attr': {'class': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'},
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
                    }) }}

                    {{ form_row(form.theme, {
                        'attr': {'class': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'},
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
                    }) }}

                    {{ form_row(form.annee, {
                        'attr': {'class': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'},
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
                    }) }}

                    {{ form_row(form.views, {
                        'attr': {'class': 'w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500'},
                        'label_attr': {'class': 'block text-sm font-medium text-gray-700'}
                    }) }}
                </div>
            </div>

            <div class="mt-6">
                {{ form_row(form.audioFile, {
                    'attr': {'class': 'block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100'},
                    'label_attr': {'class': 'block text-sm font-medium text-gray-700 mb-2'}
                }) }}

                {% if piste.audioName %}
                    <div class="mt-2">
                        <p class="text-sm text-gray-600">Fichier actuel: {{ piste.audioName }}</p>
                        <audio controls class="mt-2 w-full">
                            <source src="{{ asset('uploads/audio/' ~ piste.audioName) }}" type="audio/mpeg">
                        </audio>
                    </div>
                {% endif %}
            </div>

            <div class="flex justify-end space-x-4 mt-8">
                <a href="{{ path('app_piste_crud_index') }}" class="bg-gray-500 hover:bg-gray-600 text-white px-4 py-2 rounded-md transition duration-300">
                    Annuler
                </a>
                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md transition duration-300">
                    Enregistrer
                </button>
            </div>
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}