@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-slash 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.delete_user_profile.title") !!}</h3>
                    <p>{!!__("universal.page.delete_user_profile.text") !!}</p>
                </div>
                <form>
                    <div class="row">
                        <div class="col-12 pb-2">
                            @component("components.inputs.input", ["id" => "username", "label" => __("universal.username"), "mandatory" => true])
                            @endcomponent
                        </div>
                    </div>
                    <div class="row mt-3">
                        <div class="col-12 text-end">
                            @component("components.buttons.button", [
                                 "id" => "btn_delete_user_profile",
                                 "title" => __("universal.button.delete"),
                                 "buttonClass" => "btn-danger",
                                 "style" => "min-width: 8em;"
                             ])
                            @endcomponent
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
@endsection