{# templates/cours/ajouter.html.twig #}
{% extends 'accueil/accueil_admin.html.twig' %}

{% block title %}Ajouter un Nouveau Cours{% endblock %}

{% block stylesheets %}
    <link rel="stylesheet" href="{{ asset('css/styles.css') }}">
    <link rel="stylesheet" href="{{ asset('css/tableau.css') }}">
    <link rel="stylesheet" href="{{ asset('css/modifier.css') }}">
    <style>

        .content {
            padding: 20px;
            border-radius: 8px;
            margin: 0 auto;
            width: 700px;
        }

        .form-container {
            width: 100%;
            max-width: 600px;
            margin: 0 auto;
        }

        .form-title {
            font-size: 24px;
            color: white;
            text-align: center;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            font-weight: bold;
            color: white;
            display: block;
            margin-bottom: 5px;
        }

        .form-input, .form-select {
            width: 100%;
            padding: 10px;
            border-radius: 5px;
            border: 1px solid #313237;
            background-color: #313237;
        }

        .form-actions {
            text-align: center;
        }

        .btn {
            display: inline-block;
            background-color: #0b0e15;
            color: white;
            padding: 12px 20px;
            font-size: 16px;
            border-radius: 5px;
            cursor: pointer;
            border: none;
            transition: background-color 0.3s ease;
        }

        .btn:hover {
            background-color: #2c3e50;
        }

                    /* Personnalisation du bouton submit généré par Symfony */
            button[type="submit"] {
                background-color: #00796b68;
                color: #fff;
                padding: 10px 20px;
                border: none;
                border-radius: 5px;
                font-size: 14px;
                cursor: pointer;
                text-decoration: none;
                transition: background-color 0.1s;
            }

            button[type="submit"]:hover {
                background-color:rgba(2, 92, 81, 0.41); /* Changer la couleur au survol */
            }
    </style>
{% endblock %}

{% block body %}
    <div class="content">
        <div class="form-container">
            <h2 class="form-title">Ajouter un Nouveau Cours</h2>

            {{ form_start(form, { 'attr': { 'class': 'cours-form' } }) }}

            <div class="form-group">
                {{ form_label(form.libelle, 'Libellé', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.libelle, { 'attr': { 'class': 'form-input' } }) }}
            </div>

            <div class="form-group">
                {{ form_label(form.ageMini, 'Âge minimum', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.ageMini, { 'attr': { 'class': 'form-input' } }) }}
            </div>

            <div class="form-group">
                {{ form_label(form.heureDebut, 'Heure de début', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.heureDebut, { 'attr': { 'class': 'form-input' } }) }}
            </div>

            <div class="form-group">
                {{ form_label(form.heureFin, 'Heure de fin', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.heureFin, { 'attr': { 'class': 'form-input' } }) }}
            </div>

            <div class="form-group">
                {{ form_label(form.professeur, 'Professeur', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.professeur, { 'attr': { 'class': 'form-select' } }) }}
            </div>

            <div class="form-group">
                {{ form_label(form.typeCours, 'Type de cours', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.typeCours, { 'attr': { 'class': 'form-select' } }) }}
            </div>

            <div class="form-group">
                {{ form_label(form.typeInstrument, 'Type d\'instrument', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.typeInstrument, { 'attr': { 'class': 'form-select' } }) }}
            </div>

            <div class="form-group">
                {{ form_label(form.jour, 'Jour', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.jour, { 'attr': { 'class': 'form-select' } }) }}
            </div>

            <div class="form-group">
                {{ form_label(form.cheminImage, 'Image URL', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.cheminImage, { 'attr': { 'class': 'form-input' } }) }}
            </div>

            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}