@extends('main')
@section('body')
    <div id="sub_content">
        <div class="container my-0 my-md-5">
            <section id="notes_on_blocking" class="row mb-3 d-none"></section>
            <div class="row justify-content-center align-items-center">
                <div class="col-12 col-md-4 d-none d-lg-block">
                    <i class="fa-solid fa-user fa-10x icon-design-large"></i>
                </div>
                <div class="col-12 col-md-5">
                    <div class="mb-3">
                        <h3 class="mb-1 fw-bold">{!! __("universal.page.login.title") !!}</h3>
                        <p>{!! __("universal.page.login.text") !!}</p>
                    </div>
                    <form id="form_auth">
                        <div class="row">
                            <div class="col-12 pb-2">
                                @component("components.inputs.input", ["id" => "username", "placeholder" => __("universal.username")])
                                @endcomponent
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 pb-2">
                                @component("components.inputs.input", ["id" => "password", "type" => "password", "placeholder" => __("universal.password")])
                                @endcomponent
                            </div>
                        </div>
                        <section id="captcha" class="mt-3">
                            @include("captcha.index")
                        </section>
                        <div class="row mt-3">
                            <div class="col-12 d-grid gap-2">
                                @component("components.buttons.button", [
                                     "id" => "btn_login",
                                     "buttonClass" => "btn-default",
                                     "title" => __("universal.button.login")
                                 ])
                                @endcomponent
                            </div>
                        </div>
                    </form>
                    <div class="row mt-4">
                        <div class="col-12">
                            @component("components.divider.divider_text", ["text" => __("universal.help_needed"), "class" => "fw-bold"])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-center">
                            @component("components.links.link", [
                                "id" => "lnk_forgot_username",
                                "title" => __("universal.link.forgot_username"),
                                "url" => "/user/forgot-username",
                                "linkClass" => "link-secondary"
                            ])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-center">
                            @component("components.links.link", [
                                "id" => "lnk_reset_password",
                                "title" => __("universal.link.forgot_password"),
                                "url" => "/user/reset-password",
                                "linkClass" => "link-secondary"
                            ])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-center">
                            {{__("universal.no_account_yet")}}
                            @component("components.links.link", [
                                "id" => "lnk_register_user",
                                "title" => __("universal.link.sign_up"),
                                "url" => "/user/register",
                                "linkClass" => "link-secondary"
                            ])
                            @endcomponent
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @component("components.modals.modal", ["id" => "modal_info_complexity_requirements", "modalTitle" => __("universal.info.complexity_requirements_username.title")])
        @slot("modalBody")
            {!! __("universal.info.complexity_requirements_username.text") !!}
        @endSlot
    @endcomponent
@endsection