<!DOCTYPE html>
<html lang="en">
<head>
    <title>{{ theme.getThemeConfig("theme_title") }}</title>
    <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="token" content="{{ csrfToken }}"/>
    <link rel="shortcut icon" href="{{ theme.uri("img/favicon.ico") }}" />

    <link href="{{ theme.uri("libraries/bootstrap/css/bootstrap.min.css") }}" rel="stylesheet" media="screen">
    <link href="{{ theme.uri("libraries/bootstrap/css/bootstrap-theme.min.css") }}" rel="stylesheet" media="screen">

    <!-- Copyright 2006-2018 Xibo Signage Ltd. Part of the Xibo Open Source Digital Signage Solution. Released under the AGPLv3 or later. -->
    <style type="text/css">
        body {
            padding-top: 40px;
            padding-bottom: 40px;
            background-color: #f5f5f5;
        }

        .form-signin {
            max-width: 300px;
            padding: 19px 29px 29px;
            margin: 0 auto 20px;
            background-color: #fff;
            border: 1px solid #e5e5e5;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            -moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
            box-shadow: 0 1px 2px rgba(0,0,0,.05);
        }
        .form-signin .form-signin-heading,
        .form-signin .checkbox {
            margin-bottom: 10px;
        }
        .form-signin input[type="text"],
        .form-signin input[type="password"] {
            font-size: 16px;
            height: auto;
            margin-bottom: 15px;
            padding: 7px 9px;
        }
        .login-logo {
            width: 200px;
        }

    </style>
</head>
<body>
    <div class="container">
        <form id="login-form" class="form-signin text-center" action="{{ urlFor("login") }}" method="post">
            <input name="priorRoute" type="hidden" value="{{ flash.priorRoute }}" />
            <input type="hidden" name="{{ csrfKey }}" value="{{ csrfToken }}" />
            <p><a href="{{ theme.getThemeConfig("theme_url") }}"><img class="login-logo" src="{{ theme.uri("img/xibologo.png") }}"></a></p>

            <p>{% trans "Please provide your credentials" %}</p>

            <input id="username" class="form-control input-block-level" name="username" type="text" placeholder="{% trans "User" %}" autofocus>
            <input id="password" class="form-control input-block-level" name="password" type="password" placeholder="{% trans "Password" %}">

            {% if flash.login_message %}
            <div class="alert alert-danger">{{ flash.login_message }}</div>
            {% endif %}

            <p><button class="btn btn-large btn-primary" type="submit">{% trans "Login" %}</button></p>

            {% if passwordReminderEnabled %}<p><a href="#" id="reminder-form-toggle">{% trans "Forgotten your password?" %}</a></p>{% endif %}
        </form>

        {% if passwordReminderEnabled %}
        <form id="reminder-form" class="form-signin text-center hidden" action="{{ urlFor("login.forgotten") }}" method="post">
            <input type="hidden" name="{{ csrfKey }}" value="{{ csrfToken }}" />

            <p>{% trans "Please provide your user name" %}</p>
            <input id="username" class="form-control input-block-level" name="username" type="text" placeholder="{% trans "User" %}">

            {% if flash.login_message %}
                <div class="alert alert-danger">{{ flash.login_message }}</div>
            {% endif %}

            <p><button class="btn btn-large btn-primary" type="submit">{% trans "Send Reset" %}</button></p>

            <p><a href="#" id="login-form-toggle">{% trans "Login instead?" %}</a></p>
        </form>
        {% endif %}

        <p class="text-center">{% trans %}Version {{ version }}{% endtrans %}
            | <a id="source-link" href="{{ theme.getThemeConfig("cms_source_url") }}">{% trans "Source" %}</a>
            | <a id="about-link" class="XiboFormButton" href="{{ urlFor("about") }}" title="{% trans "About" %}">{% trans "About" %}</a>
        </p>
    </div> <!-- /container -->
    <script src="{{ theme.uri("libraries/jquery/jquery-1.11.1.min.js") }}"></script>
    <script src="{{ theme.uri("libraries/bootstrap/js/bootstrap.min.js") }}"></script>
    <script type="text/javascript">
        $(function() {
            $("#reminder-form-toggle").on("click", function (e) {
                e.preventDefault();

                $("#login-form").addClass("hidden");
                $("#reminder-form").removeClass("hidden");
            });

            $("#login-form-toggle").on("click", function (e) {
                e.preventDefault();

                $("#login-form").removeClass("hidden");
                $("#reminder-form").addClass("hidden");
            });
        });
    </script>
</body>
</html>