{% extends 'op_base.html' %}
{% load i18n %}

{% block page_title %}CIE Login{% endblock page_title %}

{% block extra_head %}
<script src="https://idserver.servizicie.interno.gov.it/idp/js/l12/l12.js.jsp?202603172014"></script>
<style>
    #loginwithappcard, .cie-card-separator, .cie-read-card { display: none !important; }
    .password-icon { position: absolute; right: 0.85rem; top: 0.85rem; z-index: 4; }
    .password-icon svg { width: 20px; height: 20px; }
</style>
{% endblock extra_head %}

{% block container %}
<div class="row">
    <div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
    <div class="col">
        <div class="row">
            <div id="title" class="mb-4 col">
                <p class="c1">
                    <strong>RICHIESTA D'ACCESSO CIE LIVELLO 2</strong>
                </p>
                <h1>{{ client_organization_name|default:"Visione" }}</h1>
            </div>
        </div>
    </div>
    <div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
</div>

<div class="row">
    <div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
    <div class="col mx-0 mx-sm-n4">
        <div class="card-wrapper card-space">
            <div class="card card-bg card-bg-small-none card-big py-0 mx-0 mx-md-1">
                <div class="card-body p-0 p-sm-4">
                    <div class="row">
                        <div class="col-12 col-lg-6 pr-lg-4">
                            <h2>Entra con le tue credenziali CIE</h2>

                            <div id="statusHandler" class="row mb-4 mx-n2 error">
                                {% if form.username.errors or form.password.errors %}
                                <div class="col">
                                    {% for error in form.username.errors %}<p class="mb-1">{{ error }}</p>{% endfor %}
                                    {% for error in form.password.errors %}<p class="mb-1">{{ error }}</p>{% endfor %}
                                </div>
                                {% else %}
                                <div class="col"><br/><br/></div>
                                {% endif %}
                            </div>

                            <div class="mt-3">
                                <form method="POST" action="{% url 'oidc_provider_authnrequest' %}" id="loginUP">
                                    {% csrf_token %}
                                    {% for hidden in hidden_form.hidden_fields %}{{ hidden }}{% endfor %}

                                    <div class="form-row">
                                        <div class="form-group col mb-5">
                                            <div class="input-group">
                                                <label for="id_username" class="sr-only">Numero CIE o Codice fiscale o Email</label>
                                                <input
                                                    type="text"
                                                    class="form-control"
                                                    id="id_username"
                                                    name="username"
                                                    placeholder="Numero CIE o Codice fiscale o Email"
                                                    value="{{ form.username.value|default_if_none:'' }}"
                                                    autocomplete="username"
                                                    tabindex="1"/>

                                                <div class="input-group-append">
                                                    <div class="input-group-text" id="usernameIcon">
                                                        <a href="#" onclick="return false;">
                                                            <svg class="icon icon-primary icon-sm"><use xlink:href="https://idserver.servizicie.interno.gov.it/idp/images/l12/sprite.svg#it-info-circle"></use></svg>
                                                        </a>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="ipzs-validator" id="usernameError">&nbsp;</div>
                                        </div>
                                    </div>

                                    <div class="form-row">
                                        <div class="form-group col mb-2">
                                            <div class="input-group">
                                                <label for="id_password" class="sr-only">Password</label>
                                                <input
                                                    type="password"
                                                    class="form-control input-password"
                                                    id="id_password"
                                                    name="password"
                                                    placeholder="Password"
                                                    value=""
                                                    autocomplete="current-password"
                                                    tabindex="2"/>
                                                <span class="password-icon" aria-hidden="true">
                                                    <svg class="password-icon-invisible icon icon-primary icon-sm"><use xlink:href="https://idserver.servizicie.interno.gov.it/idp/images/l12/sprite.svg#it-password-invisible"></use></svg>
                                                </span>
                                            </div>
                                            <div class="ipzs-validator" id="passwordError">&nbsp;</div>
                                        </div>
                                    </div>

                                    <div class="mt-1 pb-1">
                                        <p class="c2">Hai dimenticato la password? <strong><a href="https://www.cartaidentita.interno.gov.it/pgic/login/recupera-password" title="Richiedine una nuova." class="text-nowrap" target="_blank">Richiedine una nuova.</a></strong></p>
                                    </div>

                                    <div class="row buttons mt-4 pb-3">
                                        <div class="col-12 col-md-5 text-center mb-3 pr-md-3">
                                            <a href="{% url 'oidc_provider_not_consent' %}?redirect_uri={{ redirect_uri|urlencode }}&state={{ state|urlencode }}" class="btn btn-outline-primary w-100 text-nowrap">Annulla</a>
                                        </div>
                                        <div class="col-12 col-md-7 text-center">
                                            <button type="submit" class="btn btn-primary w-100">Procedi</button>
                                        </div>
                                    </div>

                                    <div>
                                        <p class="c2">Non hai ancora attivato le credenziali CIE? <strong><a href="https://www.cartaidentita.interno.gov.it/pgic/attivazione-credenziali-puk" title="Attiva ora le credenziali CIE" class="text-nowrap" target="_blank">Attivale ora</a></strong></p>
                                    </div>
                                </form>
                            </div>
                        </div>

                        <div class="col-12 col-lg-6 pl-lg-4">
                            <h2>Accesso al servizio</h2>
                            <p class="c2">
                                Stai autorizzando accesso a <strong>{{ client_organization_name|default:"Visione" }}</strong> con credenziali CIE livello 2.
                            </p>
                            <p class="c2 mt-4">
                                Se annulli o rifiuti autorizzazione, browser tornerà sempre a Visione.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-1 col-md-2 col-lg-1 d-none d-sm-flex"></div>
</div>
{% endblock container %}