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


{% block content-container %}

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

    {% if object.podcasts %}
    {% spaceless %}
    <section class="container no-border">
        <h3 class="title">{% translate "Podcasts" %}</h3>
        <a-playlist v-if="page" :set="podcasts"
            name="{{ page.title }}"
            list-class="menu-list" item-class="menu-item"
            :player="player" :actions="['play', 'pin']"
            @select="player.playItems('queue', $event.item)">
        </a-playlist>
    </section>
    {% endspaceless %}
    {% endif %}

    {% if tracks %}
    <section class="container">
        <h3 class="title">{% translate "Playlist" %}</h3>
        <table class="table is-hoverable is-fullwidth">
            <thead>
                <tr>
                    <th></th>
                    <th>{% translate "Artist" %}</th>
                    <th>{% translate "Title" %}</th>
                    <th></th>
            </thead>
            <tbody>
                {% for track in tracks %}
                <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ track.artist }}</td>
                    <td>{{ track.title }}</td>
                    <td>{{ track.info|default:"" }}</td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>
    {% endif %}
</template>
</a-episode>
{% endblock %}
