<template>
  <Loading class="container" :loading="loading" :message="error" type="danger">
    <div class="block">
      <router-link class="button" to="/new">
        <Icon name="plus">New container</Icon>
      </router-link>
    </div>
    <div class="block">
      <ul>
        <li v-for="container in containers" :key="container.id">
          <router-link :to="`/container/${container.name}`">
            {{ container.name }}
          </router-link>
        </li>
      </ul>
    </div>
  </Loading>
</template>

<script lang="ts">
import axios, { AxiosError } from 'axios'
import Icon from '@/components/Icon.vue'
import Loading from '@/components/Loading.vue'

export default {
  name: 'Home',
  components: {
    Icon,
    Loading,
  },
  data() {
    return {
      containers: [],
      error: '',
      loading: true,
    }
  },
  async mounted() {
    try {
      const response = await axios.get('/api/containers')
      this.containers = response.data
    } catch (error) {
      console.error(error)
      this.error =
        error instanceof AxiosError ? error.message : 'Error loading containers'
    } finally {
      this.loading = false
    }
  },
}
</script>
