{% extends 'AKSubmission/submission_base.html' %}

{% load i18n %}
{% load fontawesome_5 %}
{% load tz %}

{% load tags_AKSubmission %}
{% load tags_AKModel %}


{% block title %}{{ ak.name }} ({{ ak.event.name }}) {% endblock %}

{% block meta %}
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="{{ak.name}} ({{ak.event.name }})" />
    <meta name="twitter:description" content="{{ ak.description }}" />
{% endblock %}

{% block breadcrumbs %}
    {% include "AKSubmission/submission_breadcrumbs.html" %}
    <li class="breadcrumb-item"><a
            href="{% url 'submit:submission_overview' event_slug=ak.event.slug %}">{% trans "AK Submission" %}</a></li>
    <li class="breadcrumb-item active">{{ ak.name }}</li>
{% endblock %}

{% if 'AKPlan'|check_app_installed %}
    {% block imports %}
        {% include "AKPlan/plan_akslot.html" %}

        <script>
            document.addEventListener('DOMContentLoaded', function () {
                // CSRF Protection/Authentication
                function getCookie(name) {
                    let cookieValue = null;
                    if (document.cookie && document.cookie !== '') {
                        const cookies = document.cookie.split(';');
                        for (let i = 0; i < cookies.length; i++) {
                            const cookie = cookies[i].trim();
                            // Does this cookie string begin with the name we want?
                            if (cookie.substring(0, name.length + 1) === (name + '=')) {
                                cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                                break;
                            }
                        }
                    }
                    return cookieValue;
                }

                const csrftoken = getCookie('csrftoken');

                function csrfSafeMethod(method) {
                    // these HTTP methods do not require CSRF protection
                    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
                }

                $.ajaxSetup({
                    beforeSend: function (xhr, settings) {
                        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                            xhr.setRequestHeader("X-CSRFToken", csrftoken);
                        }
                    }
                });

                function indicate_interest(ak_id, btn) {
                    $.ajax({
                           url: "{% url "model:AK-list" event_slug=event.slug %}" + ak_id + "/indicate-interest/",
                            type: 'POST',
                            data: {
                            },
                            success: function (response) {
                               btn.html('{% fa5_icon 'check' 'fas' %}');
                               btn.off('click');
                               $('#interest-counter').html(response.interest_counter);
                            },
                            error: function (response) {
                               if(response.status === 403)
                                    alert("{% trans 'Interest indication currently not allowed. Sorry.' %}");
                               else
                                   alert("{% trans 'Could not save your interest. Sorry.' %}");
                            }
                       });
                }

                // Update counter
                $('#btn-indicate-interest').click(function () {
                    indicate_interest({{ ak.pk }}, $(this));
                });
            });
        </script>

    {% endblock %}
{% endif %}

