<script setup>
import AppLayout from "@/Layouts/AppLayout.vue";
import DeleteUserForm from "@/Pages/Settings/Partials/DeleteUserForm.vue";
import JetSectionBorder from "@/Jetstream/SectionBorder.vue";
import LogoutOtherBrowserSessionsForm from "@/Pages/Settings/Partials/LogoutOtherBrowserSessionsForm.vue";
import TwoFactorAuthenticationForm from "@/Pages/Settings/Partials/TwoFactorAuthenticationForm.vue";
import UpdatePasswordForm from "@/Pages/Settings/Partials/UpdatePasswordForm.vue";
import UpdateProfileInformationForm from "@/Pages/Settings/Partials/UpdateProfileInformationForm.vue";
import UpdateSocialLinksForm from "@/Pages/Settings/Partials/UpdateSocialLinksForm.vue";
import UpdateProfileUrlForm from "@/Pages/Settings/Partials/UpdateProfileUrlForm.vue";
import Breadcrumbs from "@/components/General/Breadcrumbs";

defineProps({
    confirmsTwoFactorAuthentication: Boolean,
    sessions: Array,
});
</script>

<template>
    <AppLayout title="Profile">
        <div>
            <div class="container pt-10 pb-20 max-w-7xl">
                <div
                    class="flex items-center justify-start gap-2.5 py-10 mb-10"
                >
                    <svg
                        width="32"
                        height="33"
                        viewBox="0 0 32 33"
                        fill="none"
                        xmlns="http://www.w3.org/2000/svg"
                    >
                        <path
                            d="M22.6667 15.1667H9.33334C7.86058 15.1667 6.66667 16.3606 6.66667 17.8333V25.8333C6.66667 27.3061 7.86058 28.5 9.33334 28.5H22.6667C24.1394 28.5 25.3333 27.3061 25.3333 25.8333V17.8333C25.3333 16.3606 24.1394 15.1667 22.6667 15.1667Z"
                            stroke="#29419B"
                            stroke-width="2.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M16 23.1667C16.7364 23.1667 17.3333 22.5697 17.3333 21.8333C17.3333 21.097 16.7364 20.5 16 20.5C15.2636 20.5 14.6667 21.097 14.6667 21.8333C14.6667 22.5697 15.2636 23.1667 16 23.1667Z"
                            stroke="#29419B"
                            stroke-width="2.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                        <path
                            d="M10.6667 15.1667V9.83333C10.6667 8.41885 11.2286 7.06229 12.2288 6.0621C13.229 5.0619 14.5855 4.5 16 4.5C17.4145 4.5 18.771 5.0619 19.7712 6.0621C20.7714 7.06229 21.3333 8.41885 21.3333 9.83333V15.1667"
                            stroke="#29419B"
                            stroke-width="2.5"
                            stroke-linecap="round"
                            stroke-linejoin="round"
                        />
                    </svg>

                    <h1 class="text-3xl font-medium text-gray-300">
                        {{ $t("Register.security__information") }}
                    </h1>
                </div>
                <!--                <div v-if="$page.props.jetstream.canUpdateProfileInformation">-->
                <!--                    <UpdateProfileInformationForm :user="$page.props.current_user"/>-->

                <!--                    <JetSectionBorder/>-->
                <!--                </div>-->

                <div v-if="$page.props.jetstream.canUpdatePassword">
                    <UpdatePasswordForm class="mt-10 sm:mt-0" />

                    <JetSectionBorder />
                </div>

                <!--                <div>-->
                <!--                    <UpdateSocialLinksForm-->
                <!--                        class="mt-10 sm:mt-0"-->
                <!--                    />-->

                <!--                    <JetSectionBorder/>-->
                <!--                </div>-->

                <!--                <div>-->
                <!--                    <UpdateProfileUrlForm-->
                <!--                        class="mt-10 sm:mt-0"-->
                <!--                    />-->
                <!--                </div>-->

                <div
                    v-if="
                        $page.props.jetstream.canManageTwoFactorAuthentication
                    "
                >
                    <TwoFactorAuthenticationForm
                        :requires-confirmation="confirmsTwoFactorAuthentication"
                        class="mt-10 sm:mt-0"
                    />

                    <JetSectionBorder />
                </div>

                <LogoutOtherBrowserSessionsForm
                    :sessions="sessions"
                    class="mt-10 sm:mt-0"
                />

                <template
                    v-if="$page.props.jetstream.hasAccountDeletionFeatures"
                >
                    <JetSectionBorder />

                    <DeleteUserForm class="mt-10 sm:mt-0" />
                </template>
            </div>
        </div>
    </AppLayout>
</template>
