{% extends "services/mumble/base.html" %}

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

{% block mumble %}
    <div class="text-center">
        <p>
            <img class="ra-avatar img-circle" src="{{ temp_user.templink.creator.portrait_url_128 }}" alt="{{ temp_user.templink.creator.character_name }}" />
        </p>

        <h4>
            {% blocktranslate with character=temp_user.templink.creator.character_name %}
                {{ character }} has invited you to join Mumble!
            {% endblocktranslate %}
        </h4>

        <p>
            {% translate "Time Remaining" %}: <span id="countdown{{ temp_user.templink.link_ref }}"></span>
        </p>
        <p>
            <span class="label label-info">{% translate "Link Ref" %}: {{ temp_user.templink.link_ref }}</span>
        </p>

        <p>
            <a class="btn btn-primary" href="mumble://{{ connect_url }}">
                <img src="{% static 'services/mumble/images/mumble-icon.png' %}" alt="{% translate 'Mumble' %}" height="64" width="64" style="margin: 15px" />

                <span style="margin: 15px;">
                    {% translate "Click to Join Mumble as" %}: <b>{{ temp_user.display_name }}</b>
                </span>
            </a>
        </p>

        <div class="row justify-content-center">
            <div class="col-md-10 col-lg-8">
                <div class="card">
                    <div class="card-header text-center">
                        <div class="card-title mb-0">{% translate "Manually Connect" %}</div>
                    </div>

                    <div class="card-body">
                        <p>
                            {% translate "If you have problems with the application link above, please use the following in Mumble's connection dialog." %}
                        </p>
                        <p>
                            {% translate "Mumble URL" %}: <span class="badge bg-dark">{{ mumble_url }}</span>
                        </p>
                        <p>
                            {% translate "Username" %}: <span class="badge bg-dark">{{ temp_user.username }}</span>
                        </p>
                        <p>
                            {% translate "Password" %}: <span class="badge bg-dark">{{ password }}</span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>

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

    <script>
        /* global moment */
        const locale = '{{ LANGUAGE_CODE }}';
        const timers = [{
            'id': '{{ temp_user.templink.link_ref }}',
            'targetDate': moment('{{ temp_user.templink.expires| date:"c" }}'),
            'expired': false
        }];

        moment.locale(locale);

        /**
         * Update a timer
         *
         * @param timer
         */
        const updateTimer = (timer) => {
            if (timer.targetDate.isAfter(Date.now())) {
                const duration = moment.duration(timer.targetDate - moment(), 'milliseconds');

                document.getElementById("countdown" + timer.id).innerHTML = getDurationString(duration);
            } else {
                timer.expired = true;

                document.getElementById("countdown" + timer.id).innerHTML = "";
            }
        };

        /**
         * Update all timers
         */
        const updateAllTimers = () => {
            const l = timers.length;

            for (let i = 0; i < l; ++i) {
                if (timers[i].expired) {
                    continue;
                }

                updateTimer(timers[i]);
            }
        };

        /**
         * Timed update
         */
        const timedUpdate = () => {
            updateAllTimers();
        };

        // Set initial values
        timedUpdate();

        // Start timed updates
        setInterval(timedUpdate, 1000);
    </script>
{% endblock mumble %}