{% extends 'mumbletemps/base.html' %}
{% load i18n %}
{% load humanize %}
{% load static %}
{% load timetags %}

{% block create %}
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-warning">
                <div class="panel-heading">
                    <div class="panel-title">Mumble Links</div>
                </div>

                <div class="panel-body text-center">
                    <p>Temp Links Give Access to mumble with the <b class="text-success">Guest</b> Group for the preset time</p>
                    <p>Connected users <b class="text-warning">will not</b> be kicked at the end of this time period</p>
                    <p>Templink users can be kicked in mumble by typing <span class="badge badge-danger text-warning">!kicktemps</span> in mumble chat</p>
                    <p>There are <b class="text-warning">no restrictions</b> on who or how many can use a templink, share wisely.</p>
                </div>
            </div>
        </div>

        <div class="col-md-6">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">Create New Link</div>
                </div>
                <div class="panel-body text-center">
                    <p>Your link will be displayed on the next page for easy copy and paste</p>
                    <form action="/mumbletemps/" method="post">
                        {% csrf_token %}
                        <label for="time">Duration (hours)</label>
                        <select class="form-control" name="time">
                            <option value="3">3</option>
                            <option value="6">6</option>
                            <option value="12">12</option>
                            <option value="24">24</option>
                        </select>
                        <br>
                        <input class="btn btn-primary col-md-12" type="submit" value="OK">
                    </form>
                </div>
            </div>
        </div>
    </div>

    {% if tl %}
        <div class="row">
            <div class="col-md-12">
                <div class="panel panel-success">
                    <div class="panel-heading">
                        <div class="panel-title">New Link</div>
                    </div>
                    <div class="panel-body text-center" style="min-height: 100px;">
                        <p>Expires in: <span id="countdown{{ tl.link_ref }}hot"></span></p>
                        <pre>{{ request.scheme }}://{{ request.get_host }}{% url 'mumbletemps:join' tl.link_ref %}</pre>
                        <button class="btn btn-info col-md-12" id="clipboard-new" data-clipboard-text="{{ request.scheme }}://{{request.get_host}}{% url 'mumbletemps:join' tl.link_ref %}">Copy to Clipboard!</button>
                    </div>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="row">
        <div class="col-md-12">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <div class="panel-title">Current Links</div>
                </div>
                <div class="panel-body">
                    <table class="table table-striped table-hover">
                        <thead>
                        <th>Creator</th>
                        <th>Key</th>
                        <th>Time Left</th>
                        <th class="text-center">Copy</th>
                        <th class="text-center">Nuke</th>
                        </thead>

                        <tbody>
                        {% for lnk in tl_list %}
                            <tr>
                                <td class="valign-middle">
                                    <img class="ra-avatar img-rounded" src="{{ lnk.creator.portrait_url_32 }}" alt="{{ lnk.creator.character_name }}">
                                    {{ lnk.creator.character_name }}
                                </td>
                                <td class="valign-middle">{{ lnk.link_ref }}</td>
                                <td class=valign-middle" id="countdown{{ lnk.link_ref }}"></td>
                                <td class="text-center valign-middle"><button class="btn btn-info" id="clipboard-{{ lnk.link_ref }}" data-clipboard-text="{{ request.scheme }}://{{ request.get_host }}{% url 'mumbletemps:join' lnk.link_ref %}">Copy to Clipboard!</button></td>
                                <td class="text-center valign-middle"><a class="btn btn-danger" href="{% url 'mumbletemps:nuke' lnk.link_ref %}">Nuke Link!</a></td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
            {% if ex_tl_list.count > 0 %}
                <div class="panel panel-primary">
                    <div class="panel-heading">
                        <div class="panel-title">Expired Links</div>
                    </div>
                    <div class="panel-body">
                        <table class="table table-striped table-hover">
                            <thead>
                            <th>Creator</th>
                            <th>Key</th>
                            <th class="text-center">Nuke</th>
                            </thead>

                            <tbody>
                            {% for lnk in ex_tl_list %}
                                <tr>
                                    <td class="valign-middle">
                                        <img class="ra-avatar img-rounded" src="{{ lnk.creator.portrait_url_32 }}" alt="{{ lnk.creator.character_name }}">
                                        {{ lnk.creator.character_name }}
                                    </td>
                                    <td class="valign-middle">{{ lnk.link_ref }}</td>
                                    <td class="text-center"><a class="btn btn-danger" href="{% url 'mumbletemps:nuke' lnk.link_ref %}">Nuke Link!</a></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            {% endif %}
        </div>
    </div>
{% endblock %}

{% block extra_javascript %}
    {% include 'bundles/clipboard-js.html' %}
    {% include 'bundles/moment-js.html' with locale=True %}

    <script src="{% static 'js/timers.js' %}"></script>

    <script>
        let clipboard = new ClipboardJS('#clipboard-new');

        {% for lnk in tl_list %}
            let lnk{{ lnk.link_ref }} = new ClipboardJS('#clipboard-{{ lnk.link_ref }}');
        {% endfor %}
    </script>

    <script type="text/javascript">
        let locale = '{{ LANGUAGE_CODE }}';

        let timers = [
            {% for lnk in tl_list %}
                {
                    id: '{{ lnk.link_ref }}',
                    targetDate: moment('{{ lnk.expires|print_timestamp| date:"c" }}'),
                    expired: false
                },
            {% endfor %}

            {% if tl %}
                {
                    id: '{{ tl.link_ref }}hot',
                    targetDate: moment('{{ tl.expires|print_timestamp| date:"c" }}'),
                    expired: false
                },
            {% endif %}
        ];

        moment.locale(locale);

        /**
         * Update a timer
         * @param timer Timer information
         * @param timer.targetDate Date of the timer
         * @param timer.id Id number of the timer
         * @param timer.expired
         */
        function updateTimer(timer) {
            if (timer.targetDate.isAfter(Date.now())) {
                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 = '';
            }
        }

        function updateAllTimers () {
            let l = timers.length;

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

                updateTimer(timers[i]);
            }
        }

        function timedUpdate() {
            updateAllTimers();
        }

        // Set initial values
        timedUpdate();

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