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

{% block title %}Afficher l'image{% endblock %}

{% block body %}
<div class="">
    <h1 class="text-center text-success mb-4">Afficher l'image</h1>

    <!-- Card structure for content display -->
    <div class="card p-4 mb-4 shadow-sm" style="border-radius: 8px;">
        
        <!-- Displaying ID -->
        <div class="row mb-3">
            <div class="col-md-3">
                <strong>ID:</strong>
            </div>
            <div class="col-md-9">
                {{ images_home.id }}
            </div>
        </div>

        <!-- Displaying the Image -->
        <div class="row mb-3">
            <div class="col-md-3">
                <strong>Image:</strong>
            </div>
            <div class="col-md-9 text-center">
                {% if images_home.image %}
                    <img src="{{ asset('upload/images/' ~ images_home.image ) }}" 
                         alt="Image" 
                         class="img-fluid rounded shadow-sm" 
                         style="max-width: 200px;">
                {% else %}
                    <span class="text-muted">Pas d'image disponible</span>
                {% endif %}
            </div>
        </div>

    </div>

    <!-- Action Buttons (Back to List & Edit) -->
    <div class="d-flex justify-content-between mt-4">
        <a href="{{ path('app_images_home_index') }}" class="btn btn-success btn-sm">
            <i class="bi bi-arrow-left-circle"></i> Retour à la liste
        </a>
        
        <a href="{{ path('app_images_home_edit', {'id': images_home.id}) }}" class="btn btn-outline-success btn-sm">
            <i class="bi bi-pencil-square"></i> Modifier
        </a>
    </div>

    <hr>

    <!-- Delete Form -->
    <div class="mt-3">
        {{ include('images_home/_delete_form.html.twig') }}
    </div>
</div>
{% endblock %}