<template>
  <div class="weather">
    <Title :dark-mode="true" tag="h4" class="title pt-m">
      {{ $_tr('title') }}
    </Title>

    <DefaultSlideshow
      v-if="fetchedData"
      :data="fetchedData"
      :options="options"
      :dots-enabled="true"
      :arrows-enabled="true"
    >
      <template #default="{ item: city }">
        <div :key="city.uuid" class="weather__slide">
          <div class="item">
            <Title :dark-mode="true" tag="h5">
              {{ city.title }}
            </Title>

            <Title :dark-mode="true" tag="h3" class="temperature">
              {{ city.temp }}
              <sup>°</sup>
            </Title>

            <WeatherIcon :weather="city.icon" />

            <edit-content-btn-ui
              v-if="getCheckedData(city, ['admin', 'permission', 'update'])"
              :edition-link="{
                name: 'Edition',
                params: {
                  content: city.content_type,
                  uuid: city.uuid
                }
              }"
            />
          </div>
        </div>
      </template>
    </DefaultSlideshow>
  </div>
</template>

<script>
import { Title } from 'inside-collection/atoms'

import WeatherIcon from './weather-icons'

import DefaultSlideshow from '@inside-slideshow/components/lib/Default'

export default {
  name: 'HomeWeather',
  $_i18nRootPath: 'customs.WEATHER',
  components: { Title, DefaultSlideshow, WeatherIcon },
  props: {
    fetchedData: {
      type: Array,
      required: true
    }
  },
  computed: {
    options() {
      return {
        loop: true,
        grabCursor: true,
        autoplay: {
          delay: 5000
        }
      }
    }
  }
}
</script>
