<template>
  <div>
    <div class="text-center">Autóleadás helye</div>
    <div class="flex flex-col gap-3 p-3">
      <Card v-for="place in places"
        :pt="{ root: (rent.auto_leadas_hely == place) ? 'bg-primary-500 text-white mb-3' : 'mb-3' }">
        <template #content>
          <div class="flex gap-3" @click="next(place)">
            <div class="flex justify-center items-center text-3xl font-bold" style="width: 56px; font-size: 32px;">
              <template v-if="place.icon == 'airplane'">
                <Icon name="ph:airplane-takeoff" size="48" />
              </template>
              <template v-if="place.icon == 'office'">
                <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 256 256">
                  <path fill="currentColor"
                    d="M248 208h-16V96a8 8 0 0 0 0-16h-48V48a8 8 0 0 0 0-16H40a8 8 0 0 0 0 16v160H24a8 8 0 0 0 0 16h224a8 8 0 0 0 0-16M216 96v112h-32V96ZM56 48h112v160h-24v-48a8 8 0 0 0-8-8H88a8 8 0 0 0-8 8v48H56Zm72 160H96v-40h32ZM72 80a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8m48 0a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16h-16a8 8 0 0 1-8-8m-48 40a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16H80a8 8 0 0 1-8-8m48 0a8 8 0 0 1 8-8h16a8 8 0 0 1 0 16h-16a8 8 0 0 1-8-8" />
                </svg>
              </template>
            </div>
            <div class="w-full">
              <div class="text-sm"><b>{{ place.name }}</b></div>
              <div class="text-sm">{{ place.address }}</div>
            </div>
          </div>
        </template>
      </Card>
    </div>
  </div>
</template>

<script lang="ts" setup>
const { rent } = storeToRefs(useAuthStore())

definePageMeta({
  rentStep: 4,
  title: 'Autóleadás helye'
})
const placeStore = useMyPlacesStore()

const places: PlaceType[] = computed(() => {
  return placeStore.places
})

let HUFormat = new Intl.NumberFormat('hu-HU', {
  style: 'currency',
  currency: 'HUF',
  maximumFractionDigits: 0
});

function next(val) {
  rent.value.auto_leadas_hely = val
  navigateTo('/rent/extra')
}
</script>

<style></style>