{% extends "aircox/page_list.html" %}
{% comment %}List of diffusions as a timetable{% endcomment %}
{% load i18n aircox humanize %}

{% block subtitle %}{{ date|date:"l d F Y" }}{% endblock %}

{% block secondary-nav %}
<nav class="nav secondary">
    <div class="nav-menu nav-categories">
        <a class="nav-item" id="recent-link"
           href="#" onclick="javascript:display('recentdisplay');">
            Derniers titres diffusés
        </a>
        <a class="nav-item active" id="home-link"
           href="#" onclick="javascript:display('homedisplay');">
            Aujourd'hui
        </a>
    </div>
    <a-switch class="button burger"
        el=".nav-categories" group="nav" icon="fas fa-tags"
        aria-label="{% translate "Categories" %}">
    </a-switch>
</nav>

<script>
function display(id) {

        var h = document.getElementsByClassName('homedisplay');
        var r = document.getElementsByClassName('recentdisplay');

    if (id == "homedisplay") {
            for(var i = 0; i < h.length; i++) { h[i].setAttribute('style', 'display:inline !important'); }
            for(var i = 0; i < r.length; i++) { r[i].setAttribute('style', 'display:none !important'); }
            document.getElementById('recent-link').classList.remove('active');
            document.getElementById('home-link').classList.add('active');
        } else {
            for(var i = 0; i < h.length; i++) { h[i].setAttribute('style', 'display:none !important'); }
            for(var i = 0; i < r.length; i++) { r[i].setAttribute('style', 'display:inline !important'); }
            document.getElementById('recent-link').classList.add('active');
            document.getElementById('home-link').classList.remove('active');
        }


}
</script>

{% endblock %}


{% block breadcrumbs %}
{% endblock %}


{% block list-container %}
<br />
<div class="lagrille homedisplay">
<section class="container" style="display:flex;justify-content:flex-end;min-height:600px">
<div>
<!-- <a href="{% url "timetable-list" date=date %}">{{ date|date:"l d F Y" }}</a> -->
<section class="clear-both list grid radiocampus-grid" role="list">
</section>
{% with list_class="list-home" %}
{{ block.super }}
{% endwith %}
</div>
</section>
</div>

<br />
<div class="recentdisplay" style="display:none">
<section class="container" style="min-height:600px">
<div>
        <!-- <a href="{% url "timetable-list" date=date %}">{{ date|date:"l d F Y" }}</a> -->
        <section class="clear-both list grid radiocampus-grid" role="list">
        </section>
        {% with list_class="list-home" %}
        {{ block.super }}
        {% endwith %}
</div>
</section>
</div>
{% endblock %}

{% block list %}
{% with object_list=object_list timetable=True  %}
{% with widget|default:"item" as widget %}

    {% for object in object_list %}
    {% if object.episode %}
        <div class="homedisplay">
        {% page_widget widget object.episode diffusion=object timetable=True %}
        </div>
    {% else %}
        <div class="preview list-item logs">
            <div class="media d-block content recentdisplay" style="display:none !important;">
            {% for obj in object %}
            {% include "aircox/widgets/track_item.html" with object=obj.track log=obj timetable=True %}
            <br />
            {% endfor %}
            </div>
        </div>
    {% endif %}
    {% endfor %}

{% endwith %}
{% endwith %}
{% endblock %}
