@extends('main')
@section('body')
    <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 icon-design-large"></i>
            </div>
            <div class="col-12 col-md-6">
                <div class="mb-3">
                    <h3 class="mb-1 fw-bold">{!! __("universal.page.change_username.title") !!}</h3>
                    <p>{!!__("universal.page.change_username.text") !!}</p>
                </div>
                <form>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input_info", ["id" => "username", "label" => __("universal.username"), "value" => session("user.username"), "placeholder" => __(GetAppText("username")), "dataTarget" => "modal_info_complexity_requirements", "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            @component("components.buttons.button", [
                                 "id" => "btn_change_username",
                                 "title" => __("universal.button.save"),
                                 "style" => "min-width: 8em;",
                                 "buttonClass" => "btn-default"
                             ])
                            @endcomponent
                        </div>
                    </div>
                </form>
            </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