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

{% block title %}Ajouter un Nouveau Contrat de Prêt{% 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 Contrat de Prêt</h2>

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

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

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

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

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

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

            <div class="form-group">
                {{ form_label(form.Eleve, 'Élève', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.Eleve, { 'attr': { 'class': 'form-select' } }) }}
            </div>

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

            <div class="form-actions">
                {{ form_widget(form.enregistrer, { 'attr': { 'class': 'btn' } }) }}
            </div>

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