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

{% load compress %}
{% load i18n %}
{% load static %}

{% block extra_title %}{% translate "Tracks" %} :: {% endblock extra_title %}

{% block stylesheets %}
    {% compress css %}
        <link rel="stylesheet" href="{% static "common/css/dialog.css" %}">
        <link rel="stylesheet" href="{% static "orga/css/dragsort.css" %}">
    {% endcompress %}
{% endblock stylesheets %}

{% block scripts %}
    {% compress js %}
        <script defer src="{% static "common/js/modalDialog.js" %}"></script>
        <script defer src="{% static "orga/js/dragsort.js" %}"></script>
    {% endcompress %}
{% endblock scripts %}

{% block content %}
    <h2>
        {% translate "Tracks" %}
        <span class="dialog-anchor" data-target="#info-dialog" data-toggle="dialog">
            <i class="fa fa-question-circle-o text-info"></i>
        </span>
    </h2>
    <dialog id="info-dialog">
        <div class="alert alert-info">
            {% blocktranslate trimmed %}
                Tracks are used to sort your sessions into categories. You can use the
                CfP settings to determine if speakers can select the track for their session
                themselves. Track colors are helpful to help attendees navigate your schedule.
            {% endblocktranslate %}
        </div>
    </dialog>
    <div class="d-flex justify-content-end mb-3">
        <a class="btn btn-info" href="{{ request.event.cfp.urls.new_track }}">
            <i class="fa fa-plus"></i>
            {% translate "New track" %}
        </a>
    </div>
    <div class="table-responsive-sm">
        <table class="table table-sm table-hover table-flip table-sticky">
            <thead>
                <tr>
                    <th>{% translate "Track" %}</th>
                    <th>{% translate "Color" %}</th>
                    <th class="numeric">{% translate "Proposals" %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody dragsort-url="{{ request.cfp.urls.tracks }}">
                {% for track in tracks %}
                    <tr dragsort-id="{{ track.id }}">
                        <td>
                            <a href="{{ track.urls.edit }}">{{ track.name }}</a>
                            {% if track.requires_access_code %}
                                <i class="fa fa-lock ml-1" title="{% translate "Requires access code" %}"></i>
                            {% endif %}
                        </td>
                        <td>
                            <div class="color-square" style="background: {{ track.color }}"></div>
                        </td>
                        <td class="numeric">
                            <a href="{{ request.event.orga_urls.submissions }}?track={{ track.id }}">{{ track.submissions.all.count }}</a>
                        </td>
                        <td class="text-right">
                            <button draggable="true" class="btn btn-sm btn-primary mr-1 dragsort-button" title="{% translate "Move item" %}">
                                <i class="fa fa-arrows"></i>
                            </button>
                            <a href="{{ track.urls.prefilled_cfp.full }}"
                               title="{% translate "Go to pre-filled CfP form" %}"
                               class="btn btn-sm btn-info">
                                <i class="fa fa-link"></i>
                            </a>
                            <a href="{{ track.urls.edit }}" class="btn btn-sm btn-info">
                                <i class="fa fa-edit"></i>
                            </a>
                            <a href="{{ track.urls.delete }}" class="btn btn-sm btn-danger">
                                <i class="fa fa-trash"></i>
                            </a>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>

    {% include "orga/includes/pagination.html" %}

{% endblock content %}
