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

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

{% block body %}
<!-- Blog Section -->
<section id="blog" class="blog section" style="background-color: #F0FAFB; padding-top: 30px; padding-bottom: 30px;">
    <div class="container">
        <div class="text-center mb-4">
            <h3 class="font-weight-bold text-primary">Notre blog</h3>
            <p class="lead text-muted">Découvrez nos derniers articles de blog et explorez des sujets intéressants.</p>
        </div>

        <div class="row">
            {% for blog in blogs %}
            <div class="col-md-4 col-sm-6 mb-4" data-id="{{ blog.id }}">
                <div class="card shadow-sm border-light">
                    {% if blog.image %}
                    <a href="{{ path('blog_show', { 'id': blog.id }) }}" class="image-link">
                        <img src="{{ asset('upload/images/' ~ blog.image) }}" alt="Image de {{ blog.titre }}" class="card-img-top zoom-effect" style="height: 200px; object-fit: cover;">
                    </a>
                    {% endif %}
                    <div class="card-body">
                        <h5 class="card-title">{{ blog.titre }}</h5>
                        <p class="card-text" style="text-align:justify;">{{ blog.description|slice(0, 150) ~ '...' }}</p>
                        
                        <!-- Lire Plus Button -->
                        <a href="{{ path('blog_show', { 'id': blog.id }) }}" class="btn btn-lire-plus">
                            <i class="bi bi-arrow-right-circle" style="margin-right: 8px;"></i> Lire plus
                        </a>
                    </div>
                </div>
            </div>
            {% else %}
            <div class="col-12">
                <div class="alert alert-warning">Aucun article n'a été publié pour le moment.</div>
            </div>
            {% endfor %}
        </div>
    </div>
</section>

<!-- Styles -->
<style>
/* Background for the section */
section#blog {
    background-color: #F0FAFB; /* Very light shiny blue */
}

/* Button styling */
.btn-lire-plus {
    background-color: #8BA8B5; /* Darker shade than light blue (#C5E3E5) */
    color: white;
    text-transform: uppercase;
    font-weight: bold;
    padding: 10px 18px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease-in-out;
}

/* Hover and focus effects for button */
.btn-lire-plus:hover,
.btn-lire-plus:focus {
    background-color: #6A8B9B; /* Even darker shade on hover */
    transform: scale(1.05);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Image hover zoom effect */
.zoom-effect {
    transition: transform 0.3s ease-in-out;
}

.zoom-effect:hover {
    transform: scale(0.98);
}

/* Image link styling */
.image-link {
    display: block;
    width: 100%;
}
</style>

{% endblock %}