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

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

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

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

{% block extra_title %}{{ information.count }} {% blocktranslate trimmed count count=information.count %}Speaker Information Note{% plural %}Speaker Information Notes{% endblocktranslate %} :: {% endblock extra_title %}

{% block content %}
    <h2>
        {{ information.count }}
        {% blocktranslate trimmed count count=information.count %}
            Speaker Information Note
        {% plural %}
            Speaker Information Notes
        {% endblocktranslate %}
        <span class="dialog-anchor" data-target="#info-dialog" data-toggle="dialog">
            <i class="fa fa-question-circle-o text-info"></i>
        </span>
    </h2>
    <dialog class="info-dialog" id="info-dialog">
        <div class="alert alert-info">
            {% blocktranslate trimmed %}
                Add important messages (e.g. “Please bring an HDMI adapter if required.”) or files (e.g. a conference styleguide).
                <br>
                They are shown to the selected speakers above the list of their submitted sessions.
            {% endblocktranslate %}
        </div>
    </dialog>
    <div class="d-flex justify-content-end mb-3"><span></span>
        <a href="{{ request.event.orga_urls.new_information }}" class="btn btn-info">
            <i class="fa fa-plus"></i>
            {% translate "Add a new note" %}
        </a>
    </div>
    <div class="table-responsive-md">
        <table class="table table-sm table-hover table-flip table-sticky">
            <thead>
                <tr>
                    <th>{% translate "Title" %}</th>
                    <th>{% translate "Target group" %}</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for info in information %}
                    <tr>
                        <td>
                            <a href="{{ info.orga_urls.edit }}">{{ info.title }}</a>
                            {% if info.resource %}<a href="{{ info.resource.url }}"><i class="fa fa-paperclip"></i></a>{% endif %}
                        </td>
                        <td>{{ info.target_group }}</td>
                        <td class="text-right">
                            <a href="{{ info.orga_urls.edit }}" class="btn btn-sm btn-info"><i class="fa fa-edit"></i></a>
                            <a href="{{ info.orga_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 %}
