<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,
});

const breadcrumbs = [
    {
        name: "profile.profile",
        url: "/u",
    },
    {
        name: 'profile.edit_details',
        url: null,
    },
];
</script>

<template>
    <AppLayout title="Profile">
        <div class="container pt-10 pb-20 overflow-y-auto max-w-7xl">
            <Breadcrumbs class="pt-10" :breadcrumbs="breadcrumbs" />

            <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="M11.9999 9.83331H7.99992C7.29267 9.83331 6.6144 10.1143 6.1143 10.6144C5.6142 11.1145 5.33325 11.7927 5.33325 12.5V24.5C5.33325 25.2072 5.6142 25.8855 6.1143 26.3856C6.6144 26.8857 7.29267 27.1666 7.99992 27.1666H19.9999C20.7072 27.1666 21.3854 26.8857 21.8855 26.3856C22.3856 25.8855 22.6666 25.2072 22.6666 24.5V20.5"
                        stroke="#29419B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M12 20.5H16L27.3333 9.16668C27.8638 8.63625 28.1618 7.91683 28.1618 7.16668C28.1618 6.41654 27.8638 5.69712 27.3333 5.16668C26.8029 4.63625 26.0835 4.33826 25.3333 4.33826C24.5832 4.33826 23.8638 4.63625 23.3333 5.16668L12 16.5V20.5Z"
                        stroke="#29419B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                    <path
                        d="M21.3333 7.16669L25.3333 11.1667"
                        stroke="#29419B"
                        stroke-width="2"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                    />
                </svg>
                <h1 class="text-3xl font-medium text-gray-300">
                    {{ $t("Register.edit_pros") }}
                </h1>
            </div>

            <div v-if="$page.props.jetstream.canUpdateProfileInformation">
                <UpdateProfileInformationForm :user="$page.props.user" />

                <JetSectionBorder />
            </div>

            <div>
                <UpdateSocialLinksForm
                    id="social-links"
                    :user="$page.props.user"
                    class="mt-10 sm:mt-0"
                />

                <JetSectionBorder />
            </div>

            <div>
                <UpdateProfileUrlForm
                    id="profile-url"
                    :user="$page.props.user"
                    class="mt-10 sm:mt-0"
                />
            </div>
        </div>
    </AppLayout>
</template>
