{% extends "aircox/page_detail.html" %}
{% comment %}List of a show's episodes for a specific{% endcomment %}
{% load i18n aircox %}

{% include "aircox/program_sidebar.html" %}

{% block content %}
<a-episode :page="{title: &quot;{{ page.title }}&quot;, podcasts: {{ object.podcasts|json }}}">
<template v-slot="{podcasts,page}">
{{ block.super }}

<div class="columns is-desktop">
    <section class="column">
        <h5 class="title is-5">{% trans "Diffusions" %}</h5>
        <ul>
        {% for diffusion in object.diffusion_set.all %}
        <li>
            {% with diffusion.start as start %}
            {% with diffusion.end as end %}
            <time datetime="{{ start }}">{{ start|date:"D. d F Y, H:i" }}</time>
            &mdash;
            <time datetime="{{ end }}">{{ end|date:"H:i" }}</time>
            {% endwith %}
            {% endwith %}

            <small>
                {% if diffusion.initial %}
                {% with diffusion.initial.date as date %}
                <span title="{% blocktrans %}Rerun of {{ date }}{% endblocktrans %}">
                    ({% trans "rerun" %})
                </span>
                {% endwith %}
                {% endif %}
            </small>
            <br>
        </li>
        {% endfor %}
        </ul>
    </section>

    {% if object.podcasts %}
    <section class="column">
        <a-playlist v-if="page" :set="podcasts"
            name="{{ page.title }}"
            :player="player" :actions="['play']"
            @select="player.playItems('queue', $event.item)">
            <template v-slot:header>
                <h5 class="title is-5">{% trans "Podcasts" %}</h5>
            </template>
        </a-playlist>
        {% comment %}
        {% for object in podcasts %}
        {% include "aircox/widgets/podcast_item.html" %}
        {% endfor %}
        {% endcomment %}
    </section>
    {% endif %}
</div>

{% if tracks %}
<section class="column">
    <h4 class="title is-4">{% trans "Playlist" %}</h4>
    <ol>
        {% for track in tracks %}
        <li><span>{{ track.title }}</span>
            <span class="has-text-grey-dark has-text-weight-light">
            &mdash; {{ track.artist }}
            {% if track.info %}(<i>{{ track.info }}</i>){% endif %}
            </span>
        </li>
        {% endfor %}
    </ol>
</section>
{% endif %}

</template></a-episode>
{% endblock %}