<template>
  <div class="file-nav-ged__header">
    <div v-if="heritedData.is_media_folder" class="file-nav-ged__header-top">
      <p>
        {{ heritedData.title }}

        <span
          v-if="heritedData.children && heritedData.children.length > 0"
          class="photos-length"
        >
          ({{ heritedData.children.length }}
          {{ $_tc('album', heritedData.children.length > 1 ? 0 : 1) }})
        </span>
      </p>

      <span
        v-if="!disableToggleDisplay"
        class="toggle-display"
        @click="toggleDisplayList"
      >
        <Icon
          v-if="displayList"
          :aria-label="$_tr('altIconDisplayCard')"
          icon="display-card"
        />
        <Icon
          v-else
          :aria-label="$_tr('altIconDisplayList')"
          icon="display-list"
        />
      </span>
    </div>

    <ul v-else class="header-filters">
      <li>{{ $_tr('headers.name') }}</li>
      <li v-if="!getTablet">{{ $_tr('headers.countries') }}</li>
      <li v-if="!getTablet">{{ $_tr('headers.update') }}</li>
      <li />
    </ul>
  </div>
</template>

<script>
import { Icon } from 'inside-collection/atoms'
export default {
  name: 'HeaderListGed',
  $_i18nRootPath: 'customs.GED.headerList',
  components: { Icon },
  props: {
    disableToggleDisplay: {
      type: Boolean
    }
  },
  data() {
    return {
      displayList: false
    }
  },
  methods: {
    toggleDisplayList() {
      this.displayList = !this.displayList

      this.$emit('displayListStatus', this.displayList)
    }
  }
}
</script>
