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

{% block title %}Temoignages{% endblock %}

{% block body %}

    <h3>Gestion des témoignages</h1>
{% for type, messages in app.flashes %}
        {% for message in messages %}
            <div class="alert alert-{{ type }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endfor %}

    <table class="table">
        <thead>
            <tr>
                <th>Id</th>
                <th>Email</th>
                <th>Titre</th>
                <th>Description</th>
		<th>Date</th>
                <th>Image</th>
                <th>actions</th>
            </tr>
        </thead>
        <tbody>
        {% for temoignage in temoignages %}
            <tr>
                <td>{{ temoignage.id }}</td>
                <td>{{ temoignage.email }}</td>
                <td>{{ temoignage.titre }}</td>
                <td>{{ temoignage.description }}</td>
		<td>{{ temoignage.date|date('Y-m-d') }}</td>
                <td>
			{% if temoignage.image %}
                        <img src="{{ asset('upload/images/' ~ temoignage.image  ) }}" alt="Image de {{ temoignage.titre }}" style="max-width:100px;"> 
                    {% else %}
                        <span>Pas de photo de profile</span>
                    {% endif %}



		</td>
                <td>
                    <a href="{{ path('app_temoignage_admin_show', {'id': temoignage.id}) }}" class="btn-golden">Afficher</a><br>
                    <a href="{{ path('app_temoignage_admin_edit', {'id': temoignage.id}) }}" class="btn-golden">Modifier</a><br>
			{{ include('temoignage_admin/_delete_form.html.twig') }}
                </td>
            </tr>
        {% else %}
            <tr>
                <td colspan="6">no records found</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <a href="{{ path('app_temoignage_admin_new') }}"  class="btn-golden" style="font-size:12px!important; width:150px;">Créer</a>
 <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;
	    margin-top:1%;
	    width:90px;
            font-size:10px;
        }

        .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 */
        }
    </style>

{% endblock %}