{% extends "base.html" %}

{% block header %}{% 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">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>
    </div>
    <div id="homeaudio" class="d-flex justify-content-center mt-5">
        <div class="text-start">
            <i>Écouter:</i><br>
            <audio controls src="{% static 'songs/WeShallOvercome.mp3' %}"></audio>
        </div>
    </div>
{% endblock %}