<template>
  <div class="addresses">
    <div class="addresses__top">
      <h1 class="addresses__top-title">{{ t('profile.addresses.title') }}</h1>
    </div>
    <div class="addresses__main">
      <div class="addresses__main-inner">
        <h6 class="addresses__main-title">{{ t('profile.addresses.title1') }}</h6>
        <forms-address />
      </div>
      <div class="addresses__main-inner">
        <h6 class="addresses__main-title">{{ t('profile.addresses.title2') }}</h6>
        <div class="list">
          <cards-address
              v-for="address in addresses"
              :key="address.node.uuid"
              :address="address.node"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {usePageTitle} from "@composables/utils";
import {useAddressDelete} from "@composables/adresses";

const {t} = useI18n();
const addressesStore = useAddressesStore();

const addresses = computed(() => addressesStore.addresses);

const { setPageTitle } = usePageTitle();
const { deleteAddress, deleteLoading } = useAddressDelete();

setPageTitle(t('breadcrumbs.addresses'));
</script>

<style lang="scss" scoped>
.addresses {
  background-color: $main;
  width: 100%;
  border: 1px solid $border;
  border-radius: $default_border_radius;
  height: fit-content;

  &__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 25px;
    padding: 24px 32px;
    border-bottom: 1px solid $border;

    &-title {
      color: $primary;
      font-family: "Playfair Display", sans-serif;
      font-size: 24px;
      font-weight: 700;
    }
  }

  &__main {
    display: flex;
    flex-direction: column;
    gap: 75px;
    padding: 24px 32px;

    &-inner {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    &-title {
      margin-bottom: 20px;
      font-weight: 600;
      font-size: 18px;
      color: $primary;
    }
  }
}
</style>