{% extends "agenda_culturel/page.html" %}


{% load cat_extra %}
{% load event_extra %}
{% load utils_extra %}
{% load static %}
{% load cache %}

{% block entete_header %}
    {% css_categories %}
    <script src="{% static 'js/calendar-buttons.js' %}"></script>
{% endblock %}

{% block title %}{% block og_title %}
{% if category %}{{ category.name }} en{% endif %}
{{ calendar.firstdate | date:"F o" }}
{% endblock %}{% endblock %}

{% block navigation-menu %}
{% cache 90000 navigation_links_month user.is_authenticated calendar.firstdate category filter.get_url %}
{% navigation_links filter category %}
{% endcache %}
{% endblock %}

{% block when_parameters %}{{ filter.get_url }}{% endblock %}

 {% block content %}
 
 {% with cache_timeout=user.is_authenticated|yesno:"30,6000" %}
 {% cache cache_timeout month user.is_authenticated calendar.firstdate category filter.get_url %}

 {% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=0 %}

 <article>
    <header>
        <div class="title small"><h1>{% if category %}{{ category.name }} en {% endif %}{{ calendar.firstdate | date:"F o" }}{% if filter.has_location %} à {{ filter.get_position }}{% endif %}</h1></div>
        <div class="navigation">
            <div>
            {% if calendar.firstdate|shift_day:-1|not_before_first %}
            {% if calendar.lastdate|not_after_last %}
            {% if category %}
            <a role="button" href="{% url 'month_view_category' category.slug calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">
            {% else %}
            <a role="button" href="{% url 'month_view' calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">
            {% endif %}
                {% picto_from_name "chevron-left" %} précédent</a>
            </div>
            {% endif %}
            {% endif %}
            {% if calendar.lastdate|shift_day:+1|not_after_last %}
            {% if calendar.lastdate|not_before_first %}
            <div class="right">
                {% if category %}
                <a role="button" href="{% url 'month_view_category' category.slug calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">suivant 
                {% else %}
                <a role="button" href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">suivant 
                {% endif %}
                {% picto_from_name "chevron-right" %}
            </a>
            </div>
            {% endif %}
            {% endif %}
        </div>
    </header>
    <div id="calendar">
        <div class="slider-button slider-button-inside button-left hidden">{% picto_from_name "arrow-left" %}</div>
        {% if calendar.firstdate|shift_day:-1|not_before_first %}
        {% if calendar.lastdate|not_after_last %}
        {% if category %}
        <div class="slider-button slider-button-page button-left hidden"><a href="{% url 'month_view_category' category.slug calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a></div>
        {% else %}
        <div class="slider-button slider-button-page button-left hidden"><a href="{% url 'month_view' calendar.previous_month.year calendar.previous_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a></div>
        {% endif %}
        {% endif %}
        {% endif %}

        <div class="grid week-in-month">
        {% for day in calendar.calendar_days_list %}
        {% if forloop.counter0|divisibleby:7 %}
            {% if not forloop.first %}</div><div class="grid week-in-month">{% endif %}
            {% if category %}
            <div id="week-{{ day.date.isocalendar.1 }}" class="entete-semaine"><h2><a href="{% url 'week_view_category' category.slug calendar.year day.week %}?{{ filter.get_url }}">Semaine {{ d.week }}</a></h2></div>
            {% else %}
            <div id="week-{{ day.date.isocalendar.1 }}" class="entete-semaine"><h2><a href="{% url 'week_view' calendar.year day.week %}?{{ filter.get_url }}">Semaine {{ d.week }}</a></h2></div>
            {% endif %}
        {% endif %}



        {% with day.date|date:"Y-m-d" as daytag %}
        {% with "date-"|add:daytag as daytag %}
        
        <article class="day{{ day|calendar_classes:calendar.all_in_past }}" id="{{ daytag }}">
            {% if day.is_today %}
            <script>
                document.addEventListener("DOMContentLoaded", function(e) {
                    agenda = document.getElementById("calendar");
                    todayArticle = document.getElementById("today").parentElement;
                    left = todayArticle.offsetLeft;
                    top = todayArticle.offsetTop;
                    agenda.scrollTo({top: top, left: left});
                });
            </script>
            {% endif %}
            <header{% if day.is_today %} id="today"{% endif %}>
            <h3><a href="{{ day.date | url_day:category }}?{{ filter.get_url }}" class="visible-link">{{ day.date | date:"l j" }}</a></h3}>
            </header>
            {% if day.events %}
                <ul>
                    {% for category_group, events in day.events_by_category_ordered %}
                    <li>{{ events.0.category | circle_cat }} 
                        <a href="{{ day.date | url_day:category }}?{{ filter.get_url|add_url_category:events.0.category }}" data-target="{{ daytag }}-category-{{ events.0.category.pk }}" onClick="toggleModal(event)">{{ events | length }} {{ category_group }}</a></li>
                        <dialog id="{{ daytag }}-category-{{ events.0.category.pk }}">
                            <article>
                                <header>
                                    <a href="#{{ daytag }}-category-{{ events.0.category.pk }}"
                                        aria-label="Fermer" 
                                        class="close" 
                                        data-target="{{ daytag }}-category-{{ events.0.category.pk }}"
                                        onClick="toggleModal(event)"></a>
                                        <h3>{{ events.0.category | small_cat }} du {{ day.date | date:"l j F" }}</h3>
                                </header>
                                <ul>
                                    {% for event in events %}
                                    <li>
                                        {% if event.start_day == day.date and event.start_time %}
                                        {{ event.start_time }}
                                        {% endif %}
                                        <a href="{{ event.get_absolute_url }}">{{ event|picto_status }} {{ event.title|no_emoji }} {{ event|tw_badge }}</a>
                                    </li>
                                    {% endfor %}
                                </ul>
                                <footer>
                                    <div class="buttons">
                                        <a href="{{ day.date | url_day:category }}?{{ filter.get_url }}" role="button">Voir la journée <svg width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                                            <use href="{% static 'images/feather-sprite.svg' %}#chevron-right" />
                                        </svg></a>
                                    </div>
                                </footer>
                            </article>
                        </dialog>
                    {% endfor %}
                    <li class="detail-link"><a href="{{ day.date | url_day:category }}?{{ filter.get_url }}" class="visible-link">voir en détail {% picto_from_name "chevrons-right" %}</a></li>
                    </ul>
            {% endif %}
        </ul>
        </article>
        
        {% endwith %}
        {% endwith %}
        
        {% endfor %}
        </div>
        {% if calendar.lastdate|shift_day:+1|not_after_last %}
        {% if calendar.lastdate|not_before_first %}
        {% if category %}
        <div class="slider-button slider-button-page button-right hidden"><a href="{% url 'month_view_category' category.slug calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a></div>
        {% else %}
        <div class="slider-button slider-button-page button-right hidden"><a href="{% url 'month_view' calendar.next_month.year calendar.next_month.month %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a></div>
        {% endif %}
        {% endif %}
        {% endif %}
        <div class="slider-button slider-button-inside button-right hidden">{% picto_from_name "arrow-right" %}</div>
    </div>


    {% cache 90000 footer_month user.is_authenticated calendar.firstdate category filter.get_url %}
    <footer>
        {% if category %}
            {% if calendar.today_in_calendar %}
            <a role="button" href="{% url 'aujourdhui_category' category.slug %}?{{ filter.get_url }}">Aujourd'hui</a>
            <a role="button" href="{% url 'cette_semaine_category' category.slug %}?{{ filter.get_url }}">Cette semaine</a>
            {% endif %}
            <a role="button" data-tooltip="Copiez ce lien et importez-le dans votre agenda" href="{% url 'export_ical_category' category.slug %}?{{ filter.get_url }}">Export ical {% picto_from_name "calendar" %}</a>
        {% else %}
        {% if calendar.today_in_calendar %}
            <a role="button" href="{% url 'aujourdhui' %}?{{ filter.get_url }}">Aujourd'hui</a>
            <a role="button" href="{% url 'cette_semaine' %}?{{ filter.get_url }}">Cette semaine</a>
            {% endif %}
            <a role="button" data-tooltip="Copiez ce lien et importez-le dans votre agenda" href="{% url 'export_ical' %}?{{ filter.get_url }}">Export ical {% picto_from_name "calendar" %}</a>
        {% endif %}
        </footer>
    {% endcache %}
</article>
{% endcache %}
{% endwith %}
 
 
 {% endblock %}