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

{% block title %}Témoignages{% endblock %}

{% block body %}
<div class="container my-4">
    <!-- Page Title -->
    <h2 class="text-left mb-4" id="heading"> {{ 'temoignage_laisser' | trans }}</h2>
    <h5 class="text-left mb-4" style="margin-top:2%;"> {{ 'temoignage_liste' | trans }}</h5>
    <div class="row">
    	<a href="{{ path('app_temoignage_list') }}" class="btn-temoignage">
    		Laissez un témoignage
    	</a>
    </div>
<style>
	.btn-temoignage {
    color: white;
    background-color: rgb(212, 175, 55);
    padding: 10px 20px;
    border-radius: 5px;
    text-align: center;
    text-decoration: none;  /* Remove underline */
    font-weight: bold;
    display: inline-block;
    margin-top: 1.3%;
    font-size: 16px;
    transition: background-color 0.3s ease;
    margin-bottom:2%;
    float:right;
    width:30%;
}

.btn-temoignage:hover {
    background-color: rgb(184, 149, 47);  /* Darker shade on hover */
    color:black;
}

</style>
    <!-- Testimonials List -->
    {% for temoignage in temoignages %}
        {% if temoignage.valider == 1 %}
            <div class="row mb-4"> <!-- Start a new row for each testimonial -->
                <!-- Date -->
                <div class="col-md-2">
                    {{ temoignage.date|date('m-d-Y') }}
                </div>

                <!-- Title -->
                <div class="col-md-3">
                    <h6 class="text-left mb-4">
                        {% if app.request.locale == 'fr' %}
                            {{ temoignage.getTitre() }}
                        {% elseif app.request.locale == 'en' %}
                            {{ temoignage.getTitreAnglais() }}
                        {% endif %}
                    </h6>
                </div>

                <!-- Description (if exists) -->
                {% if temoignage.description is not empty %}
                    <div class="col-md-5" style="text-align:justify;">
                        <p>
                            {% if app.request.locale == 'fr' %}
                                {{ temoignage.getDescription() }}
                            {% elseif app.request.locale == 'en' %}
                                {{ temoignage.getDescriptionAnglais() }}
                            {% endif %}
                        </p>
                    </div>
                {% endif %}

                <!-- Image (if exists) -->
                {% if temoignage.image is not empty %}
                    <div class="col-md-2 text-end">
                        <img src="{{ asset('upload/images/' ~ temoignage.image) }}" alt="Image du témoignage" class="img-fluid">
                    </div>
                {% endif %}
            </div> <!-- End the row for this testimonial -->
        {% endif %}
    {% endfor %}
</div>

{% block styles %}
<style>
    /* Hide French or English fields based on locale */
    {% if app.request.locale == 'fr' %}
        .titreeng, .descriptioneng,
        label[for="temoignage_description_anglais"],
        label[for="temoignage_titre_anglais"] {
            display: none;
        }
    {% endif %}

    {% if app.request.locale == 'en' %}
        .titre, .description,
        label[for="temoignage_description"],
        label[for="temoignage_titre"] {
            display: none;
        }
    {% endif %}

    /* Hiding unnecessary form fields */
    input#temoignage_delete_image,
    input#temoignage_valider,
    label[for="temoignage_delete_image"],
    label[for="temoignage_valider"] {
        display: none;
    }

    /* Golden border style */
    .border-golden {
        border: 2px solid #d4af37 !important;
        border-radius: 10px;
    }

    /* Golden button style */
    .btn-golden {
        background: linear-gradient(45deg, #ffd700, #b8860b, #f5c400, #cd7f32);
        color: black;
        padding: 4px 4px;
        border-radius: 5px;
        text-decoration: none;
        display: inline-block;
        font-weight: bold;
        text-align: center;
        margin-top: 1.3%;
        width: 150px;
        font-size: 13px;
    }

    /* Background for the page heading */
    #adresstop {
        position: relative;
        width: 100%;
    }

    #heading {
        position: absolute;
        top: 55%;
        left: 100%;
        transform: translateY(-80%);
        white-space: nowrap;
        font-size: 2.5em;
        color: white;
        padding: 10px 0;
        width: 100%;
        text-align: center;
        background-color: #d4af37 !important;
        opacity: 1;
        transition: background-color 0.5s ease;
    }
</style>
{% endblock %}

{% block scripts %}
<script>
    $(document).ready(function() {
        var imagePath = '{{ asset('img/rdvmanel22.png') }}';

        // Set background image
        $('#adresstop').css({
            'background': 'url(' + imagePath + ') top left',
            'height': '350px',
            'background-size': 'cover',
            'background-repeat': 'no-repeat',
            'background-position': 'center',
            'color': '#000 !important',
        });

        // Animate the heading
        $('#heading').css({
            'font-size': '2em',
            'color': '#000',
            'background-color': 'transparent',
            'opacity': 0.7,
        }).animate({
            left: '0%'
        }, 1500, function() {
            $(this).css({
                'background-color': '#d4af37',
                'color': 'black'
            });
        });

        // Set active link in the navigation menu
        var currentUrl = window.location.href;
        $('.navmenu ul li a').removeClass('active');

        $('.navmenu ul li a').each(function() {
            if (this.href === currentUrl) {
                $(this).addClass('active');
            }
        });
    });
</script>
{% endblock %}
{% endblock %}