{% extends "base.html" %}

{% block meta %}
    {{ block.super }}
    <meta name="description" content="Page d’accueil du site Web de la chorale du Gospel de l’Abeille, La Chaux-de-Fonds, Suisse">
{% endblock %}

{% block bodyclass %}home{% endblock %}

{% block navbar-expand %}{% endblock %}

{% block content %}
    <div class="homediv">
      <div class="hometitle text-center">
      <a class="homeurl harlow" href="{% url 'presentation' %}">
        <div class="d-flex justify-content-center mb-4">
            <div class="flex-grow-1 overleft red-bottom">&nbsp;</div>
            <div class="main-text red-bottom">The Bee’s Gospel Singers</div>
            <div class="flex-grow-1 overright">&nbsp;</div>
        </div>
        <div class="d-flex justify-content-center">
            <div class="flex-grow-1 overleft">&nbsp;</div>
            <div class="main-text red-bottom">
                <img id="abeille" src="{% static 'img/abeille.webp' %}"> Gospel de l’Abeille
            </div>
            <div class="flex-grow-1 overright red-bottom">&nbsp;</div>
        </div>
      </a>
      </div>
      <div class="agenda_container">
        {% for item in items %}
        <div class="row justify-content-center mt-3 agenda_line">
            <div class="col-12 text-end mt-2">
              <span class="text-black rounded align-self-center fw-bold p-2 date_agenda">
               {{ item.date_heure|date:'D d F à H:i' }}
              </span>
            </div>
            <div class="col-12 text-end mt-2">
              <a class="text-white" href="{% url 'agenda' %}">
              <span class="ps-3 fw-bold">{{ item.titre }} ({{ item.lieu }})</span>
              </a>
            </div>
        </div>
        {% endfor %}
        <div class="row justify-content-center mt-3 agenda_line">
            <div class="col-12 text-end mt-2">
                <a class="text-white fst-italic" href="{% url 'agenda' %}">Agenda complet…</a>
            </div>
        </div>
      </div>
    </div>
    <div id="homeaudio" class="d-flex justify-content-center mt-5">
        <div class="text-start">
            <i>Écouter un extrait:</i><br>
            <audio controls src="{% static 'songs/WeShallOvercome-Extrait.mp3' %}"></audio>
            <br>
            <p class="text-end"><i><a href="{% url 'medias' %}">Plus…</a></i></p>
        </div>
    </div>
{% endblock %}