<template>
  <div class="dashboard-page">
    <Banner
      page="dashboard"
      :back="{
        href: formatHref(
          {
            name: 'HomePage'
          },
          $_currentLang
        ),
        title: $_tr('back')
      }"
    >
      <template #footer>
        <button class="btn-reset add-content" @click="addContent">
          <BaseText :dark-mode="true"> {{ $_tr('listing.add') }} </BaseText>
        </button>
      </template>
    </Banner>

    <DashboardListing :contents="contents" />
  </div>
</template>

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

import { formatHref } from '@inside-library/helpers/Langs'
import Banner from '@inside-commons/components/lib/Banner'

import DashboardListing from '../../components/dashboard/DashboardListing'

export default {
  name: 'DashboardPage',
  $_i18nRootPath: 'customs.dashboard.CONTAINER',
  components: {
    BaseText,
    Banner,
    DashboardListing
  },
  data() {
    return {
      contents: ['p_and_p', 'p_and_p_france']
    }
  },
  methods: {
    formatHref,
    addContent() {
      this.triggerModal(
        'dashboard-add',
        'static',
        {
          item: {
            contents: [
              {
                title: this.$_tr('customs.dashboard.LISTING.types.p_and_p'),
                value: 'p_and_p'
              },
              {
                title: this.$_tr(
                  'customs.dashboard.LISTING.types.p_and_p_france'
                ),
                value: 'p_and_p_france'
              }
            ]
          }
        },
        {
          layout: 'center',
          size: 'm',
          transition: 'fadeIn'
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
@use '@inside-library/styles/mixins/partials/common-mixin' as *;

.dashboard-page {
  .add-content {
    display: block;
    padding: var(--spacing-s) var(--spacing-xl);
    margin: var(--spacing-m) auto var(--spacing-s);
    border: 1px solid var(--color-light);
    border-radius: var(--radius-l);

    @include transition(all 0.4s);

    &:hover {
      background: var(--color-light);

      .ds-base-text-container {
        color: var(--color-text);

        @include transition(all 0.4s);
      }
    }
  }
}
</style>
