@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-lock fa-10x text-ingram-blue"></i>
            </div>
            <div class="col-12 col-md-6">
                <div class="mb-3">
                    <h3 class="mb-1 fw-bold">{!! __(GetAppText("page.change_password.title")) !!}</h3>
                    <p>{!!__(GetAppText("page.change_password.text")) !!}</p>
                </div>
                <form>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input", ["id" => "current_password", "label" => __(GetAppText("current_password")), "type" => "password", "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input_info", ["id" => "new_password", "label" => __(GetAppText("new_password")), "type" => "password", "dataTarget" => "modal_info_complexity_requirements", "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input", ["id" => "confirm_password", "label" => __(GetAppText("confirm_password")), "type" => "password", "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            @component("components.buttons.button", [
                                 "id" => "btn_change_password",
                                 "title" => __("universal.button.save"),
                                 "style" => "min-width: 8em;"
                             ])
                            @endcomponent
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    @component("components.modals.modal", ["id" => "modal_info_complexity_requirements", "modalTitle" => __(GetAppText("info.complexity_requirements_password.title"))])
        @slot("modalBody")
            {!! __(GetAppText("info.complexity_requirements_password.text")) !!}
        @endSlot
    @endcomponent
@endsection