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

{% block title %}Ajouter un Nouveau Instrument{% 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 Instrument</h2>

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

            <div class="form-group">
                {{ form_label(form.numSerie, 'Numéro de série', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.numSerie, { 'attr': { 'class': 'form-input' } }) }}
            </div>

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

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

            <div class="form-group">
                {{ form_label(form.utilisation, 'Utilisation', { 'label_attr': { 'class': 'form-label' } }) }}
                {{ form_widget(form.utilisation, { 'attr': { 'class': 'form-input' } }) }}
            </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>

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

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

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

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

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

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