{% if genres.items %}
<div class="widget">
    <form method="get" action="" class="link-list date-list--featured" id="news-category-filter">
        <fieldset class="widget-filter--events">
            <div class="form__cell form__cell--50">
                <legend class="alone-title">Filtrar programas por gênero:</legend>
            </div>
            <div class="form__cell form__cell--50">
                <select name="genero" id="newscategory" class="select">
                    <option value="">Selecione um gênero</option>
                        {% for genre in genres.items %}
                            <option value="{{ genre.id }}" {{ genre.id == genero ? 'selected' : '' }}>{{ genre.name }}</option>
                        {% endfor %}
                </select>
            </div>
        </fieldset>
    </form>
</div>
{% endif %}

{% if highlight %}
    <div class="widget widget--radioprogramming">
        <p class="title--centaurus">Plantão Rádio UFMG Educativa</p>
        <div class="radioprogramming radioprogramming--alert">
            <div class="radioprogramming-content">
                <article class="radioprogramming-item">
                    <div class="wrapper">
                        <div class="hour"><span><i class="icon--exclamacao"></i></span></div>
                        <div class="img">
                            <a class="live" href="#" onclick="radiopopup();return false;">
                                <img src="{{ highlight.items[0].image.url }}" alt="">
                                <span>ao vivo</span>
                                <i class="icon--player"></i>
                            </a>
                        </div>
                        <div class="desc">
                            <p class="title"><a href="">{{ highlight.items[0].title }}</a></p>
                            <p class="schedules">{{ highlight.items[0].description|slice(0, 78) }}</p>
                        </div>
                        <a class="accordion" href=""></a>
                    </div>
                    <div class="radioprogramming-description">
                        <p>{{ highlight.items[0].description }}</p>
                    </div>
                </article>
            </div>
        </div>
    </div>
{% endif %}

<div class="widget widget--radioprogramming">
    <p class="title--centaurus">Grade de programação</p>
    <div class="radioprogramming grid-mode">
        <div class="radioprogramming-header">
            <div class="left">
                <p class="date">{{ today }}</p>
            </div>
            <div class="right">
                <ol>
                    <li>
                        <a href="#" onclick="radiopopup();return false;" class="button  button--blue  button--large  button--icon">
                            <span class="icon--signal-tower"></span>No ar
                        </a>
                    </li>
                    <li>
                        <a href="#" id="radioprogramming-view-mode" data-label-grid="Toda a grade" data-label-table="Grade semanal" class="button  button--blue  button--large button--icon">
                            <span class="icon--grid"></span><i>Toda a grade</i>
                        </a>
                    </li>
                </ol>
            </div>
        </div>
    </div>

    {% set program = program_grid(programs) %}
    {% set dayOfWeek = date('w') %}

    <div class="radioprogramming-grid">
        <ol class="radioprogramming-tab">
            <li {% if dayOfWeek == 0 %} class="active" {% endif %}><a class="tab" href="#sunday-content">Dom</a></li>
            <li {% if dayOfWeek == 1 %} class="active" {% endif %}><a class="tab" href="#monday-content">Seg</a></li>
            <li {% if dayOfWeek == 2 %} class="active" {% endif %}><a class="tab" href="#tuesday-content">Ter</a></li>
            <li {% if dayOfWeek == 3 %} class="active" {% endif %}><a class="tab" href="#wednesday-content">Qua</a></li>
            <li {% if dayOfWeek == 4 %} class="active" {% endif %}><a class="tab" href="#thursday-content">Qui</a></li>
            <li {% if dayOfWeek == 5 %} class="active" {% endif %}><a class="tab" href="#friday-content">Sex</a></li>
            <li {% if dayOfWeek == 6 %} class="active" {% endif %}><a class="tab" href="#saturday-content">Sáb</a></li>
        </ol>
        <div class="radioprogramming-content">
            {% if program.program_grid %}
                {{ program.program_grid|raw }}
            {% endif %}
        </div>
    </div>

    <div style="display:none;" class="radioprogramming-table">
        <div class="table-block">
            <a class="table-title drop__link  drop__link--accordion" href="">Manhã</a>
            <div class="drop__list  drop__list--depth-2">
                {% if program.program_table.manha %}
                <table>
                    <thead>
                    <tr>
                        <th width="10%"></th>
                        <th width="12%">Dom</th>
                        <th width="12%">Seg</th>
                        <th width="12%">Ter</th>
                        <th width="12%">Qua</th>
                        <th width="12%">Qui</th>
                        <th width="12%">Sex</th>
                        <th width="12%">Sáb</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{ program.program_table.manha|raw }}
                    </tbody>
                </table>
                {% endif %}
            </div>
        </div>
        <div class="table-block">
            <a class="table-title drop__link  drop__link--accordion" href="">Tarde</a>
            <div class="drop__list  drop__list--depth-2">
                {% if program.program_table.tarde %}
                <table>
                    <thead>
                    <tr>
                        <th width="10%"></th>
                        <th width="12%">Dom</th>
                        <th width="12%">Seg</th>
                        <th width="12%">Ter</th>
                        <th width="12%">Qua</th>
                        <th width="12%">Qui</th>
                        <th width="12%">Sex</th>
                        <th width="12%">Sáb</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{ program.program_table.tarde|raw }}
                    </tbody>
                </table>
                {% endif %}
            </div>
        </div>
        <div class="table-block">
            <a class="table-title drop__link  drop__link--accordion" href="">Noite</a>
            <div class="drop__list  drop__list--depth-2">
                {% if program.program_table.noite %}
                <table>
                    <thead>
                    <tr>
                        <th width="10%"></th>
                        <th width="12%">Dom</th>
                        <th width="12%">Seg</th>
                        <th width="12%">Ter</th>
                        <th width="12%">Qua</th>
                        <th width="12%">Qui</th>
                        <th width="12%">Sex</th>
                        <th width="12%">Sáb</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{ program.program_table.noite|raw }}
                    </tbody>
                </table>
                {% endif %}
            </div>
        </div>
    </div>
</div>