{% extends "orga/base.html" %}

{% load i18n %}
{% load static %}
{% load samaware_extras %}

{% block stylesheets %}
{# Order of the stylesheets is relevent here (the later, the more precedence) #}
<link rel="stylesheet" href="{% static 'orga/css/ui/dashboard.css' %}">
<link rel="stylesheet" href="{% static 'samaware/samaware.css' %}">
{% endblock stylesheets %}

{% block scripts %}
<script src="{% static 'samaware/vendor/htmx.min.js' %}"></script>
{% endblock scripts %}

{% block extra_title %}{% translate 'Dashboard' %} :: SamAware :: {% endblock extra_title %}

{% block content %}

<h2>SamAware {% translate 'Dashboard' %}</h2>

<article class="dashboard-list">
    <h3 class="sr-only">{% translate 'Status Overview' %}</h3>

    <div class="dashboard-block-wrapper">
        <div class="dashboard-block">
            <h1>{{ arrived_speakers.count }} / {{ total_speakers.count }}</h1>
            <div class="dashboard-description">
                {% translate 'speakers arrived' %}
            </div>
        </div>
    </div>
    <div class="dashboard-block-wrapper">
        <a href="{% url 'plugins:samaware:missing_speakers' event=request.event.slug %}?upcoming=on" class="dashboard-block dashboard-block-{{ slots_missing_speakers.count | count_class }}">
            <h1>{{ slots_missing_speakers.count }}</h1>
            <div class="dashboard-description">
                {% translate 'talks missing speakers in the next 4 hours' %}
            </div>
        </a>
    </div>
    <div class="dashboard-block-wrapper">
        <a href="{% url 'orga:schedule.release' event=request.event.slug %}" class="dashboard-block dashboard-block-{{ unreleased_changes.count | count_class }}">
            <h1>{{ unreleased_changes.count }}</h1>
            <div class="dashboard-description">
                {% translate 'unreleased schedule changes' %}
            </div>
        </a>
    </div>
    <div class="dashboard-block-wrapper">
        <a href="{% url 'plugins:samaware:care_message_list' event=request.event.slug %}" class="dashboard-block">
            <h1>{{ speaker_care_messages.count }}</h1>
            <div class="dashboard-description">
                {% translate 'speaker care messages' %}
            </div>
        </a>
    </div>
    <div class="dashboard-block-wrapper">
        <a href="{% url 'plugins:samaware:tech_rider_list' event=request.event.slug %}" class="dashboard-block dashboard-block-extended">
            <h1>{{ tech_riders.count }}</h1>
            <div class="dashboard-description">
                {% translate 'tech riders' %}
            </div>
        </a>
        <div class="dashboard-block-extension">
            <a href="{% url 'plugins:samaware:tech_rider_list' event=request.event.slug %}?upcoming=on" class="dashboard-block-addon dashboard-block-addon-info">
                {% translate 'next 4 hours' %}: {{ tech_riders_4h.count }}
            </a>
        </div>
    </div>
    <div class="dashboard-block-wrapper">
        <a href="{% url 'plugins:samaware:no_recording' event=request.event.slug %}" class="dashboard-block dashboard-block-extended">
            <h1>{{ no_recording_slots.count }}</h1>
            <div class="dashboard-description">
                {% translate 'talks without recording' %}
            </div>
        </a>
        <div class="dashboard-block-extension">
            <a href="{% url 'plugins:samaware:no_recording' event=request.event.slug %}?upcoming=on" class="dashboard-block-addon dashboard-block-addon-info">
                {% translate 'next 4 hours' %}: {{ no_recording_slots_4h.count }}
            </a>
            <a href="{% url 'plugins:samaware:no_recording' event=request.event.slug %}?no_rider=on" class="dashboard-block-addon dashboard-block-addon-{{ no_recording_no_rider_slots.count | count_class }}">
                {% translate 'without tech rider' %}: {{ no_recording_no_rider_slots.count }}
            </a>
        </div>
    </div>
</article>

<article class="mt-3">
    <h3 class="sr-only">{% translate 'Talk Search' %}</h3>

    <noscript>
        <div class="alert alert-danger" role="alert">
            {% blocktranslate trimmed %}
            Search requires JavaScript to be enabled.
            {% endblocktranslate %}
        </div>
    </noscript>

    <input type="search" name="query" class="mt-3 mb-3" placeholder="{% translate 'Type to search for talks or speakers' %}"
           hx-get="{% url 'plugins:samaware:search_fragment' event=request.event.slug %}"
           hx-trigger="load, input changed delay:300ms, keyup[key=='Enter']" hx-target="#samaware-search-results" />

    <div class="table-responsive">
        <table class="table-sticky">
            <thead>
                <tr>
                    <th>
                    </th>
                    <th>
                        {% translate 'Title' %}
                    </th>
                    <th>
                        {% translate 'Speakers' %}
                    </th>
                    <th>
                        {% translate 'Start' %}
                    </th>
                    <th>
                        {% translate 'Room' %}
                    </th>
                </tr>
            </thead>
            <tbody id="samaware-search-results">
            </tbody>
        </table>
    </div>
</article>

{% endblock content %}