<commit_before><template>

  <OnboardingForm
    :header="header"
    :description="formDescription"
    :disabled="selectedFacilityId === '' || formDisabled"
    @submit="handleCredentialsSubmit"
  >
    <!-- Only one Facility -->
    <template v-if="singleFacility">
      <FacilityAdminCredentialsForm
        ref="credentialsForm"
        :facility="facilities[0]"
        :device="device"
        :singleFacility="true"
        :shouldValidate="shouldValidate"
      />
    </template>

    <!-- Multiple Facilities -->
    <template v-else>

      <RadioButtonGroup
        :items="facilities"
        :currentValue.sync="selectedFacilityId"
        :itemLabel="x => formatNameAndId(x.name, x.id)"
        :itemValue="x => x.id"
        :disabled="formDisabled"
      >
        <template #underbutton="{ selected }">
          <FacilityAdminCredentialsForm
            v-if="selectedFacilityId === selected.id"
            ref="credentialsForm"
            :facility="selected"
            :device="device"
            :shouldValidate="shouldValidate"
            :disabled="formDisabled"
          />
        </template>
      </RadioButtonGroup>
    </template>
  </OnboardingForm>

</template>


<script>

  import isString from 'lodash/isString';
  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
  import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
  import {
    FacilityAdminCredentialsForm,
    RadioButtonGroup,
  } from 'kolibri.coreVue.componentSets.sync';
  import OnboardingForm from '../onboarding-forms/OnboardingForm';

  export default {
    name: 'SelectFacilityForm',
    components: {
      FacilityAdminCredentialsForm,
      RadioButtonGroup,
      OnboardingForm,
    },
    mixins: [commonCoreStrings, commonSyncElements],
    props: {
      device: {
        type: Object,
        required: true,
        validator(val) {
          return isString(val.name) && isString(val.id) && isString(val.baseurl);
        },
      },
    },
    data() {
      return {
        selectedFacilityId: '',
        facilities: [],
        shouldValidate: false,
        formDisabled: false,
      };
    },
    computed: {
      singleFacility() {
        return this.facilities.length === 1;
      },
      header() {
        if (this.singleFacility) {
          return this.getCommonSyncString('importFacilityAction');
        } else {
          return this.getCommonSyncString('selectFacilityTitle');
        }
      },
      formDescription() {
        if (this.device.name) {
          return this.$tr('commaSeparatedPair', {
            first: this.formatNameAndId(this.device.name, this.device.id),
            second: this.device.baseurl,
          });
        }
        return '';
      },<commit_msg>Initialize `selectedFacilityId` to non-empty string<commit_after><template>

  <OnboardingForm
    :header="header"
    :description="formDescription"
    :disabled="selectedFacilityId === '' || formDisabled"
    @submit="handleCredentialsSubmit"
  >
    <!-- Only one Facility -->
    <template v-if="singleFacility">
      <FacilityAdminCredentialsForm
        ref="credentialsForm"
        :facility="facilities[0]"
        :device="device"
        :singleFacility="true"
        :shouldValidate="shouldValidate"
      />
    </template>

    <!-- Multiple Facilities -->
    <template v-else>

      <RadioButtonGroup
        :items="facilities"
        :currentValue.sync="selectedFacilityId"
        :itemLabel="x => formatNameAndId(x.name, x.id)"
        :itemValue="x => x.id"
        :disabled="formDisabled"
      >
        <template #underbutton="{ selected }">
          <FacilityAdminCredentialsForm
            v-if="selectedFacilityId === selected.id"
            ref="credentialsForm"
            :facility="selected"
            :device="device"
            :shouldValidate="shouldValidate"
            :disabled="formDisabled"
          />
        </template>
      </RadioButtonGroup>
    </template>
  </OnboardingForm>

</template>


<script>

  import isString from 'lodash/isString';
  import commonCoreStrings from 'kolibri.coreVue.mixins.commonCoreStrings';
  import commonSyncElements from 'kolibri.coreVue.mixins.commonSyncElements';
  import {
    FacilityAdminCredentialsForm,
    RadioButtonGroup,
  } from 'kolibri.coreVue.componentSets.sync';
  import OnboardingForm from '../onboarding-forms/OnboardingForm';

  export default {
    name: 'SelectFacilityForm',
    components: {
      FacilityAdminCredentialsForm,
      RadioButtonGroup,
      OnboardingForm,
    },
    mixins: [commonCoreStrings, commonSyncElements],
    props: {
      device: {
        type: Object,
        required: true,
        validator(val) {
          return isString(val.name) && isString(val.id) && isString(val.baseurl);
        },
      },
    },
    data() {
      return {
        // Need to initialize to non-empty string to fix #7595
        selectedFacilityId: 'selectedFacilityId',
        facilities: [],
        shouldValidate: false,
        formDisabled: false,
      };
    },
    computed: {
      singleFacility() {
        return this.facilities.length === 1;
      },
      header() {
        if (this.singleFacility) {
          return this.getCommonSyncString('importFacilityAction');
        } else {
          return this.getCommonSyncString('selectFacilityTitle');
        }
      },
      formDescription() {
        if (this.device.name) {
          return this.$tr('commaSeparatedPair', {
            first: this.formatNameAndId(this.device.name, this.device.id),
            second: this.device.baseurl,
          });
        }
        return '';
      },
{'fraction_non_alphanumeric': 0.122906013048845, 'fraction_numerical': 0.0014106859460412625, 'mean_word_length': 2.3502658003544004, 'pattern_counts': {'":': 0, '<': 37, '<?xml version=': 0, '>': 41, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6003622', 'n_tokens_mistral': 1619, 'n_tokens_neox': 1609, 'n_words': 262}