<template>
  <ProfileSetup class="setting__section" />
  <ProfilePassword class="setting__section" />
  <ProfileDelete class="setting__section" />
</template>

<script setup lang="ts">
const { t } = useI18n();

const pagePureName = useGetPureRouteName();
const { meta } = useMeta({ t, pageKey: pagePureName, brandName: useAppConfig().brandName });

watchEffect(() => {
  useHead(meta.value);
});
</script>

<style lang="scss">
.setting__section {
  width: 100%;
  margin: 0 auto;
  display: grid;
  padding: 32px;
  background-color: $settings-bg;
  border-radius: $radius-2xl;
  border: 1px solid $settings-border;

  @include from-br(xm) {
    width: 640px;
  }
}

.setting__section:not(:last-child) {
  margin-bottom: 32px;
}
</style>
