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

{% block title %}Log in!{% endblock %}

{% block styles %}
    {% if user_settings.backgroundDownload is defined and user_settings.backgroundDownload is not empty %}
        <style>
            #background {
                background-image: url('{{ asset('images/' ~ user_settings.backgroundDownload) }}');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
            }
        </style>
    {% else %}
        <style>
            #background {
                background-image: url('{{ asset('images/car.png') }}');
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center;
                background-attachment: fixed;
            }
        </style>
    {% endif %}

    <style>
        .navbar {
            color: #FFFFFF !important;
            background-color: #202020 !important;
            border: none !important;
        }

        .logo-wrap {
            color: white !important;
        }

        .footer {
            background-color: #202020;
        }
    </style>
{% endblock %}

{% block navigation %}
    {% include 'general/navigation.download.unauth.html.twig' %}
{% endblock %}

{% block body %}
    <div class="container p-0 h-100-sm">
        <div class="col-md-8 col-lg-6  m-md-4 h-100-sm">
            <div class="p-4 rounded-md-5 download-container h-100-sm">

                {% if user_settings.emailLogo %}
                    <div class="display-flex-center">
                        <img id="loginBackgroundPreview"
                             src='{{ asset('images/' ~ user_settings.emailLogo) }}' alt="Loading..."/>
                    </div>
                {% else %}
                    <div class="icon-circle m-auto mt-2 mb-2">
                        <i class="icofont-cloud-download icofont-2x"></i>
                    </div>
                {% endif %}


                {% if user_settings and user_settings.companyName %}
                    <div class="display-flex-center">
                        <h1>
                            {{ user_settings.companyName }} sent you a file. <br>
                            Type the code to download.
                        </h1>
                    </div>
                {% endif %}
                <div class="input-container display-flex-center">
                    <input type="text" maxlength="1" class="digit-input" id="input-1" name="digit1"/>
                    <input type="text" maxlength="1" class="digit-input" id="input-2" name="digit2"/>
                    <input type="text" maxlength="1" class="digit-input" id="input-3" name="digit3"/>
                    <input type="text" maxlength="1" class="digit-input" id="input-4" name="digit4"/>
                    <input type="text" maxlength="1" class="digit-input" id="input-5" name="digit5"/>
                    <input type="text" maxlength="1" class="digit-input" id="input-6" name="digit6"/>
                </div>

                <form method="post" id="digit-form">
                    <div class="row">
                        <input type="hidden" name="_csrf_token" value="{{ csrf_token('login') }}">
                        <div class="col mb-3">
                            <div class="d-none">
                                <input type="password"
                                       id="password"
                                       name="password"
                                        {#                                       required="required" #}
                                       placeholder="{{ 'lang.enterCode'|trans }}"
                                       class="form-control">
                                <label for="password" class="form-label required">
                                    {{ 'lang.enterCode'|trans }}
                                </label>
                            </div>
                        </div>

                        <div class="display-flex-center">
                            <button type="submit" class="button button-gradient">{{ 'lang.signIn'|trans }}</button>
                        </div>
                    </div>
                </form>

                {% if user_settings %}
                    <div class="display-flex-center mt-5 text-white">
                        {% if user_settings.urlInstagram %}

                            <a href="{{ user_settings.urlInstagram }}"
                               class="text-primary link-decoration-none me-2"
                               target="_blank">
                                <i class="icofont-instagram icofont-2x"></i>
                            </a>

                        {% endif %}

                        {% if user_settings.urlLinkedin %}

                            <a href="{{ user_settings.urlLinkedin }}" class="text-primary link-decoration-none"
                               target="_blank">
                                <i class="icofont-linkedin icofont-2x white"></i>
                            </a>

                        {% endif %}

                        {% if user_settings.urlFacebook %}

                            <a href="{{ user_settings.urlFacebook }}" class="text-primary link-decoration-none"
                               target="_blank">
                                <i class="icofont-facebook icofont-2x"></i>
                            </a>

                        {% endif %}

                        {% if user_settings.urlWebsite %}

                            <a href="{{ user_settings.urlWebsite }}" class="text-primary link-decoration-none"
                               target="_blank">
                                <i class="icofont-web icofont-2x"></i>
                            </a>

                        {% endif %}
                    </div>
                {% endif %}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    {{ encore_entry_script_tags('login') }}
{% endblock %}