{# daily calendar view
    @variable events(list[dict]): events to display
    @variable calendar_start(float): calendar start timestamp
    @variable calendar_end(float): calendar end timestamp
#}

{% if not embedded %}{% extends 'base/base.html' %}{% endif %}
{% import 'components/block.html' as block with context %}

{% block body %}
{{ icon_defs('calendar') }}

<section class="section">

    <div class="content has-items-centered is-flex">
        {{ component.action_button(url_event_new) }}
    </div>


    <h1 class="title has-text-centered">{{ calendar_start|date_fmt('full', date_only=True) }}</h1>
    <div class="columns">
        <div class="column">
            <div class="time-and-events">
                <div class="time-rows" aria-hidden="true">
                    {% for hour in range(calendar_start|timestamp_to_hour, calendar_end|timestamp_to_hour + 1) %}
                        {% for minute in [0, 30] %}
                        <div class="time-row {% if minute == 0 %}hour-row{% else %}half-hour-row{% endif %}">
                            <span class="time-text" >{{ "%02d:%02d"|format(hour, minute) }}</span>
                            <div class="line"></div>
                        </div>
                    {% endfor %}
                {% endfor %}
                </div>
                {% if events %}
                    {% for event in events %}
                        {% if event.end > calendar_start and event.start < calendar_end %}
                            {% set event_start = event.start|date_fmt(tz_name=tz_name) %}
                            {% set event_end = event.end|date_fmt(tz_name=tz_name) %}
                            {% set event_duration = event.start|delta_to_human(event.end) %}
                            {% set ns = namespace(event_classes = []) %}
                            {% if event.start < calendar_start %}
                                {% set ns.event_classes = ns.event_classes + ['already-started'] %}
                            {% endif %}
                            {% if event.end > calendar_end %}
                                {% set ns.event_classes = ns.event_classes + ['not-finished'] %}
                            {% endif %}
                            {% for other_event in events %}
                                {% if event != other_event and event.start < other_event.end and event.end > other_event.start %}
                                    {% set ns.event_classes = ns.event_classes + ['is-conflicting'] %}
                                {% endif %}
                            {% endfor %}
                            {% set event_top = [(((event.start - calendar_start) / 1800 * 30) + 15), 0]|max|int %}
                            {% set event_height = [((event.end - event.start) / 1800 * 30), ]|min|int %}
                            <div class="event-box {{ ns.event_classes|join(' ') }}" style="top: {{ event_top }}px; height: {{ event_height }}px; max-height: calc(100% - {{event_top}}px);">
                                <span class="event-name">{{ event.name[""] }}</span>
                                <br>
                                {{ event_start }} - {{ event_end }} ({{ event_duration }})
                            </div>
                        {% endif %}
                    {% endfor %}
                {% endif %}
                <div id="current-time-line" aria-hidden="true" hidden></div>
            </div>
        </div>
    </div>


</section>
{% endblock body %}