{% extends 'opcalendar/base.html' %}
{% load static %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}
{% block title %}
Event Details
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        {% include "opcalendar/partials/event_details/navigation.html" %}
    </div>
    <div class="card-body">
        <h5 class="card-title">{{ event.title }}</h5>
        <h6 class="card-subtitle mb-2 text-muted">
            Created by: {{ event.eve_character }}<br>
            {% trans "Current Eve Time:" %} <strong class="label label-info text-left" id="current-time"></strong>
        </h6>
        {% include "opcalendar/partials/event_details/details.html" %}
    </div>
</div>

<div class="card" style="margin-top:10px;">
    <div class="card-header">
        {% include "opcalendar/partials/event_details/signups_navigation.html" %}
    </div>
    <div class="card-body">
        {% include "opcalendar/partials/event_details/signups.html" %}
    </div>
</div>

<div class="card" style="margin-top:10px;">
    <div class="card-header">
        Host Details
    </div>
    <div class="card-body">
        {% include "opcalendar/partials/event_details/host.html" %}
    </div>
</div>
{% if perms.opcalendar.create_event and not event.external %}
<div class="modal fade" id="opcalDeleteModal" tabindex="-1" aria-labelledby="opcalDeleteModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="opcalDeleteModalLabel">
                    <i class="fas fa-trash text-danger me-2"></i>{% trans "Remove Event" %}
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
            </div>
            <div class="modal-body">
                {% if event.repeat_group_id %}
                    <p>{% trans "This event is part of a repeat chain. What would you like to remove?" %}</p>
                    <div class="d-grid gap-2 mt-3">
                        <form method="post" action="{% url 'opcalendar:remove_event' event.id %}">
                            {% csrf_token %}
                            <input type="hidden" name="scope" value="single">
                            <button type="submit" class="btn btn-warning w-100">
                                <i class="fas fa-calendar-times me-2"></i>{% trans "Remove this event only" %}
                            </button>
                        </form>
                        <form method="post" action="{% url 'opcalendar:remove_event' event.id %}">
                            {% csrf_token %}
                            <input type="hidden" name="scope" value="all">
                            <button type="submit" class="btn btn-danger w-100">
                                <i class="fas fa-trash-alt me-2"></i>{% trans "Remove all events in this repeat chain" %}
                            </button>
                        </form>
                    </div>
                {% else %}
                    <p>{% trans "Are you sure you want to remove" %} <strong>{{ event.title }}</strong>?</p>
                    <p class="text-muted small mb-0">{% trans "This action cannot be undone." %}</p>
                {% endif %}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">
                    {% trans "Cancel" %}
                </button>
                {% if not event.repeat_group_id %}
                    <form method="post" action="{% url 'opcalendar:remove_event' event.id %}">
                        {% csrf_token %}
                        <input type="hidden" name="scope" value="single">
                        <button type="submit" class="btn btn-danger">
                            <i class="fas fa-trash me-1"></i>{% trans "Remove Event" %}
                        </button>
                    </form>
                {% endif %}
            </div>
        </div>
    </div>
</div>
{% endif %}

{% endblock %}
{% block extra_javascript %}
    {% include "bundles/moment-js.html" with locale=True %}
    {% include "bundles/timers-js.html" %}

    <script>
        const timers = [
                {
                    'id': {{ event.id }},
                    'targetDate': moment("{{ event.start_time | date:"c" }}"),
                    'expired': false
                },
        ];


        /**
         * Set the local time info for the timer
         * @param timer Timer information
         */
        const setLocalTime = (timer) => {
            document.getElementById("localtime" + timer.id).innerHTML = timer.targetDate.format("ddd @ LT");
        };

        /**
         * Set all local time fields
         */
        const setAllLocalTimes = () => {
            const l = timers.length;

            for (let i=0; i < l; ++i) {
                setLocalTime(timers[i]);
            }
        };

        const updateClock = () => {
            document.getElementById("current-time").innerHTML = getCurrentEveTimeString();
        };


        // Set initial values
        setAllLocalTimes();

    </script>
{% endblock extra_javascript %}