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

{% block title %}Blog{% endblock %}

{% block body %}
    <h5 style="text-align:center;">Gestion des articles du Blog</h5>
{% for type, messages in app.flashes %}
    {% for message in messages %}
        <div class="alert alert-{{ type }}" role="alert">
            {{ message }}
        </div>
    {% endfor %}
{% endfor %}
    <!-- Table with DataTables functionality -->
    <table id="blogTable" class="table table-striped table-bordered" cellspacing="0" width="100%">
        <thead class="table-primary">
                    <tr>
                <th>ID</th>
                <th>Titre</th>
                <th>Description</th>
                <th>Date</th>
                <th>Image</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        {% for blog in blogs %}
            <tr>
                <td>{{ blog.id }}</td>
                <td>{{ blog.titre }}</td>
                <td>{{ blog.description }}</td>
                <td>{{ blog.date ? blog.date|date('Y-m-d') : '' }}</td>
                <td>
                    {% if blog.image %}
                        <img src="{{ asset('upload/images/' ~ blog.image ) }}" alt="Image de {{ blog.titre }}" style="max-width:100px;"> 
                    {% else %}
                        <span>Pas de photo avant</span>
                    {% endif %}
                </td>
                <td>
                    <a href="{{ path('app_blog_show', {'id': blog.id}) }}" style="width: 47%;padding: 4px 2px;color:white; text-decoration:none; font-size: 11px; border-radius: 3px; background-color: green; margin-right: 10px; margin-bottom:1%;" class="btn btn-green">Afficher</a>
                    <a href="{{ path('app_blog_edit', {'id': blog.id}) }}" style="width: 47%;padding: 4px 2px;color:white; text-decoration:none; font-size: 11px; border-radius: 3px; background-color: green; margin-right: 10px; margin-bottom:1%;" class="btn btn-green">Editer</a>
                    <!-- Include the delete form at the bottom -->
   		 {{ include('blog/_delete_form.html.twig') }}
		</td>
            </tr>
        {% else %}
            <tr>
                <td colspan="6">Aucun enregistrement trouvé</td>
            </tr>
        {% endfor %}
        </tbody>
    </table>

    <a href="{{ path('app_blog_new') }}" class="btn btn-success custom-button" style="font-size:12px;">Créer un nouvel article du blog</a>

<!-- Add CSS for Green Background and Hover Effect on Buttons -->
<style>
button.btn.btn-success.custom-button {
    font-size: 12px !important;
    padding: 5px;
    border-radius: 3px;
}
    .btn-green {
        background-color: #28a745; /* Green background */
        color: white;
        padding: 8px 15px;
        border-radius: 4px;
        text-decoration: none;
        display: inline-block;
        font-weight: bold;
        transition: background-color 0.3s ease, transform 0.3s ease; /* Smooth transition */
    }

    .btn-green:hover,
    .btn-green:focus {
        background-color: #218838; /* Darker green on hover */
        transform: scale(1.05); /* Slight zoom-out effect */
    }

    th {
        background-color: #f8f9fa;
    }
</style>

<!-- Include DataTables JS and CSS -->
<link href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>

<script>
    $(document).ready(function() {
        $('#blogTable').DataTable({
            "language": {
                "url": "https://cdn.datatables.net/plug-ins/1.11.5/i18n/French.json"  // French localization
            }
        });
    });
</script>

{% endblock %}