{% block content %}
    {% include "messages.html" %}

    <div class="text-right">
        {% if ak.interest_counter >= 0 %}
            {% if ak.event.active and interest_indication_active %}
                {% trans 'Interest' %}: <b class='mx-1 text-muted' id="interest-counter">{{ ak.interest_counter }}</b>
                <a href="#" data-toggle="tooltip"
                   title="{% trans 'Show Interest' %}"
                   class="btn btn-primary" id="btn-indicate-interest">{% fa5_icon 'thumbs-up' 'fas' %}</a>
            {% endif %}
        {% endif %}
        {% if ak.link != "" %}
            <a href="{{ ak.link }}" data-toggle="tooltip"
               title="{% trans 'Open external link' %}"
               class="btn btn-info">{% fa5_icon 'external-link-alt' 'fas' %}</a>
        {% endif %}
        {% if ak.protocol_link != "" %}
            <a href="{{ ak.protocol_link }}" data-toggle="tooltip"
               title="{% trans 'Open protocol link' %}"
               class="btn btn-warning">{% fa5_icon 'file-alt' 'far' %}</a>
        {% endif %}
        <a href="{% url 'submit:ak_history' event_slug=ak.event.slug pk=ak.pk %}"
           data-toggle="tooltip"
           title="{% trans 'History' %}" class="btn btn-light">{% fa5_icon 'clock' 'fas' %}</a>
        {% if ak.event.active %}
            <a href="{% url 'submit:akmessage_add' event_slug=ak.event.slug pk=ak.pk %}" data-toggle="tooltip"
               title="{% trans 'Add confidential message to organizers' %}"
               class="btn btn-warning">{% fa5_icon 'envelope' 'fas' %}</a>
            <a href="{% url 'submit:ak_edit' event_slug=ak.event.slug pk=ak.pk %}" data-toggle="tooltip"
               title="{% trans 'Edit' %}"
               class="btn btn-success">{% fa5_icon 'pencil-alt' 'fas' %}</a>
        {% endif %}
    </div>

    <h2>{% if ak.wish %}{% trans "AK Wish" %}: {% endif %}{{ ak.name }}</h2>

    {# Show current or upcoming slot featured in a box on top of the plage #}
    {% if featured_slot_type != "NONE" %}
        <div class="card border-success mt-3 mb-3">
            <div class="card-body font-weight-bold">
                {% if featured_slot_type == "CURRENT" %}
                    {% blocktrans with room=featured_slot.room %}
                        This AK currently takes place for another {{ featured_slot_remaining }} minute(s) in {{ room }}.
                        &nbsp;
                    {% endblocktrans %}

                {% elif featured_slot_type == "UPCOMING" %}
                    {% blocktrans with room=featured_slot.room %}
                        This AK starts in {{ featured_slot_remaining }} minute(s) in {{ room }}.&nbsp;
                    {% endblocktrans %}
                {% endif %}

                {% if "AKOnline"|check_app_installed and featured_slot.room.virtualroom and featured_slot.room.virtualroom.url != '' %}
                    <a class="btn btn-success" target="_parent" href="{{ featured_slot.room.virtualroom.url }}">
                        {% fa5_icon 'external-link-alt' 'fas' %} {% trans "Go to virtual room" %}
                    </a>
                {% endif %}
            </div>
        </div>
    {% endif %}

    <table class="table table-borderless">
        <tr>
            <td>{% trans "Who?" %}</td>
            <td>
                {% include "AKSubmission/owners_list.html" with owners=ak.owners %}
            </td>
        </tr>
        <tr>
            <td>{% trans 'Category' %}</td>
            <td>
                {% category_linked_badge ak.category ak.event.slug %}
            </td>
        </tr>
        {% if ak.track %}
            <tr>
                <td>{% trans 'Track' %}</td>
                <td>{{ ak.track }}</td>
            </tr>
        {% endif %}
        {% if not ak.wish %}
            <tr>
                <td>{% trans "Present this AK" %}</td>
                <td>
                    {% if ak.present != None %}
                        {{ ak.present | bool_symbol }}
                    {% else %}
                        {{ ak.category.present_by_default | bool_symbol }} <span class="text-muted">{% trans "(Category Default)" %}</span>
                    {% endif %}
                </td>
            </tr>
        {% endif %}
        <tr>
            <td>{% trans "Tags" %}</td>
            <td>
                {% tag_list ak.tags.all ak.event.slug %}
            </td>
        </tr>
        <tr>
            <td>{% trans "Reso intention?" %}</td>
            <td>
                {{ ak.reso | bool_symbol }}
            </td>
        </tr>
        {% if ak.requirements.count > 0 %}
            <tr>
                <td>{% trans "Requirements" %}</td>
                <td>
                    {% for requirement in ak.requirements.all %}
                        {% if forloop.counter0 > 0 %}
                            ,&nbsp;
                        {% endif %}
                        {{ requirement }}
                    {% endfor %}
                </td>
            </tr>
        {% endif %}
        {% if ak.conflicts.count > 0 %}
            <tr>
                <td>{% trans "Conflicting AKs" %}</td>
                <td>
                    {% include "AKSubmission/ak_linked_list_inline.html" with aks=ak.conflicts slug=ak.event.slug %}
                </td>
            </tr>
        {% endif %}
        {% if ak.prerequisites.count > 0 %}
            <tr>
                <td>{% trans "Prerequisite AKs" %}</td>
                <td>
                    {% include "AKSubmission/ak_linked_list_inline.html" with aks=ak.prerequisites slug=ak.event.slug %}
                </td>
            </tr>
        {% endif %}
        {% if ak.notes %}
            <tr>
                <td>{% trans "Notes" %}</td>
                <td>{{ ak.notes }}</td>
            </tr>
        {% endif %}
    </table>

    <p style="margin-top: 30px;margin-bottom: 30px;">{{ ak.description|linebreaks }}</p>

    {% if not ak.wish %}
        <table class="table">
            <thead>
            <tr>
                {% if not ak.event.plan_hidden or user.is_staff %}
                    <th>{% trans "When?" %}</th>
                {% endif %}
                <th>{% trans "Duration" %}</th>
                {% if not ak.event.plan_hidden or user.is_staff %}
                    <th>{% trans "Room" %}</th>
                {% endif %}
                <th></th>
            </tr>
            </thead>
            <tbody>
            {% for slot in ak.akslot_set.all %}
                <tr>
                    {% if not ak.event.plan_hidden or user.is_staff %}
                        <td>{{ slot.time_simplified }}</td>
                    {% endif %}
                    <td>{{ slot.duration_simplified }}</td>
                    {% if not ak.event.plan_hidden or user.is_staff %}
                        <td>
                            {% if slot.room %}
                                {% if "AKPlan"|check_app_installed %}
                                    <a href="{% url 'plan:plan_room' event_slug=ak.event.slug pk=slot.room.pk %}">{{ slot.room }}</a>
                                {% else %}
                                    {{ slot.room }}
                                {% endif %}
                            {% else %}
                                -
                            {% endif %}
                        </td>
                    {% endif %}
                    <td>
                        {% if not slot.start %}
                            <a href="{% url 'submit:akslot_edit' event_slug=ak.event.slug pk=slot.pk %}"
                               data-toggle="tooltip" title="{% trans 'Edit' %}"
                               class="btn btn-success">{% fa5_icon 'pencil-alt' 'fas' %}</a>
                            <a href="{% url 'submit:akslot_delete' event_slug=ak.event.slug pk=slot.pk %}"
                               data-toggle="tooltip" title="{% trans 'Delete' %}"
                               class="btn btn-danger">{% fa5_icon 'times' 'fas' %}</a>
                        {% else %}
                            {% if "AKOnline"|check_app_installed and slot.room and slot.room.virtualroom and slot.room.virtualroom.url != '' %}
                                <a class="btn btn-success" href="{{ slot.room.virtualroom.url }}">
                                    {% fa5_icon 'external-link-alt' 'fas' %} {% trans "Go to virtual room" %}
                                </a>
                            {% endif %}
                        {% endif %}
                        {% if user.is_staff %}
                            <a href="{% url 'admin:AKModel_akslot_change' slot.pk %}"
                               data-toggle="tooltip" title="{% trans 'Schedule' %}"
                               class="btn btn-outline-success">{% fa5_icon 'stream' 'fas' %}</a>
                        {% endif %}
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>

        {% if ak.event.active %}
            <div class="">
                <a href="{% url 'submit:akslot_add' event_slug=ak.event.slug pk=ak.pk %}"
                   class="btn btn-success">{% fa5_icon 'plus' 'fas' %} {% trans "Add another slot" %}</a>
            </div>
        {% endif %}


        {% if 'AKPlan'|check_app_installed %}
            <div id='akSlotCalendar' style="margin-top: 50px;margin-bottom: 50px;"></div>
        {% endif %}


        <h4 style="margin-top: 30px;">{% trans "Possible Times" %}</h4>
        <table class="table">
            <thead>
            <tr>
                <th>{% trans "Start" %}</th>
                <th>{% trans "End" %}</th>
            </tr>
            </thead>
            <tbody>
            {% for a in availabilities %}
                <tr>
                    <td>{{ a.start | timezone:event.timezone | date:"l H:i"  }}</td>
                    <td>{{ a.end | timezone:event.timezone | date:"l H:i" }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    {% endif %}

{% endblock %}