{% extends "admin_index.html" %}
{% from "macros.html" import render_form %}
{% block admin_title %}Topic - {{ topic.name }}{% endblock %}

{% block content %}
    <div class="mdl-cell mdl-cell--6-col mdl-cell--5-col-tablet mdl-cell--4-col-phone mdl-grid mdl-grid--no-spacing">
        <table class="mdl-data-table mdl-js-table mdl-shadow--2dp mdl-cell mdl-cell--12-col">
            <thead>
                <tr>
                    <th class="mdl-data-table__cell-non-numeric rede-large-text">{{ topic.name }}</th>
                    <th class="mdl-data-table__cell-non-numeric rede-medium-text" colspan=2>{{ topic.mode }}</th>
                    <th class="mdl-data-table__cell-non-numeric rede-medium-text"><a href="{{ url_for(".topic_edit", id=topic.id) }}"><i class="material-icons">edit</i></a></th>
                </tr>
                <tr>
                    <th class="mdl-data-table__cell--non-numeric">Speaker</th>
                    <th class="mdl-data-table__cell">Count</th>
                    <th class="mdl-data-table__cell--non-numeric">Done</th>
                    <th class="mdl-data-table__cell--non-numeric">Edit</th>
                    <th class="mdl-data-table__cell--non-numeric">Remove</th>
                </tr>
            </thead>
            <tbody>
            {% for statement in topic.sorted_statements() %}
                {% if statement.is_meta %}
                <tr class="rede-table-bg-red">
                {% else %}
                <tr>
                {% endif %}
                    <td class="mdl-data-table__cell--non-numeric">{{ statement.speaker.identifier() }}</td>
                    <td class="mdl-data-table__cell">{{ statement.speaker.count(statement.topic) }}</td>
                    <td class="mdl-data-table__cell--non-numeric">
                        <a href="{{ url_for(".statement_done", id=statement.id, topic_id=topic.id) }}">
                            <i class="material-icons">done</i>
                        </a>
                    </td>
                    <td class="mdl-data-table__cell--non-numeric">
                        <a href="{{ url_for(".speaker_edit", id=statement.speaker.id, topic_id=topic.id) }}">
                            <i class="material-icons">edit</i>
                        </a>
                    </td>
 
                    <td class="mdl-data-table__cell--non-numeric">
                        <a href="{{ url_for('.statement_delete', id=statement.id, topic_id=topic.id) }}">
                            <i class="material-icons">cancel</i>
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
    <div class="mdl-separator rede-separator"></div>
    <div class="mdl-cell mdl-cell--3-col mdl-cell--3-col-tablet mdl-cell--4-col-phone mdl-grid mdl-grid--no-spacing">
        {{ render_form(form, action_url=url_for(".statement_new"), action_text="Add", title="Add Statement", class_="mdl-card mdl-shadow--2dp mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone", btn_list=[("","Add Statement","add_statement"),  ("mdl-button--colored","Add Meta","add_meta_statement")] ) }}
        <div class="mdl-cell mdl-card mdl-shadow--2dp mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone">
            <ul class="rede-list-no-bullet">
                {% if topic.sorted_statements()|length() > 0 %}
                <li>
                    <a href="{{ url_for(".statement_done", id=topic.sorted_statements()[0].id, topic_id=topic.id) }}" class="rede-href"><i class="material-icons" role="presentation">redo</i> Next</a>
                </li>
                {% endif %}
                <li><a href="{{ url_for(".statement_undo", topic_id=topic.id) }}" class="rede-href"><i class="material-icons" role="presentation">undo</i> Previous</a></li>
                <li><a href="{{ url_for(".topic_show", id=topic.get_next_index()) }}"><i class="material-icons">arrow_forward</i> Next Topic</a></li>
                <li><a href="{{ url_for(".topic_show", id=topic.get_previous_index()) }}"><i class="material-icons">arrow_backward</i>Previous Topic</a></li>
                <li>
                    <form action="{{ url_for(".pause", id=topic.event.id, original=topic.id) }}" method="POST">
                        <button class="mdl-button">
                            {% if topic.event.paused %}
                            <i class="material-icons">play_arrow</i>
                            Resume
                            {% else %}
                            <i class="material-icons">pause</i>
                            Pause
                            {% endif %}
                        </button>
                        {% if not topic.event.paused %}
                        <input name="timeslider" class="mdl-slider mdl-js-slider" type="range" min="0" max="3600" value="300" step="30" onchange="settimesliderresult(this);">
                        <script>
                        function settimesliderresult(slider) {
                            var div = document.getElementById("timesliderresult");
                            var time = slider.value;
                            var text = "";
                            if (Math.floor(time / 3600) > 0) {
                                text += Math.floor(time / 3600) + "h";
                                time %= 3600;
                            }
                            if (Math.floor(time / 60) > 0) {
                                text += Math.floor(time / 60) + "m";
                                time %= 60;
                            }
                            text += time + "s";
                            div.innerHTML = text;
                        }
                        </script>
                        <div id="timesliderresult"></div>
                        {% endif %}
                </li>
            </ul>
        </div>
    </div>
    <div class="mdl-cell mdl-cell--3-col mdl-cell--3-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title">
            <h4 class="mdl-card__title-text">Topics</h4>
        </div>
        <table>
        {% for t in topics %}
            <tr class="{% if t == topic %}rede-list-point-big{% else %}rede-list-point-normal{% endif %}">
                <td>
                    {% if t != topics[0] %}
                    <a href="{{ url_for(".topic_swap_up", id=t.id, original=topic.id) }}"><i class="material-icons">keyboard_arrow_up</i></a>
                    {% endif %}
                </td>
                <td>
                    {{ t.name }}
                </td>
                <td>
                    {% if t != topics[-1] %}
                    <a href="{{ url_for(".topic_swap_down", id=t.id, original=topic.id) }}"><i class="material-icons">keyboard_arrow_down</i></a>
                    {% endif %}
                </td>
            <tr>
        {% endfor %}
        </table>
    </div>
    {% if topic.event.paused %}
    <div class="mdl-cell mdl-cell--12-col mdl-cell--8-col-tablet mdl-cell--4-col-phone mdl-card mdl-shadow--2dp">
        <div class="mdl-card__title rede-paused-title">
            <h4 class="mdl-card__title-text rede-paused-title-text">
                Paused until {{ topic.event.paused_until.strftime("%H:%M") }}
            </h4>
        </div>
    </div>
    {% endif %}
{% endblock %}