{% load humanize %}
{% load timetags %}
{% load static %}
{% load i18n %}
{% load navactive %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    {% include 'allianceauth/icons.html' %}

    <title>{% translate "Mumble Temporary Access" %} - {{ SITE_NAME }}</title>

    {% include 'bundles/bootstrap-css.html' %}
    {% include 'bundles/fontawesome.html' %}

    <link href="{% static 'allianceauth/css/auth-base.css' %}" type="text/css" rel="stylesheet">

    {% if NIGHT_MODE %}
    <link rel="stylesheet" href="{% static 'aa_theme_zima/css/dashboard-dark.css' %}?v=2">
    {% else %}
    <link rel="stylesheet" href="{% static 'aa_theme_zima/css/dashboard-light.css' %}?v=2">
    {% endif %}
</head>
<body>
    <div id="wrapper" class="container">
        <!-- Navigation -->
        {% include 'allianceauth/top-menu.html' %}
        <div class="row" id="site-body-wrapper">
            <div class="col-sm-12">
                <div style="margin-top:25px">
                    <div class="col-md-12 text-center">
                        <g class="ra-avatar img-circle" src="{{link.creator.portrait_url_128}}"><br><br>
                        <h4>{{link.creator.character_name}} has invited you to join Mumble!</h4>
                        <p>Time Remaining: <span id="countdown{{link.link_ref}}"></span></p>
                        <p><span class="label label-info">Link Ref: {{link.link_ref}}</span></p>
                            <br>
                        <form action="{% url 'mumbletemps:join' link.link_ref %}" method="post">
                            {% csrf_token %}

                            <input type="hidden" name="sso" value="True" />
                            <input type="image" class="img-responsive center-block no-border" src="{% static 'aa_theme_zima/img/eve-sso-login-black-large.png' %}?v=2" border=0 alt="Login with SSO" />

                        </form>
                        <div class="clearfix"></div><br>
                        <div class="col-md-4 col-md-offset-4 col-sm-12">
                            <div class="panel panel-default">
                                <div class="panel-heading text-center">
                                    <h4>No SSO</h4>
                                </div>
                                <div class="panel-body text-left">
                                    <div class="form-group">
                                        <form action="{% url 'mumbletemps:join' link.link_ref %}" method="post">
                                            {% csrf_token %}

                                            <input type="hidden" name="sso" value="False" />

                                            <p class="text-center">If you cannot SSO with your EVE character, You can enter your own details below.</p>
                                            <label for="name">Name</label>
                                            <input type="text" class="form-control" name="name" placeholder="Who are you?">
                                            <br>
                                            <label for="association">Association</label>
                                            <input type="text" class="form-control" name="association" placeholder="Who are you with?">
                                            <br>
                                            <button type="submit" value="Submit" class="btn col-md-12 btn-primary">Login Without SSO</button>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
{% include 'bundles/moment-js.html' with locale=True %}
{% include 'bundles/timers-js.html' %}
<script type="text/javascript">
    var locale = "{{ LANGUAGE_CODE }}";

    var timers = [
            {
                'id': "{{ link.link_ref }}",
                'targetDate': moment("{{ link.expires|print_timestamp| date:"c" }}"),
                'expired': false
            }
    ];

    moment.locale(locale);

    // Set initial values
    timedUpdate();

    // Start timed updates
    setInterval(timedUpdate, 1000);

    function timedUpdate() {
        updateAllTimers();
    }

    function updateAllTimers () {
        var l = timers.length;
        for (var i=0; i < l; ++i) {
            if (timers[i].expired) continue;
            updateTimer(timers[i]);
        }
    }

    /**
     * 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 = "";
        }
    }

</script>
