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


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

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

{% block title %}{% block og_title %}{% if calendar.today_in_calendar %}{% if category %}{{ category.name }}{% else %}Sorties culturelles{% endif %} cette semaine à Clermont-Ferrand et aux environs{% else %}{% if category %}{{ category.name }} la semaine{% else %}Semaine{% endif %} du {{ calendar.firstdate|date|frdate }}{% endif %}{% endblock %}{% endblock %}


{% block navigation-menu %}
{% cache 90000 navigation_links_week 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 week user.is_authenticated calendar.firstdate category filter.get_url %}
 {% include "agenda_culturel/filter-inc.html" with filter=filter noarticle=0 category=category %}

<article>
    <header>
        <div class="title small"><h1>
            {% if calendar.today_in_calendar %}
            {% if category %}{{ category.name }} cette semaine{% else %}Cette semaine{% endif %}
            {% else %}
            {% if category %}{{ category.name }} la {% endif %}semaine du {{ calendar.firstdate |date:"j F"|frdate }}
            {% endif %}{% 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 'week_view_category' category.slug calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">
                    {% else %}
                    <a role="button" href="{% url 'week_view' calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">
                    {% endif %}
                    {% picto_from_name "chevron-left" %} précédente</a>
            {% endif %}
            {% endif %}
            </div>
            {% 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 'week_view_category' category.slug calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">suivante 
            {% else %}
                <a role="button" href="{% url 'week_view' calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">suivante 
            {% 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 'week_view_category' category.slug calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a></div>
        {% else %}
        <div class="slider-button slider-button-page button-left hidden"><a href="{% url 'week_view' calendar.previous_week|weekyear calendar.previous_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-left" %}</a></div>
        {% endif %}
        {% endif %}
        {% endif %}

        <div class="grid">
        {% for day in calendar.calendar_days_list %}
        
        {% 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 %}>
            <h2><a class="visible-link" href="{{ day.date | url_day:category }}?{{ filter.get_url }}">{{ day.date | date:"l j" }}</a></h2>
            </header>
            {% if day.events %}
                <ul>
                {% for event in day.events %}
                {% if event.is_first_after_now %} 
                <li class="line-now"><div><div>{% now "H:i" %}</div><div class="line"></div></div></li>
                {% endif %}
                <li>{{ event.category | circle_cat:event.has_recurrences }}
                    {% if event.start_day == day.date and event.start_time %}
                    {{ event.start_time }}
                    {% endif %}
                    {{ event|picto_status }} <a href="{{ event.get_absolute_url }}" data-target="event-{{ event.id }}" onClick="toggleModal(event)">{{ event.title|no_emoji }}</a>
                    {{ event|tw_badge }} 
                    <dialog id="event-{{ event.id }}">
                        <article>
                            {% if event.has_image_url %}
                            <header style="background-image: url({{ event.get_image_url }});" class="h-image">
                            {% else %}
                            <header class="cat-{{ event.category.pk }}">
                            {% endif %}
                            <div class="h-mask">
                                <a href="#event-{{ event.id }}" 
                                    aria-label="Fermer" 
                                    class="close" 
                                    data-target="event-{{ event.id }}"
                                    onClick="toggleModal(event)"></a>
                                    <h3>{{ event.category|small_cat_recurrent:event.has_recurrences }} {{ event|picto_status }} {{ event.title }} {{ event|picto_visibility:user.is_authenticated }}</h3>
                                
                                    <p>
                                        {% picto_from_name "map-pin" %}

                                        {% if event.exact_location %}
                                                {{ event.exact_location.name }}, {{ event.exact_location.city }}
                                        {% else %}
                                            {% if perms.agenda_culturel.change_event and perms.agenda_culturel.change_place %}
                                            <a href="{% url 'add_place_to_event' event.pk %}" class="missing-data">{{ event.location }}</a>
                                            {% else %}
                                            {{ event.location }}
                                            {% endif %}
                                        {% endif %}                                    </p>
                                    <p>
                                        {% picto_from_name "calendar" %}
                                        {% if event.end_day and event.end_day != event.start_day %}du{% else %}le{% endif %}
                                        {{ event.start_day|date|frdate }} 
                                        {% if event.start_time %} {% if not event.end_day or event.end_day == event.start_day %}{% if event.end_time %}de{% else %}à{% endif %}{% endif %}
                                            {{ event.start_time }}
                                        {% endif %}
                                        {% if event.end_day and event.end_day != event.start_day %}
                                            au {% if event.end_day and event.end_day != event.start_day %}{{ event.end_day|date|frdate }}{% endif %}
                                        {% endif %}
                                        {% if event.end_time %} {% if not event.end_day|date|frdate or event.end_day == event.start_day %}jusqu'à{% endif %} {{ event.end_time }}{% endif %}
                                    </p>
                                </div>
                            </header>
                        
                            <div class="body-fixed">{{ event.description |linebreaks }}</div>
                        
                        
                            <p>
                                {% for tag in event.sorted_tags %}
                                {{ tag | tag_button }}
                                {% endfor %}
                            </p>
                        
                            <footer class="infos-and-buttons">
                                <div class="buttons">
                                    <a href="{{ event.get_absolute_url }}" role="button">Voir l'événement <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>
                </li>
                {% endfor %}
                {% if day.is_today_after_events %}
                <li class="line-now"><div><div>{% now "H:i" %}</div><div class="line"></div></div></li>
                {% endif %}
                <li class="detail-link"><a href="{{ day.date | url_day }}?{{ 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>
        <div class="slider-button slider-button-inside button-right hidden">{% picto_from_name "arrow-right" %}</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 'week_view_category' category.slug calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a></div>
        {% else %}
        <div class="slider-button slider-button-page button-right hidden"><a href="{% url 'week_view' calendar.next_week|weekyear calendar.next_week|week %}?{{ filter.get_url }}">{% picto_from_name "chevrons-right" %}</a></div>
        {% endif %}
        {% endif %}
        {% endif %}

    </div>

    {% cache 90000 footer_week user.is_authenticated calendar.firstdate category filter.get_url  %}
    <footer>

        {% if calendar.today_in_calendar %}
            {% if category %}
                <a role="button" href="{% url 'aujourdhui_category' category.slug %}?{{ filter.get_url }}">Aujourd'hui</a>
            {% else %}
                <a role="button" href="{% url 'aujourdhui' %}?{{ filter.get_url }}">Aujourd'hui</a>
            {% endif %}
        {% endif %}
        {% if category %}
            <a role="button" href="{% url 'month_view_category' category.slug calendar.firstdate.year calendar.firstdate.month %}?{{ filter.get_url }}">{{ calendar.firstdate | date:"F o" }}</a>
        {% else %}
            <a role="button" href="{% url 'month_view' calendar.firstdate.year calendar.firstdate.month %}?{{ filter.get_url }}">{{ calendar.firstdate | date:"F o" }}</a>
        {% endif %}
        {% if calendar.firstdate.month != calendar.lastdate.month %}
            {% if category %}
                <a role="button" href="{% url 'month_view_category' category.slug calendar.lastdate.year calendar.lastdate.month %}?{{ filter.get_url }}">{{ calendar.lastdate | date:"F o" }}</a>
            {% else %}
            <a role="button" href="{% url 'month_view' calendar.lastdate.year calendar.lastdate.month %}?{{ filter.get_url }}">{{ calendar.lastdate | date:"F o" }}</a>
            {% endif %}
        {% endif %}
        {% if category %}
            <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 %}
            <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 %}