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

{% block title %}Tech Libre{% endblock %}

{% block body %}

<style>
    @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');

    .roboto-mono {
    font-family: "Roboto Mono", serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}
</style>

<section class="">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320">
        <path fill="#00cba9" fill-opacity="1" d="M0,320L18.5,314.7C36.9,309,74,299,111,298.7C147.7,299,185,309,222,293.3C258.5,277,295,235,332,218.7C369.2,203,406,213,443,192C480,171,517,117,554,106.7C590.8,96,628,128,665,133.3C701.5,139,738,117,775,106.7C812.3,96,849,96,886,106.7C923.1,117,960,139,997,160C1033.8,181,1071,203,1108,186.7C1144.6,171,1182,117,1218,90.7C1255.4,64,1292,64,1329,58.7C1366.2,53,1403,43,1422,37.3L1440,32L1440,0L1421.5,0C1403.1,0,1366,0,1329,0C1292.3,0,1255,0,1218,0C1181.5,0,1145,0,1108,0C1070.8,0,1034,0,997,0C960,0,923,0,886,0C849.2,0,812,0,775,0C738.5,0,702,0,665,0C627.7,0,591,0,554,0C516.9,0,480,0,443,0C406.2,0,369,0,332,0C295.4,0,258,0,222,0C184.6,0,148,0,111,0C73.8,0,37,0,18,0L0,0Z"></path>
    </svg>
    <div class="text-center container-lg">
        <h1 class="display-4 fw-bold roboto-mono">Tech Libre</h1>
        <h2 class="display-4 fw-bold roboto-mono">Le podcast qui traite de l'open source et pas que...</h2>
        <img src="{{ asset('Picture/img-header1.jpg') }}" alt="Tech Podcast" class="img-fluid rounded-5 shadow my-4">
    </div>

    <div class="text-center">
        <h5 class="lead">Plongez dans l'univers passionnant de la technologie et de l'open source !</h5>
    </div>
    <div class="text-center">
        <ul class="list-unstyled">
            <li class="h5"><i class="bi bi-check-circle-fill text-success"></i> Les dernières innovations technologiques</li>
            <li class="h5"><i class="bi bi-check-circle-fill text-success"></i> L'actualité du monde open source</li>
            <li class="h5"><i class="bi bi-check-circle-fill text-success"></i> Des analyses approfondies</li>
        </ul>
    </div>
</section>

<hr class="my-5">

<section class="container">
    <h2 class="text-center mb-4">Derniers Épisodes</h2>
    <div class="row g-4">
        {% for episode in episodes %}
            <div class="col-12 col-lg-6">
            <div class="card h-100 shadow">
                <div class="row g-0">
                    <div class="col-md-4">
                        <a href="{{ path('app_episode_show', {'id': episode.id}) }}">
                            <img src="{{ episode.coverImage }}" alt="{{ episode.title }}" class="img-fluid rounded-start h-100 object-fit-cover">
                        </a>
                    </div>
                    <div class="col-md-8">
                        <div class="card-body d-flex flex-column">
                            <h3 class="card-title text-center mb-3">{{ episode.title }}</h3>
                            <div class="card-text">
                                    <p>{{ episode.description |striptags|replace({'&nbsp;': ' '})|u.truncate(100, '...', false) | raw  }}</p>                                    <div class="custom-audio-player mb-3">
                                    <audio controls class="w-100">
                                        <source src="{{ episode.audio }}" type="audio/mpeg">
                                        Votre navigateur ne supporte pas la balise audio.
                                    </audio>
                                </div>
                                <div class="d-flex gap-2 justify-content-center mt-auto">
                                    <a href="{{ path('app_episode_show', {'id': episode.id}) }}" class="btn btn-outline-success">
                                        <i class="bi bi-info-circle"></i> Toute les informations
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        {% endfor %}
        <div class="text-center">
            {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_new') }}" class="btn btn-success">
                    <i class="bi bi-plus-circle"></i> Créer un nouvel épisode
                </a>
            {% endif %}
        </div>
    </div>
</section>
{% endblock %}