{% extends 'base.html.twig' %}

{% form_theme form 'form/error_theme.html.twig' %}

{% block stylesheets %}
    {{ parent() }}
{% endblock %}

{% block title %}{{ 'view.login.title'|trans({}, 'view', app.request.session.get('_locale')) }}{% endblock %}

{% block body_content %}
    {% set lang = app.request.session.get('_locale') is defined  and app.request.session.get('_locale') is not null ? app.request.session.get('_locale') : app.request.server.get('DEFAULT_LOCALE') %}

    <div class="container mx-auto">
        <div id="headercontainer">
            <div id="langcontainer" class="flex justify-around">
                {% for locale in locales %}
                    <a href="{{ asset(path('locale_change', {'locale':locale })) }}" title="{{locale}}" aria-label="{{locale}}"><img class="w-10" src="{{ asset('flags/'~ locale ~'.svg') }}"/></a>
                {% endfor %}
            </div>

            <div id="titlecontainer" class="text-center p-5">
                {% if loginRequestInfo.client.logo_uri is not empty %}
                    <img class="mx-auto" style="width:150px" src="{{ loginRequestInfo.client.logo_uri }}" alt="user image" />
                {% endif %}
                <h1 class="font-medium leading-tight text-5xl">{{ loginRequestInfo.client.client_name }}</h1>
            </div>
            
            <div id="subtitlecontainer">
                <h2 class="font-medium leading-tight text-3xl mt-0 mb-5 text-center">{{ 'view.login.call_to_action'|trans({}, 'view', app.request.session.get('_locale')) }}</h2>
            </div>

            <div id="flashcontainer">
                {% block flash %}
                    {% for type, alert in {error: 'bg-red-400', danger: 'bg-red-400', warning: 'bg-yellow-400', info: 'bg-blue-400', success: 'bg-green-400'} %}
                        {% for message in app.session.flashBag.get(type) %}
                        <div class="rounded mb-5 p-5 {{alert}}">
                            <p role="{{ alert is same as('success') ? 'status' : (alert is same as('danger') or alert is same as ('warning'))? 'alert' : '' }}">		
                                {{ message|raw }}
                            </p>
                        </div>
                        {% endfor %}
                    {% endfor %}
                {% endblock %}
            </div>
        </div>

        <div id="maincontainer">
            {{ form_start(form) }}

            <div id="formerrorcontainer">
                {{ form_errors(form.app) }}
            </div>

            <div id="choicecontainer">
            {% for choice in form.app.vars.choices %}
                {% set choice_id = form.app.vars.full_name ~ '[' ~ choice.value ~ ']' %}
                {% set label_id = form.app.vars.full_name ~ '-label-' ~ choice.value %}
                <div class="choicelogin last:mb-0 mb-5">
                    <input aria-labelledby="{{label_id}}" type="submit" class="hidden" id="{{ choice_id }}" value="{{ choice.value }}" name="{{form.app.vars.full_name}}" />
                    
                    <label for="{{ choice_id }}" class="app-item flex flex-row w-full cursor-pointer rounded-lg bg-white shadow-lg">
                        {% if choice.data.iconUrl %}
                        <div class="choiceloginlogo w-full h-auto object-cover w-24 rounded-t-lg rounded-r-none rounded-l-lg bg-contain bg-no-repeat bg-center ml-5 mr-2" style="background-image:url('{{ choice.data.iconUrl }}')"></div>
                        {% endif %}

                        <div class="choicelogintitle p-6 flex flex-col justify-start w-full">
                            <h5 class="text-gray-900 text-xl font-medium mb-2">{{ choice.label }}</h5>
                            <p class="text-gray-700 text-base mb-4">
                                {{ choice.data.description(lang) }}
                            </p>
                        </div>
                    </label>
                </div>
            {% endfor %}
            </div>

            {% do form.app.setRendered %}

            <div id="submitcontainer">
                {{form_row(form.submit, {'attr' : {'class' : 'btnlogin w-full px-7 py-5 mt-5 bg-sky-500 text-white font-medium text-sm cursor-pointer leading-snug uppercase rounded shadow-md hover:bg-sky-700 hover:shadow-lg focus:bg-sky-900 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-sky-900 active:shadow-lg transition duration-150 ease-in-out'}})}}
            </div>

            {{ form_rest(form) }}
            {{ form_end(form) }}
        </div>
    </div>
{% endblock %}