<template>
  <div class="domain-page">
    <Banner
      :static-data="fetchedData"
      :add="['domains']"
      :back="{
        href: {
          name: 'JobsPage',
          params: { slug: $route.params.slug, jobs: $route.params.jobs }
        },
        title: $_tr('back')
      }"
    />

    <TemplateContainer>
      <ParagraphListing
        v-if="fetchedData.content"
        :herited-data="fetchedData.content"
        :herited-options="{ template: true }"
      />

      <component-listing
        v-if="fetchedData.data.data.length"
        :id="listingId"
        :static-data="fetchedData.data.data"
        :pagination="false"
        class="mt-l"
      >
        <template #default="{ item }">
          <Card
            :border="true"
            :border-color="item.color"
            class="domain-listing-item-container"
            @click="handleClick(item.uuid)"
          >
            <Title tag="h5">{{ item.title }}</Title>

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

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

import Banner from '@inside-commons/components/lib/Banner'
import TemplateContainer from '@inside-commons/components/lib/TemplateContainer'
import Random from '@inside-library/helpers/GenerateID'
import ParagraphListing from '@inside-library/components/listing/ParagraphListing'

export default {
  name: 'DomainPage',
  $_i18nRootPath: 'customs.SPACE.domain',
  components: {
    Title,
    Card,
    Banner,
    TemplateContainer,
    ParagraphListing
  },
  props: {
    fetchedData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      listingId: `pageListing${Random.ID()}`
    }
  },
  methods: {
    handleClick(uuid) {
      this.triggerModal(
        'domain',
        'fetch',
        {
          item: { uuid },
          content: 'domains'
        },
        {
          layout: 'right',
          size: 'm',
          transition: 'fadeInLeft'
        }
      )
    }
  }
}
</script>

<style lang="scss">
.domain-listing-item-container {
  position: relative;
  padding: var(--spacing-l);

  .edit-link {
    position: absolute;
    top: 8px;
    right: 8px;
  }
}
</style>
