<commit_before><template>

  <core-modal
    title="Export Channel to a Local Drive"
    :error="wizardState.error ? true : false"
    :disableclose="wizardState.busy"
    :enablebgclickcancel="false"
    @cancel="cancel"
    @enter="submit"
  >
    <div>

      <template v-if="!drivesLoading">
        <p v-if="writableDrives.length === 0">
          No writable driveswere detected.
        </p>
        <p v-if="writableDrives.length === 1">
          Writable drive detected: {{ writableDrives[0].name }}
        </p>
        <template v-if="writableDrives.length > 1">
          <p>Writable drives detected:</p>
          <div v-for="(index, drive) in writableDrives">
            <input
              type="radio"
              :id="'drive-'+index"
              :value="drive.id"
              v-model="selectedDrive"
            >
            <label :for="'drive-'+index">{{drive.name}} {{index}}</label>
          </div>
        </template>

        <p v-if="unwritableDrives.length">Note: {{unwritableDrives.length}} additional drives were detected, but don't appear to be writable.</p>
      </template>
      <loading-spinner v-else></loading-spinner>

      <button @click="updateWizardLocalDriveList" :disabled="wizardState.busy">
        Refresh
      </button>
    </div>

    <div>
      {{ wizardState.error }}
    </div>

    <div>
      <button @click="cancel" :disabled="wizardState.busy">
        Cancel
      </button>
      <button @click="submit" :disabled="!canSubmit">
        Export
      </button>
    </div>
  </core-modal>

</template>


<script>

  const actions = require('../../actions');

  module.exports = {
    components: {
      'modal': require('./modal'),
      'icon-button': require('icon-button'),
    },
    data: () => ({
      selectedDrive: undefined, // used when there's more than one option
    }),
    computed: {
      driveToUse() {
        if (this.writableDrives.length === 1) {
          return this.writableDrives[0].id;
        }
        return this.selectedDrive;
      },
      drivesLoading() {
        return this.wizardState.driveList === null;
      },
      writableDrives() {
        return this.wizardState.driveList.filter(
          (drive) => drive.writable
        );
      },
      unwritableDrives() {
        return this.wizardState.driveList.filter(
          (drive) => !drive.writable
        );
      },
      canSubmit() {
        if (this.drivesLoading || this.wizardState.busy) {
          return false;
        }
        return Boolean(this.driveToUse);
      },
    },
    methods: {
      submit() {
        this.triggerLocalContentExportTask(this.driveToUse);
      },
      cancel() {
        if (!this.wizardState.busy) {
          this.cancelImportExportWizard();
        }
      },
    },
    vuex: {
      getters: {
        wizardState: (state) => state.pageState.wizardState,
      },
      actions: {
        startImportWizard: actions.startImportWizard,
        updateWizardLocalDriveList: actions.updateWizardLocalDriveList,
        cancelImportExportWizard: actions.cancelImportExportWizard,
        triggerLocalContentExportTask: actions.triggerLocalContentExportTask,
      },
    },
  };

</script>


<style lang="stylus" scoped></style>
<commit_msg>Import Source --> Export styling<commit_after><template>

  <core-modal
    title="Export Channel to a Local Drive"
    :error="wizardState.error ? true : false"
    :disableclose="wizardState.busy"
    :enablebgclickcancel="false"
    @cancel="cancel"
    @enter="submit"
  >
    <div class="main">

      <template v-if="!drivesLoading">
        <div class="modal-message">
          <h2 class="core-text-alert" v-if="writableDrives.length === 0">
            No writable driveswere detected.
          </h2>
          <h2 v-if="writableDrives.length === 1">
            Writable drive detected: {{ writableDrives[0].name }}
          </h2>
          <template v-if="writableDrives.length > 1">
            <h2>Writable drives detected:</h2>
            <div v-for="(index, drive) in writableDrives">
              <input
                type="radio"
                :id="'drive-'+index"
                :value="drive.id"
                v-model="selectedDrive"
              >
              <label :for="'drive-'+index">{{drive.name}} {{index}}</label>
            </div>
          </template>

          <p class="core-text-annotation" v-if="unwritableDrives.length">Note: {{unwritableDrives.length}} additional drives were detected, but don't appear to be writable.</p>
        </div>
      </template>
      <loading-spinner v-else></loading-spinner>

      <icon-button @click="updateWizardLocalDriveList" :disabled="wizardState.busy" text="Refresh">
        <svg src="../icons/refresh.svg"></svg>
      </icon-button>
    </div>

    <div>
      {{ wizardState.error }}
    </div>

    <div class="button-wrapper">
      <button class="button-cancel" @click="cancel" :disabled="wizardState.busy">
        Cancel
      </button>
      <button @click="submit" :disabled="!canSubmit">
        Export
      </button>
    </div>
  </core-modal>

</template>


<script>

  const actions = require('../../actions');

  module.exports = {
    components: {
      'modal': require('./modal'),
      'icon-button': require('icon-button'),
    },
    data: () => ({
      selectedDrive: undefined, // used when there's more than one option
    }),
    computed: {
      driveToUse() {
        if (this.writableDrives.length === 1) {
          return this.writableDrives[0].id;
        }
        return this.selectedDrive;
      },
      drivesLoading() {
        return this.wizardState.driveList === null;
      },
      writableDrives() {
        return this.wizardState.driveList.filter(
          (drive) => drive.writable
        );
      },
      unwritableDrives() {
        return this.wizardState.driveList.filter(
          (drive) => !drive.writable
        );
      },
      canSubmit() {
        if (this.drivesLoading || this.wizardState.busy) {
          return false;
        }
        return Boolean(this.driveToUse);
      },
    },
    methods: {
      submit() {
        this.triggerLocalContentExportTask(this.driveToUse);
      },
      cancel() {
        if (!this.wizardState.busy) {
          this.cancelImportExportWizard();
        }
      },
    },
    vuex: {
      getters: {
        wizardState: (state) => state.pageState.wizardState,
      },
      actions: {
        startImportWizard: actions.startImportWizard,
        updateWizardLocalDriveList: actions.updateWizardLocalDriveList,
        cancelImportExportWizard: actions.cancelImportExportWizard,
        triggerLocalContentExportTask: actions.triggerLocalContentExportTask,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'

  .main
    text-align: center
    margin-bottom: 2em

  .modal-message
    margin: 2em 0

  .button-wrapper
    margin: 1em
    text-align: center

  button
    margin: 0.4em

</style>

{'fraction_non_alphanumeric': 0.14410293066476054, 'fraction_numerical': 0.0034310221586847747, 'mean_word_length': 2.1120996441281137, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 96, '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': '1467069', 'n_tokens_mistral': 2192, 'n_tokens_neox': 2094, 'n_words': 373}