{% extends "partial/layout.html.twig" %}

{% block title %}{{ t("login_page_name", "Login") }}{% endblock %}
{% block description %}{{ t("login_meta_description", "Login to your account") }}{% endblock %}
{% block keywords %}{{ t("login_meta_keywords", "login, register, image, picture, pic, img, hosting, sharing, upload, storage, site, website") }}{% endblock %}

{% block body %}
    <section class="height-80 text-center">
        <div class="container pos-vertical-center">
            <div class="row">
                <div class="col-md-7 col-lg-5">
                    <h2>{{ t("login_page_name", "Login") }}</h2>
                    
                    {% if msg_page_errors is defined %}
                    <div class="alert bg--error">
                        <div class="alert__body"><i class="fa fa-exclamation-triangle color--error"></i>&nbsp;&nbsp;{% if msg_page_errors is defined %}{{ msg_page_errors|join('. ') }}{% endif %}</div>
                    </div>
                    {% elseif msg_page_successes is defined %}
                    <div class="alert bg--success">
                        <div class="alert__body"><i class="fa fa-check color--success"></i>&nbsp;&nbsp;{% if msg_page_successes is defined %}{{ msg_page_successes|join('. ') }}{% endif %}</div>
                    </div>
                    {% endif %}
                    
                    <p>{{ t("login_intro_text", "Please enter your username and password below to login.") }}</p>
                    <form method="post" role="form" id="form_login" action="{{ CORE_SITE_PATH }}/account/login" autocomplete="off">
                        <div class="row">
                            <div class="col-md-12">
                                <input name="username" id="username" type="text" placeholder="{{ t("username", "username")|title }}" autocomplete="off" autofocus value="{{ username }}"/>
                            </div>
                            <div class="col-md-12">
                                <input name="password" id="password" type="password" placeholder="{{ t("password", "password")|title }}" autocomplete="off" value="{{ password }}"/>
                            </div>
                            {% if SITE_CONFIG_CAPTCHA_LOGIN_SCREEN_NORMAL == 'yes' %}
                            <div class="col-md-12">
                                <div class="input-group" style="display: block; overflow: hidden;">
                                    {{ CoreHelper.outputCaptcha()|raw }}
                                </div>
                            </div>
                            {% endif %}
                            
                            <div class="col-md-12">
                                <button class="btn btn--primary type--uppercase" type="submit">{{ t("login", "login")|title }}</button>
                            </div>
                        </div>
                        <input type="hidden" value="1" name="submitme"/>
                    </form>
                    <span class="type--fine-print block">
                        <a href="{{ CORE_SITE_PATH }}/register">{{ t("register", "register")|title }}</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a href="{{ CORE_SITE_PATH }}/account/forgot_password">{{ t("forgot_password", "forgot password")|title }}</a>
                    </span>
                    
                    <hr>
                    {{ HookLoginLoginBoxHtml|raw }}
                </div>
            </div>
            <!--end of row-->
        </div>
        <!--end of container-->
    </section>
{% endblock %}