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

{% block title %}Afficher l'équipement{% endblock %}

{% block body %}
    <h4 style="text-align:center;">Afficher l'équipement</h4>

    <table class="table">
        <tbody>
            <tr>
                <th>Id</th>
                <td>{{ equipement.id }}</td>
            </tr>
            <tr>
                <th>Nom</th>
                <td>{{ equipement.titre }}</td>
            </tr>
           
            <tr>
                <th>Description</th>
                <td>{{ equipement.description }}</td>
            </tr>
	
            <tr>
                <th>Image</th>
                <img src="{{ asset('upload/images/' ~ equipement.photo) }}" alt="Current image of {{ equipement.photo }}" style="max-width: 300px;">
            </tr>
        
        </tbody>
    </table>

  <div class="action-buttons">
  <!-- Link to edit the equipement -->
    <a href="{{ path('equipement_backoffice_edit', {'id': equipement.id}) }}" class="btn-admin">
        Modifier
    </a>
    <!-- Link to go back to the list of ActeMedical -->
   

  
</div>

<!-- Add styles for the buttons -->
<style>
/* Wrapper for action buttons */
.action-buttons {
    display: flex;
    flex-direction: column;
    align-items: left;
    gap: 10px; /* Space between buttons */
}

/* General button style */
.btn-admin {
    font-size: 14px;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    background-color: green;
    text-align: center;
    border-radius: 5px; /* Rounded corners */
    transition: all 0.3s ease; /* Smooth hover effect */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Slight shadow */
    width: 200px; /* Fixed width for consistency */
}

/* Hover effect for buttons */
.btn-admin:hover {
    background-color: #218838; /* Slightly darker green */
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
}
</style>

<!-- Delete Form (if exists) -->
    {{ include('equipement_bacoffice/_delete_form.html.twig') }}
    <!-- Link to go back to the list of equipement -->
{% endblock %}