{% extends 'base.html.twig' %}
{% block javascripts %}
    {{ parent() }}
    <script src="{{ asset('js/dom-to-image.min.js')}}"></script>
{% endblock %}
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/agenda.css') }}" />
{% endblock %}
{% block body %}
    {% block body_head %} <h1> Agenda des activités de l'association </h1> {% endblock %}
    {% block article %} 
        
    <div class="article_liste">
        <article  class="agenda">
        <nav class="nav nav-pills flex-column flex-sm-row">
            <a class="flex-sm-fill text-sm-center nav-link m_old" href="{{ path('agenda_precedant2') }}">{{ date('-2months')|format_datetime(locale: 'fr',pattern:"MMMM")|capitalize }}</a>
            <a class="flex-sm-fill text-sm-center nav-link m_cur" href="{{ path('agenda_precedant') }}">{{ date('-1months')|format_datetime(locale: 'fr',pattern:"MMMM")|capitalize }}</a>
            <a class="flex-sm-fill text-sm-center nav-link m_cur" href="{{ path('agenda') }}">{{ "now"|format_datetime(locale: 'fr',pattern:"MMMM")|capitalize }}</a>
            <a class="flex-sm-fill text-sm-center nav-link m_cur" href="{{ path('agenda_suivant') }}">{{ date('+1months')|format_datetime(locale: 'fr',pattern:"MMMM")|capitalize }}</a>
            <a class="flex-sm-fill text-sm-center nav-link m_old" href="{{ path('agenda_suivant2') }}">{{ date('+2months')|format_datetime(locale: 'fr',pattern:"MMMM")|capitalize }}</a>
        </nav>
                
            <header><a href="#" onclick="saveAgenda(document.getElementById('affAgenda')); return false;">
                Sauvegarder l'agenda en image &#128197;
            </a></header>
            <main>
                {% set colonne = nombre_colonne %}
                {% if colonne == 0 %}
                    {% set colonne = 1 %}
                {%  endif %}
                {% set w = 90 / colonne %}
                {% set marge = 15 / (colonne * 3 + 2) %}
                <div id="affAgenda" style="padding-left: {{marge}}%; padding-right: {{marge}}%; padding-top: 20px;">
                    <div id="logoAgenda"></div>
                    <div id="moisAgenda">
                        Agenda 
                        {{ dateTime|format_datetime(locale: 'fr',pattern:"MMMM")}}
                        {{ dateTime|format_datetime(locale: 'fr',pattern:"YYYY")}}
                    </div>
                    <div id="adresseAgenda">Salle 4 - Alain Bashung<br>12, rue d'Alsace<br>67110 GUNDERSHOFFEN</div>
                    {% if mardi is not empty %}
                    <div class="colonne_agenda bg_red" style="width: {{w}}%; margin-left: {{marge}}%; margin-right: {{marge}}%; ">
                        <div style="width: 100%; margin-bottom: 25px;">
                            <center>
                                <span style="font-size: 1.3em;"><strong>Mardi</strong></span>
                                <br><br>
                                {% for ev in mardi %}
                                    <span style="font-size: 1em">{{ ev.EvenDate | date("d") }}</span><br>
                                {% endfor %}
                                
                                <span style="font-size: 0.5em;">{{ mardi.0.Type.Description }}</span>
                            </center>
                        </div>
                    </div>
                    {% endif %}
                    {% if vendredi is not empty %}
                    <div class="colonne_agenda bg_green" style="width: {{w}}%; margin-left: {{marge}}%; margin-right: {{marge}}%; ">
                        <div style="width: 100%; margin-bottom: 25px;">
                            <center>
                                {% if nombre_colonne > 4 %}
                                    <span style="font-size: 1.2em;">
                                {% else %}
                                    <span style="font-size: 1.4em;">
                                {% endif %}
                                    <strong>Vendredi</strong>
                                </span>
                                <br><br>
                                {% for ev in vendredi %}
                                    <span style="font-size: 1em;">{{ ev.EvenDate | date("d") }}</span><br>
                                {% endfor %}
                                
                                <span style="font-size: 0.5em;">{{ vendredi.0.Type.Description }}</span>
                            </center>
                        </div>
                    </div>
                    {% endif %}
                    {% if autre is not empty %}
                    {% for ev in autre %}
                    <div class="colonne_agenda bg_blue" style="width: {{w}}%; margin-left: {{marge}}%; margin-right: {{marge}}%; ">
                        <div style="width: 100%; margin-bottom: 25px;">
                            <center>
                                <span style="font-size: 1.3em;"><strong>{{ ev.NomJour }}</strong></span>
                                <br><br>
                                
                                    <span style="font-size: 1.0em;">{{ ev.event.EvenDate | date("d") }}</span><br>
                                    <span style="font-size: 0.5em;">{{ ev.event.Type.Description }}</span>
                                    {% if ev.event.LibelSep is not empty %}
                                        <br>
                                        <span style="font-size: 0.5em;">{{ ev.event.LibelSep }}</span>
                                        <span style="font-size: 0.4em;">
                                            {% if ev.event.Type.isReserved %}
                                                (réservé aux membres)
                                            {% endif %}  
                                            {% if ev.event.isEnregistrementObligatoir %}
                                                (sur inscription)
                                            {% endif %} 
                                        </span>
                                    {% endif %}
                                    <br><br>
                            </center>
                        </div>
                    </div>
                    {% endfor %}
                    {% endif %}
                    {% if agenda is not null %}
                    <div id="agenda_decoration">
                        <div class="agenda_{{ agenda.getDecorationType() }} agenda_{{ agenda.getDecorationColor() }} agande_R">
                            {{ agenda.getDecorationTexte() }}
                        </div>
                    </div>
                    {% endif %} 
                </div>
            </main>
            <footer></footer>
        </article>            
    </div>
    {% endblock %}    
{% endblock %}