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

{% block title %}Modifier Greffes Capillaires{% endblock %}

{% block body %}
    <h3>Modifier Greffes Capillaires</h3>

 {% if greffes_capillaire.imageapres %}
        <div class="image-preview">
            Image après: <img src="{{ asset('upload/images/' ~ greffes_capillaire.imageapres) }}" alt="Image Après" style="width: 50px; height: 50px; object-fit: cover;">
        </div>
    {% else %}
        <p>Aucune image après téléchargée.</p>
    {% endif %}

	{% if greffes_capillaire.imageavant %}
        <div class="image-preview">
           Image avant: <img src="{{ asset('upload/images/' ~ greffes_capillaire.imageavant) }}" alt="Image Avant" style="width: 50px; height: 50px; object-fit: cover;">
        </div>
    {% else %}
        <p>Aucune image avant téléchargée.</p>
    {% endif %}
    {{ include('greffes_capillaires_adiminis/_form.html.twig', {'button_label': 'Enregistrer'}) }}
   

   


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

    {{ include('greffes_capillaires_adiminis/_delete_form.html.twig') }}



    <style>
        .btn-golden {
            background: linear-gradient(45deg, #ffd700, #b8860b, #f5c400, #cd7f32); /* Golden background */
            color: black; /* Black text */
            padding: 4px 4px; /* Padding to make it look nice */
            border-radius: 5px; /* Rounded corners */
            text-decoration: none; /* Remove underline */
            display: inline-block; /* Make the link behave like a button */
            font-weight: bold;
            text-align:center;
            font-size:12px;
            width:150px;
        }

        .btn-golden:hover {
            background-color: #FFC107; /* Lighter golden color on hover */
            color: white; /* White text on hover */
        }

        .btn-golden:active {
            background-color: #FF9800; /* Darker golden color when clicked */
        }

        .btn-delete {
            background-color: #f44336; /* Red background */
            color: white;
            border: none;
            padding: 5px 10px;
            border-radius: 3px;
            cursor: pointer;
        }

        .btn-delete:hover {
            background-color: #d32f2f;
        }
input#greffes_capillaires_deleteImageavant, 
input#greffes_capillaires_deleteImageapres {
 border:2px solid black;
 border-radius:50%;
margin-left:2%;
}
    </style>
{% endblock %}