<script setup>
import { mapStores } from 'pinia'
import { useLocationStore } from '../stores/location'
</script>

<script>
export default {

    computed: {
        ...mapStores(useLocationStore),
    },

    methods: {

        deleteLocation(location) {
            this.locationStore.removeLocation(location)
        },
    },
}
</script>

<template>
  <main>

    <o-button variant="primary"
              size="small"
              icon-left="arrow-left"
              @click="$router.push('/')">
      Back
    </o-button>

    <h5 class="is-size-5">Saved Locations</h5>
    <br />

    <div v-for="location in locationStore.locations"
         :key="location.coordinates"
         class="block location">
      <div>
        <p>{{ location.cityState }}</p>
        <p class="is-size-7">{{ location.coordinates }}</p>
      </div>
      <o-button variant="danger"
                size="small"
                @click="deleteLocation(location)">
        <o-icon icon="trash" />
      </o-button>
    </div>
  </main>
</template>

<style scoped>

div.location {
    border: 1px solid black;
    border-radius: 5px;
    padding: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

</style>
