<commit_before><template>

  <k-modal
    :title="$tr('reportErrorHeader')"
    :cancelText="$tr('closeErrorModalButtomPrompt')"
    class="error-detail-modal"
    @cancel="$emit('cancel')"
  >

    <section>
      <h3> {{ $tr('forumPrompt') }} </h3>
      <p> {{ $tr('forumDescription') }} </p>
      <k-external-link
        :text="forumLink"
        :href="forumLink"
      />
    </section>

    <!-- only when offline -->
    <section>
      <h3> {{ $tr('emailPrompt') }} </h3>
      <p> {{ $tr('emailDescription') }} </p>
      <!-- email link goes here. TODO Probably not an href? -->
      <k-external-link
        :text="emailAddress"
        :href="emailAddress"
      />
    </section>

    <section>
      <h3>
        {{ $tr('errorDetailsHeader') }}
      </h3>
      <code class="error-log">
        {{ error }}
      </code>
    </section>


    <section class="error-copying-options">
      <p>
        <k-button
          class="copy-to-clipboard-button"
          :primary="false"
          :text="$tr('copyToClipboardButtonPrompt')"
        />
      </p>
      <p>
        <!-- TODO change target, set download -->
        <k-external-link
          :text="$tr('downloadAsTextPrompt')"
          :href="errorTextFileLink"
        />
      </p>
    </section>


  </k-modal>

</template>


<script>

  import { mapState } from 'vuex';
  import kButton from 'kolibri.coreVue.components.kButton';
  import kExternalLink from 'kolibri.coreVue.components.kExternalLink';
  import kModal from 'kolibri.coreVue.components.kModal';

  export default {
    name: 'reportErrorModal',
    $trs: {
      reportErrorHeader: 'Report Error',
      forumPrompt: 'Visit the community forums',
      // reall long
      forumDescription:
        'Search the community forum to see if others encountered similar issues. If unable to find anything, paste the error details below into a new forum post so we can rectify the error in a future version of Kolibri.',
      forumPostingSuggestions:
        'Include a description of what you were trying to do and what you clicked on when the error appeared.',
      emailPrompt: 'Send an email to the developers',
      emailDescription: 'Contact the support team with your error details and we’ll do our best to help.',
      errorDetailsHeader: 'Error details',
      copyToClipboardButtonPrompt: 'Copy to clipboard',
      downloadAsTextPrompt: 'Or download as .text file',
      closeErrorModalButtomPrompt: 'Close',
    },
    components: {
      kButton,
      kExternalLink,
      kModal,
    },
    computed: {
      ...mapState({
        error: state => state.core.error || 'PRETEND THIS IS AN ERROR',
      }),
      forumLink() {
        return 'https://community.learningequality.org/c/support/kolibri';
      },
      emailAddress() {
        return '<EMAIL>';
      },
      errorTextFileLink() {
        if (navigator.msSaveBlob) {
          return navigator.msSaveBlob(new Blob([this.error], { type: 'text/plain' }));
        }
        const errorBlob = new Blob([this.error], {type: 'text/plain'});
        return URL.createObjectURL(errorBlob);
      }
    },
  };

</script>


<style lang="scss" scoped>

  @import '~kolibri.styles.definitions';

  .error-detail-modal {
    text-align: left;
  }

  .error-log {
    padding: 8px;
    background-color: $core-bg-error;
    border: $core-grey-300;
    display: block;
  }

  .copy-to-clipboard-button {
    margin-left: 0;
  }

</style><commit_msg>Making forum link wrap.<commit_after><template>

  <k-modal
    :title="$tr('reportErrorHeader')"
    :cancelText="$tr('closeErrorModalButtomPrompt')"
    class="error-detail-modal"
    @cancel="$emit('cancel')"
  >

    <section>
      <h3> {{ $tr('forumPrompt') }} </h3>
      <p> {{ $tr('forumDescription') }} </p>
      <k-external-link
        class="download-as-text-link"
        :text="forumLink"
        :href="forumLink"
      />
    </section>

    <!-- only when offline -->
    <section>
      <h3> {{ $tr('emailPrompt') }} </h3>
      <p> {{ $tr('emailDescription') }} </p>
      <!-- email link goes here. TODO Probably not an href? -->
      <k-external-link
        :text="emailAddress"
        :href="emailAddress"
      />
    </section>

    <section>
      <h3>
        {{ $tr('errorDetailsHeader') }}
      </h3>
      <code class="error-log">
        {{ error }}
      </code>
    </section>


    <section class="error-copying-options">
      <p>
        <k-button
          class="copy-to-clipboard-button"
          :primary="false"
          :text="$tr('copyToClipboardButtonPrompt')"
        />
      </p>
      <p>
        <!-- TODO change target, set download -->
        <k-external-link
          :text="$tr('downloadAsTextPrompt')"
          :href="errorTextFileLink"
        />
      </p>
    </section>


  </k-modal>

</template>


<script>

  import { mapState } from 'vuex';
  import kButton from 'kolibri.coreVue.components.kButton';
  import kExternalLink from 'kolibri.coreVue.components.kExternalLink';
  import kModal from 'kolibri.coreVue.components.kModal';

  export default {
    name: 'reportErrorModal',
    $trs: {
      reportErrorHeader: 'Report Error',
      forumPrompt: 'Visit the community forums',
      // reall long
      forumDescription:
        'Search the community forum to see if others encountered similar issues. If unable to find anything, paste the error details below into a new forum post so we can rectify the error in a future version of Kolibri.',
      forumPostingSuggestions:
        'Include a description of what you were trying to do and what you clicked on when the error appeared.',
      emailPrompt: 'Send an email to the developers',
      emailDescription: 'Contact the support team with your error details and we’ll do our best to help.',
      errorDetailsHeader: 'Error details',
      copyToClipboardButtonPrompt: 'Copy to clipboard',
      downloadAsTextPrompt: 'Or download as .text file',
      closeErrorModalButtomPrompt: 'Close',
    },
    components: {
      kButton,
      kExternalLink,
      kModal,
    },
    computed: {
      ...mapState({
        error: state => state.core.error || 'PRETEND THIS IS AN ERROR',
      }),
      forumLink() {
        return 'https://community.learningequality.org/c/support/kolibri';
      },
      emailAddress() {
        return '<EMAIL>';
      },
      errorTextFileLink() {
        if (navigator.msSaveBlob) {
          return navigator.msSaveBlob(new Blob([this.error], { type: 'text/plain' }));
        }
        const errorBlob = new Blob([this.error], {type: 'text/plain'});
        return URL.createObjectURL(errorBlob);
      }
    },
  };

</script>


<style lang="scss" scoped>

  @import '~kolibri.styles.definitions';

  .error-detail-modal {
    text-align: left;
  }

  .error-log {
    display: block;
    padding: 8px;
    background-color: $core-bg-error;
    border: $core-grey-300;
  }

  .copy-to-clipboard-button {
    margin-left: 0;
  }

</style>
{'fraction_non_alphanumeric': 0.14275466284074606, 'fraction_numerical': 0.0031563845050215206, 'mean_word_length': 2.3757869249394674, 'pattern_counts': {'":': 0, '<': 83, '<?xml version=': 0, '>': 85, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 9, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2767900', 'n_tokens_mistral': 2198, 'n_tokens_neox': 2150, 'n_words': 517}