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

{% load i18n %}
{% load humanize %}

{% block mumble %}
    <div class="col-md-6 mb-2">
        <div class="card h-100">
            <div class="card-header bg-warning">
                <div class="card-title mb-0">{% translate "Mumble Temporary Links" %}</div>
            </div>

            <div class="card-body text-center">
                <p>
                    {% blocktranslate trimmed with bold_start="<b>" bold_end="</b>" %}
                        Temp Links Give Access to mumble with the {{ bold_start }}Guest{{ bold_end }} Group for the preset time
                    {% endblocktranslate %}
                </p>

                <p>
                    {% blocktranslate trimmed with bold_start="<b class='text-warning'>" bold_end="</b>" %}
                        Connected users {{ bold_start }}will not{{ bold_end }} be kicked at the end of this period.
                    {% endblocktranslate %}
                </p>

                <p>
                    {% blocktranslate trimmed with badge_start="<span class='badge bg-danger'>" badge_end="</span>" %}
                        Templink users can be kicked in mumble by typing {{ badge_start }}!kicktemps{{ badge_end }} in mumble chat.
                    {% endblocktranslate %}
                </p>

                <p>
                    {% blocktranslate trimmed with bold_start="<b class='text-warning'>" bold_end="</b>" %}
                        There are {{ bold_start }}no restrictions{{ bold_end }} on who or how many can use a templink, share wisely.
                    {% endblocktranslate %}
                </p>

            </div>
        </div>
    </div>

    <div class="col-md-6 mt-sm-2 mt-md-0 mb-2">
        <div class="card h-100">
            <div class="card-header">
                <div class="card-title mb-0">{% translate "Create New Link" %}</div>
            </div>

            <div class="card-body text-center">
                <p>{% translate "Your link will be displayed on the next page for an easy copy and paste." %}</p>

                <form action="{% url 'mumble:templinks' %}" method="post">
                    {% csrf_token %}

                    <div class="mb-3">
                        <label for="time">{% translate "Duration (hours)" %}</label>
                        <select class="form-select" name="time" id="time">
                            <option value="3">3</option>
                            <option value="6">6</option>
                            <option value="12">12</option>
                            <option value="24">24</option>
                        </select>
                    </div>

                    <input class="btn btn-primary" type="submit" value="{% translate 'OK' %}" />
                </form>
            </div>
        </div>
    </div>

    {% if tl %}
        <div class="my-2">
            <div class="card">
                <div class="card-header bg-success">
                    <div class="card-title mb-0">{% translate "New Link" %}</div>
                </div>

                <div class="card-body text-center" style="min-height: 100px;">
                    <p>
                        {% translate "Expires in" %}: <span id="countdown{{ tl.link_ref }}hot"></span>
                    </p>

                    <pre>{{ SITE_URL }}{% url 'mumble:join' tl.link_ref %}</pre>

                    <button class="btn btn-info" id="clipboard-new" data-clipboard-text="{{ SITE_URL }}{% url 'mumble:join' tl.link_ref %}">
                        {% translate "Copy to Clipboard!" %}
                    </button>
                </div>
            </div>
        </div>
    {% endif %}

    <div class="my-2">
        <div class="card pb-2">
            <div class="card-header">
                <div class="card-title mb-0">{% translate "Active Links" %}</div>
            </div>

            <div class="card-body" style="min-height: 100px;">
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th></th>
                            <th class="text-center">{% translate "Creator" %}</th>
                            <th class="text-center">{% translate "Key" %}</th>
                            <th class="text-center">{% translate "Time Left" %}</th>
                            <th class="text-center">{% translate "Copy" %}</th>
                            <th class="text-center">{% translate "Nuke" %}</th>
                        </tr>
                    </thead>

                    <tbody>
                        {% for lnk in tl_list %}
                            <tr>
                                <td class="text-center">
                                    <img class="ra-avatar img-circle" src="{{ lnk.creator.portrait_url_32 }}" alt="{{ lnk.creator.character_name }}" />
                                </td>

                                <td class="text-center">{{ lnk.creator.character_name }}</td>

                                <td class="text-center">{{ lnk.link_ref }}</td>

                                <td class="text-center" id="countdown{{ lnk.link_ref }}"></td>

                                <td class="text-center">
                                    <button class="btn btn-info"
                                            id="clipboard-{{ lnk.link_ref }}"
                                            data-clipboard-text="{{ SITE_URL }}{% url 'mumble:join' lnk.link_ref %}">
                                        {% translate "Copy to Clipboard!" %}
                                    </button>
                                </td>

                                <td class="text-center">
                                    <a class="btn btn-danger" href="{% url 'mumble:nuke' lnk.link_ref %}">{% translate "Nuke Link!" %}</a>
                                </td>
                            </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    {% if ex_tl_list.count > 0 %}
        <div class="my-2">
            <div class="card">
                <div class="card-header">
                    <div class="card-title mb-0">{% translate "Expired Links" %}</div>
                </div>

                <div class="card-body" style="min-height: 100px;">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th></th>
                                <th class="text-center">{% translate "Creator" %}</th>
                                <th class="text-center">{% translate "Key" %}</th>
                                <th class="text-center">{% translate "Nuke" %}</th>
                            </tr>
                        </thead>

                        <tbody>
                            {% for lnk in ex_tl_list %}
                                <tr>
                                    <td class="text-center">
                                        <img class="ra-avatar img-circle" src="{{ lnk.creator.portrait_url_32 }}" alt="{{ lnk.creator.character_name }}" />
                                    </td>

                                    <td class="text-center">{{ lnk.creator.character_name }}</td>

                                    <td class="text-center">{{ lnk.link_ref }}</td>

                                    <td class="text-center">
                                        <a class="btn btn-danger" href="{% url 'mumble:nuke' lnk.link_ref %}">{% translate "Nuke Link!" %}</a>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    {% endif %}
{% endblock mumble %}

{% block extra_javascript %}
    {% include "bundles/clipboard-js.html" %}

    <script>
        /* global ClipboardJS */
        const clipboard = new ClipboardJS('#clipboard-new');

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

{% endblock extra_javascript %}
