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

{% block title %}Créer équipement{% endblock %}

{% block body %}
    <h4 style="text-align:center">Créer un nouvel équipement</h4>

    <div class="card">
        <div class="card-body">
            <!-- Render the form -->
            {{ form_start(form, {'attr': {'class': 'form'}}) }}
            
            <div class="mb-3">
                {{ form_label(form.titre, 'titre', {'attr': {'class': 'form-label'}}) }}
                {{ form_widget(form.titre, {'attr': {'class': 'form-control'}}) }}
                {{ form_errors(form.titre) }}
            </div>

            <div class="mb-3">
                {{ form_label(form.description, 'Description', {'attr': {'class': 'form-label'}}) }}
                {{ form_widget(form.description, {'attr': {'class': 'form-control', 'rows': 5}}) }}
                {{ form_errors(form.description) }}
            </div>

         <div class="mb-3">
                {{ form_label(form.photo, 'Image', {'attr': {'class': 'form-label'}}) }}
                {{ form_widget(form.photo, {'attr': {'class': 'form-control', 'rows': 5}}) }}
                {{ form_errors(form.photo) }}
            </div>
   

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

    <a href="{{ path('equipment_backoffice_index') }}" class="btn-left-green">
    Retour à la liste
</a>

<!-- Styles -->
<style>
/* Button styling for 'Retour à la liste' */
.btn-left-green {
    display: inline-block;
    font-size: 14px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    background-color: green; /* Default green */
    text-align: left; /* Align text to the left */
    border-radius: 5px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth hover and focus effects */
    position: relative; /* Needed for the shiny effect */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Slight shadow */
    margin-top: 10px; /* Top spacing */
}

/* Hover effect */
.btn-left-green:hover {
    background-color: #218838; /* Slightly darker green */
    transform: translateX(-5px); /* Move slightly to the left */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}

/* Focus effect */
.btn-left-green:focus {
    outline: none; /* Remove default outline */
    box-shadow: 0px 0px 5px 2px rgba(40, 167, 69, 0.5); /* Green glow */
}

/* Shiny effect */
.btn-left-green::after {
    content: "";
    position: absolute;
    top: 0;
    left: -100%; /* Start the shine from the left of the button */
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(255, 255, 255, 0.3) 100%);
    transition: all 0.3s ease;
    transform: skewX(-20deg);
    z-index: 1;
    pointer-events: none; /* Make it non-clickable */
}

/* Hover triggers shiny effect */
.btn-left-green:hover::after {
    left: 100%; /* Move the shine to the right */
    transition: all 0.5s ease;
}
</style>

<style>
.form-control {
    display: block;
    width: 100%;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: .25rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    maargin-left:3%;
}
.custom-file-input {
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.custom-file-input:focus {
    border-color: #007bff; /* Blue border when focused */
}


</style>
{% endblock %}