{% extends '@Morpheus/layout.twig' %}

{% block head %}
    {{ parent() }}
    <script type="text/javascript" src="libs/bower_components/jquery-placeholder/jquery.placeholder.js"></script>
    <!--[if lt IE 9]>
    <script src="libs/bower_components/html5shiv/dist/html5shiv.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="libs/jquery/jquery.smartbanner.js"></script>
    <link rel="stylesheet" type="text/css" href="libs/jquery/stylesheets/jquery.smartbanner.css" />

    <script type="text/javascript">
        $(function () {
            $('#form_login').focus();
            $('input').placeholder();
            $.smartbanner({title: "Piwik Mobile 2", author: "Piwik team", hideOnInstall: false, layer: true, icon: "plugins/CoreHome/images/googleplay.png"});
        });
    </script>
{% endblock %}

{% block pageTitle %}{% if isCustomLogo == false %}Piwik &rsaquo; {% endif %}{{ 'Login_LogIn'|translate }}{% endblock %}
{% block pageDescription %}{{ 'General_OpenSourceWebAnalytics'|translate }}{% endblock %}

{% set bodyId = 'loginPage' %}

{% block body %}

    {{ postEvent("Template.beforeTopBar", "login") }}
    {{ postEvent("Template.beforeContent", "login") }}

    {% include "_iframeBuster.twig" %}

    <div id="notificationContainer">
    </div>

    <div id="logo">
        {% if isCustomLogo == false %}
            <a href="http://piwik.org" title="{{ linkTitle }}">
        {% endif %}
        {% if hasSVGLogo %}
            <img src='{{ logoSVG }}' title="{{ linkTitle }}" alt="Piwik" class="ie-hide"/>
            <!--[if lt IE 9]>
        {% endif %}
        <img src='{{ logoLarge }}' title="{{ linkTitle }}" alt="Piwik" />
        {% if hasSVGLogo %}<![endif]-->{% endif %}

        {% if isCustomLogo %}
            {% set poweredByPiwik %}
            <i><a href="http://piwik.org/" rel="noreferrer"  target="_blank">{{ linkTitle }}</a></i>
            {% endset %}
        {% endif %}

        {% if isCustomLogo == false %}
            </a>
            <div class="description">
                <a href="http://piwik.org" title="{{ linkTitle }}">{{ linkTitle }}</a>
                <div class="arrow"></div>
            </div>
        {% endif %}
    </div>

    <section class="loginSection">

        {# untrusted host warning #}
        {% if (isValidHost is defined and invalidHostMessage is defined and isValidHost == false) %}
            {% include '@CoreHome/_warningInvalidHost.twig' %}
        {% else %}
            <div id="message_container">

                {{ include('@Login/_formErrors.twig', {formErrors: form_data.errors } )  }}

                {% if AccessErrorString %}
                    <div class="message_error">
                        <strong>{{ 'General_Error'|translate }}</strong>: {{ AccessErrorString|raw }}<br/>
                    </div>
                {% endif %}

                {% if infoMessage %}
                    <p class="message">{{ infoMessage|raw }}</p>
                {% endif %}
            </div>
            <form {{ form_data.attributes|raw }} ng-non-bindable>
                <h1>{{ 'Login_LogIn'|translate }}</h1>
                <fieldset class="inputs">
                    <input type="text" name="form_login" id="login_form_login" class="input" value="" size="20"
                           tabindex="10"
                           placeholder="{{ 'General_Username'|translate }}" autofocus="autofocus"/>
                    <input type="password" name="form_password" id="login_form_password" class="input" value="" size="20"
                           tabindex="20"
                           placeholder="{{ 'General_Password'|translate }}"/>
                    <input type="hidden" name="form_nonce" id="login_form_nonce" value="{{ nonce }}"/>
                </fieldset>

                <fieldset class="actions">
                    <input name="form_rememberme" type="checkbox" id="login_form_rememberme" value="1" tabindex="90"
                           {% if form_data.form_rememberme.value %}checked="checked" {% endif %}/>
                    <label for="login_form_rememberme">{{ 'Login_RememberMe'|translate }}</label>
                    <input class="submit" id='login_form_submit' type="submit" value="{{ 'Login_LogIn'|translate }}"
                           tabindex="100"/>
                </fieldset>
            </form>
            <form id="reset_form" style="display:none;" ng-non-bindable>
                <fieldset class="inputs">
                    <input type="text" name="form_login" id="reset_form_login" class="input" value="" size="20"
                           tabindex="10"
                           placeholder="{{ 'Login_LoginOrEmail'|translate }}"/>
                    <input type="hidden" name="form_nonce" id="reset_form_nonce" value="{{ nonce }}"/>

                    <input type="password" name="form_password" id="reset_form_password" class="input" value="" size="20"
                           tabindex="20" autocomplete="off"
                           placeholder="{{ 'General_Password'|translate }}"/>

                    <input type="password" name="form_password_bis" id="reset_form_password_bis" class="input" value=""
                           size="20" tabindex="30" autocomplete="off"
                           placeholder="{{ 'Login_PasswordRepeat'|translate }}"/>
                </fieldset>

                <fieldset class="actions">
                    <span class="loadingPiwik" style="display:none;">
                        <img alt="Loading" src="plugins/Morpheus/images/loading-blue.gif"/>
                    </span>
                    <input class="submit" id='reset_form_submit' type="submit"
                           value="{{ 'General_ChangePassword'|translate }}" tabindex="100"/>
                </fieldset>

                <input type="hidden" name="module" value="{{ loginModule }}"/>
                <input type="hidden" name="action" value="resetPassword"/>
            </form>
            <p id="nav">
                <a id="login_form_nav" href="#"
                   title="{{ 'Login_LostYourPassword'|translate }}">{{ 'Login_LostYourPassword'|translate }}</a>
                <a id="alternate_reset_nav" href="#" style="display:none;"
                   title="{{'Login_LogIn'|translate}}">{{ 'Login_LogIn'|translate }}</a>
                <a id="reset_form_nav" href="#" style="display:none;"
                   title="{{ 'Mobile_NavigationBack'|translate }}">{{ 'General_Cancel'|translate }}</a>
            </p>
            {% if poweredByPiwik is defined %}
                <p id="piwik">
                    {{ poweredByPiwik }}
                </p>
            {% endif %}
            <div id="lost_password_instructions" style="display:none;">
                <p class="message">{{ 'Login_ResetPasswordInstructions'|translate }}</p>
            </div>
        {% endif %}
    </section>

{% endblock %}