{% load timeslots %}

{% if forloop.first %}
    {% if timeslot.start|time:"Hi" <= "0600" or timeslot.end.hour < timeslot.start.hour %}
        {# the show starts at or before 6 am or yesterday #}
        <div class="timeslot bf-{{ timeslot.show.broadcastformat.slug }}"
             style="height: {% height_until timeslot.end %}px;">
            <div><a href="{% url "timeslot-detail" timeslot.id %}">{{ timeslot.show.name }}</a></div>
        </div>
    {% else %}
        {# the show doesn´t start at or before 6 am -> default_show until the start of the show #}
        <div class="timeslot bf-{{ default_show.broadcastformat.slug }}"
             style="height: {% height_until timeslot.start %}px;">
            <div>{{ default_show.name }}</div>
        </div>
        <div class="timeslot bf-{{ timeslot.show.broadcastformat.slug }}"
             style="height: {% height timeslot.start timeslot.end %}px;">
            <div><a href="{% url "timeslot-detail" timeslot.id %}">{{ timeslot.show.name }}</a></div>
        </div>
    {% endif %}
{% endif %}

{% if not forloop.first and not forloop.last %}
    <div class="timeslot bf-{{ timeslot.show.broadcastformat.slug }}"
         style="height: {% height timeslot.start timeslot.end %}px;">
        <div><a href="{% url "timeslot-detail" timeslot.id %}">{{ timeslot.show.name }}</a></div>
    </div>
{% endif %}

{% if forloop.last %}
    {% if timeslot.end|time:"Hi" <= "0600" %}
        <div class="timeslot bf-{{ timeslot.show.broadcastformat.slug }}"
             style="height: {% height timeslot.start timeslot.end %}px;">
            <div><a href="{% url "timeslot-detail" timeslot.id %}">{{ timeslot.show.name }}</a></div>
        </div>
    {% else %}
        <div class="timeslot bf-{{ timeslot.show.broadcastformat.slug }}"
             style="height: {% height_since timeslot.start %}px;">
            <div><a href="{% url "timeslot-detail" timeslot.id %}">{{ timeslot.show.name }}</a></div>
        </div>
    {% endif %}
{% endif %}

{% if timeslot.end < timeslot.get_next_by_start.start and timeslot.end|time:"Hi" != "0600" %}
    {% if not forloop.last %}
        <div class="timeslot bf-{{ default_show.broadcastformat.slug }}"
             style="height: {% height timeslot.end timeslot.get_next_by_start.start %}px;">
            <div>{{ default_show.name }}</div>
        </div>
    {% else %}
        <div class="timeslot bf-{{ default_show.broadcastformat.slug }}"
             style="height: {% height_since timeslot.end %}px;">
            <div>{{ default_show.name }}</div>
        </div>
    {% endif %}
{% endif %}