@extends('main')
@section('body')
    <div id="sub_content">
        <div class="container my-0 my-md-5">
            <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 text-ingram-blue"></i>
                </div>
                <div class="col-12 col-md-5">
                    <div class="mb-3">
                        <h3 class="mb-1 fw-bold">{!! __(GetAppText("page.login.title")) !!}</h3>
                        <p>{!! __(GetAppText("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" => __(GetAppText("username"))])
                                @endcomponent
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-12 pb-2">
                                @component("components.inputs.input", ["id" => "password", "type" => "password", "placeholder" => __(GetAppText("password"))])
                                @endcomponent
                            </div>
                        </div>
                        <div class="row mt-3">
                            <div class="col-12 d-grid gap-2">
                                @component("components.buttons.button", [
                                     "id" => "btn_login",
                                     "title" => __(GetAppText("button.login"))
                                 ])
                                @endcomponent
                            </div>
                        </div>
                    </form>
                    <div class="row mt-4">
                        <div class="col-12">
                            @component("components.divider.divider_text", ["text" => __(GetAppText("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" => __(GetAppText("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" => __(GetAppText("link.forgot_password")),
                                "url" => "/user/reset-password",
                                "linkClass" => "link-secondary"
                            ])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 text-center">
                            {{__(GetAppText("no_account_yet"))}}
                            @component("components.links.link", [
                                "id" => "lnk_register_user",
                                "title" => __(GetAppText("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" => __(GetAppText("info.complexity_requirements_username.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.complexity_requirements_username.text")) !!}
        @endSlot
    @endcomponent
@endsection