{% load i18n cms_tags thumbnail %}

<div id="timetable" data-active="0" data-last="{{ instance.child_plugin_instances|length }}">
    <div class="timetable__clock__frame">
        <div class="timetable__clock__main">
            <div class="timetable__start reveal reveal_animation data_delay_8"></div>
            <div class="timetable__clock reveal reveal_animation data_delay_12">
                <svg class="timetable__clock__progress" width="500" height="500" viewBox="0 0 500 500">
                    <circle id="timetable__clock__progress" cx="250" cy="250" r="237.5" fill="none" stroke="#98C53A"
                            stroke-width="25" stroke-dasharray="1492.26" stroke-dashoffset="1492.26"/>
                </svg>
                {% include 'project/assets/clock.svg' %}
                <div class="timetable__clock__digital">
                    <span class="timetable__clock__digital__intro">{{ instance.introduction }}</span>
                    <div id="timetable__clock__digital__time">
                        {{ instance.child_plugin_instances.0.time|time:'H' }}
                        <span>:</span>
                        {{ instance.child_plugin_instances.0.time|time:'i' }}
                    </div>
                    {% if instance.outro %}
                        <span class="timetable__clock__digital__outro">{{ instance.outro }}</span>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>

    <div class="timetable__start__door timetable__start__door--left"></div>
    <div class="timetable__start__door timetable__start__door--right"></div>

    <a href="#" class="timetable__next reveal reveal_animation data_delay_23">
        {% if instance.cta %}{{ instance.cta }}{% endif %}
        <span class="timetable__next__icon">
            <span class="data_id_0"></span>
            <span class="data_id_1"></span>
            <span class="data_id_2"></span>
        </span>
    </a>

    {% thumbnail instance.start_image 2110x1200 box=instance.cropping crop detail as thumb %}
    <div class="timetable__start__background reveal reveal_animation data_delay_1"
         style="background-image: url({{ thumb.url }})"></div>

    <div class="timetable__intro__placeholder"></div>

    {% for plugin in instance.child_plugin_instances %}
        <div class="timetable__item {% cycle 'odd' 'even' %} data_id_{{ forloop.counter }}"
             data-hour="{{ plugin.time|time:'H' }}"
             data-minute="{{ plugin.time|time:'i' }}"
             data-id="{{ forloop.counter }}">
            {% render_plugin plugin %}
        </div>
        <div class="timetable__item__after {% if forloop.last %}last{% endif %}" data-id="{{ forloop.counter }}"></div>
    {% endfor %}

    <div class="timetable__titles">
        {% for plugin in instance.child_plugin_instances %}
            <div class="section__title data_id_{{ forloop.counter }}">
                <div class="section__title__main">
                    <div class="section__title__content" data-ease-multiplier="2" data-scroll-mod="horizontal">
                        {{ plugin.title }}
                    </div>
                </div>
            </div>
        {% endfor %}
    </div>
</div>