<template>
  <Page :fetched-data="fetchedData">
    <template #extra-fields>
      <section class="main-section">
        <Title tag="h4">
          {{ $_tr('ged.title') }}
        </Title>

        <div
          v-for="(lang, index) in availableLangs"
          :key="`disable-toggle-display-${index}`"
          class="mt-xxl"
        >
          <InputText
            :label="
              availableLangs.length > 1
                ? $_tc('ged.disableToggleDisplay.labelMultilingual', [lang])
                : $_tr('ged.disableToggleDisplay.labelMonolingual')
            "
            :default-value="
              fetchedData.general[`disable_toggle_display_${lang}`]
            "
            :model-name="`disable_toggle_display_${lang}`"
          />
        </div>
      </section>

      <section class="main-section">
        <Title tag="h4">
          {{ $_tr('sop.title') }}
        </Title>

        <div
          v-for="(lang, index) in availableLangs"
          :key="`sop-folder-title-${index}`"
          class="mt-xxl"
        >
          <InputText
            :label="
              availableLangs.length > 1
                ? $_tc('sop.sopFolderTitle.labelMultilingual', [lang])
                : $_tr('sop.sopFolderTitle.labelMonolingual')
            "
            :default-value="fetchedData.general[`sop_folder_${lang}_title`]"
            :model-name="`sop_folder_${lang}_title`"
            form-id="advanced-settings-identity"
          />
        </div>
      </section>
    </template>
  </Page>
</template>

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

import Page from '@inside-administration/components/pages/advanced-settings/AdminAdvancedSettingsIdentityPage'

import InputText from '@inside-forms/displays/sub-components/fields/InputText'

export default {
  name: 'AdminAdvancedSettingsIdentityPage',
  $_i18nRootPath:
    'administration.PAGES.ADVANCED_SETTINGS.adminAdvancedSettingsIdentityPage',
  components: {
    Title,
    Page,
    InputText
  },
  props: {
    fetchedData: {
      type: Object
    }
  },
  computed: {
    availableLangs() {
      return this.$store.getters.getAvailablesLangs
    }
  }
}
</script>
