{% load static %}
<div class="dj_timetable_container">
    {% if items %}
    {% if items.first.item_event.theme_color == 'dj_timetable_custom' %}
        <style type="text/css">
            .{{ items.first.item_event.theme_color }}_{{items.first.item_event.id}}{
                background: {{items.first.item_event.background_color}}
            }
            .{{ items.first.item_event.theme_color }}_{{items.first.item_event.id}} span.dj_timetable_agenda_badge,
            .{{ items.first.item_event.theme_color }}_{{items.first.item_event.id}} .dj_timetable_dot_active,
            .{{ items.first.item_event.theme_color }}_{{items.first.item_event.id}} .dj_timetable_event_item:hover
            {
                background: {{items.first.item_event.primary_color}};
            }
            .{{ items.first.item_event.theme_color }}_{{items.first.item_event.id}} *:not(span) {
                color: {{items.first.item_event.text_color}};
            }
        </style>
    {% endif %}
    <div class="dj_timetable_calendar {{ items.first.item_event.theme_color }} {% if items.first.item_event.theme_color is not 'dj_timetable_custom'%}{{ items.first.item_event.theme_color }}_{{items.first.item_event.id}} {% endif %}">
        <div class="dj_timetable_calendar_header">
            <h1 class="dj_timetable_header_title">{{ items.first.item_event.name }}</h1>
        </div>
        <div class="dj_timetable_calendar_events">
            {% if is_negative %}
                <p class="dj_timetable_ce_title event_held">Event held on 
                    <span class="dj_timetable_agenda_badge">{{ items.first.item_event.start_date }}</span>,
                    <span class="dj_timetable_agenda_badge">{{ days_until_event }}</span> day{{ days_until_event|pluralize }} ago
                </p>                
            {% else %}
                <p class="dj_timetable_ce_title">Upcoming Event on 
                    <span class="dj_timetable_agenda_badge">{{ items.first.item_event.start_date }}</span> 
                    in <span class="dj_timetable_agenda_badge">{{ days_until_event }}</span> day{{ days_until_event|pluralize }}
                </p>                
            {% endif %}        
            {% for item in items %}
                {% with description_available=item.description %}
                <div class="dj_timetable_event_item {% if description_available %}tool{% endif %}" {% if description_available %}data-tip="{{ description_available }}"{% endif %}>
                {% endwith %}
                <div class="dj_timetable_ei_Dot dj_timetable_dot_active"></div>
                <div class="dj_timetable_ei_Title event_held_{{is_negative}}">{{ item.start_time|date:"g:i A" }}
                    {% if item.end_time %}
                        - {{ item.end_time|date:"g:i A" }}
                    {% endif %}
                </div>
                <div class="dj_timetable_ei_Copy">{{ item.title }}</div>
            </div>
                    {% endfor %}
        </div>
    </div>
    {% else %}
    <p>Events not available
    {% if message %}
    (Note: {{message}})
    {% endif%}
</p>
    {% endif %}
</div>