<commit_before><template>

  <div class="wrapper">

    <h1>{{$tr('pageHeading')}}</h1>

    <p>
      {{$tr('pageSubHeading')}}
    </p>

    <div class="exportblock">
      <h2>{{$tr('detailsHeading')}}</h2>
      <p>
        {{$tr('detailsSubHeading')}}
      </p>
      <form :action="sessionlogurl" method="get">
        <icon-button :text="$tr('download')">
          <mat-svg category="file" name="file_download"/>
        </icon-button>
      </form>
      <p class="infobox">
        <b>{{$tr('note')}}</b>: {{$tr('detailsInfo')}}.
      </p>
    </div>

    <div class="exportblock">
      <h2>{{$tr('summaryHeading')}}</h2>
      <p>
        {{$tr('summarySubHeading')}}
      </p>
      <form :action="summarylogurl" method="get">
        <icon-button :text="$tr('download')">
          <mat-svg category="file" name="file_download"/>
        </icon-button>
      </form>
      <p class="infobox">
        <b>{{$tr('note')}}</b>: {{$tr('summaryInfo')}}
      </p>
    </div>

  </div>

</template>


<script>

  const coreApp = require('kolibri');

  module.exports = {
    $trNameSpace: 'manageData',
    $trs: {
      // Headings/subHeadings
      pageHeading: 'Export Usage Data',
      pageSubHeading: 'Download CSV (comma-separated value) files containing information about' +
        ' users and their interactions with the content on this device.',
      detailsHeading: 'Detail Logs',
      detailsSubHeading: 'Individual visits to each piece of content.',
      summaryHeading: 'Summary Logs',
      summarySubHeading: 'Total time/progress for each piece of content.',
      // info boxes
      detailsInfo: 'When a user views a piece of content, we record how long they spend and the' +
        ' progress they make. Each row in this file records a single visit a user made to a ' +
        'specific piece of content. This includes anonymous usage, when no user is logged in.',
      summaryInfo: 'A user may visit the same piece of content multiple times. This file records' +
        ' the total time and progress each user has achieved for each piece of content, ' +
        'summarized across possibly more than one visit. Anonymous usage is not included.',
      // button
      download: 'Download',
      // section indicator
      note: 'Note',
    },
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
    },
    computed: {
      summarylogurl() {
        return coreApp.urls['contentsummarylogcsv-list']();
      },
      sessionlogurl() {
        return coreApp.urls['contentsessionlogcsv-list']();
      },
    },
  };

</script>


<style lang="stylus" scoped>

  // @require 'jeet'
  @require '~kolibri.styles.definitions'

  @media (min-width: $medium-breakpoint)
    .exportblock
      col(1/2)

  .infobox
    background-color: $core-bg-warning
    border-radius: $radius
    font-size: 0.8em
    padding: 8px
    margin-left: -8px
    margin-right: 8px

  .wrapper
    clearfix()

  form
    display: inline
<commit_msg>convert data page to purecss grids<commit_after><template>

  <div class="pure-g">

    <h1 class="pure-u-1-1">{{$tr('pageHeading')}}</h1>

    <p class="pure-u-1-1">
      {{$tr('pageSubHeading')}}
    </p>

    <div :class="columnSize">
      <h2>{{$tr('detailsHeading')}}</h2>
      <p>
        {{$tr('detailsSubHeading')}}
      </p>
      <form :action="sessionlogurl" method="get">
        <icon-button :text="$tr('download')">
          <mat-svg category="file" name="file_download"/>
        </icon-button>
      </form>
      <p class="infobox">
        <b>{{$tr('note')}}</b>: {{$tr('detailsInfo')}}.
      </p>
    </div>

    <div :class="columnSize">
      <h2>{{$tr('summaryHeading')}}</h2>
      <p>
        {{$tr('summarySubHeading')}}
      </p>
      <form :action="summarylogurl" method="get">
        <icon-button :text="$tr('download')">
          <mat-svg category="file" name="file_download"/>
        </icon-button>
      </form>
      <p class="infobox">
        <b>{{$tr('note')}}</b>: {{$tr('summaryInfo')}}
      </p>
    </div>

  </div>

</template>


<script>

  const coreApp = require('kolibri');
  const responsiveWindow = require('kolibri.coreVue.mixins.responsiveWindow');

  module.exports = {
    mixins: [responsiveWindow],
    $trNameSpace: 'manageData',
    $trs: {
      // Headings/subHeadings
      pageHeading: 'Export Usage Data',
      pageSubHeading: 'Download CSV (comma-separated value) files containing information about' +
        ' users and their interactions with the content on this device.',
      detailsHeading: 'Detail Logs',
      detailsSubHeading: 'Individual visits to each piece of content.',
      summaryHeading: 'Summary Logs',
      summarySubHeading: 'Total time/progress for each piece of content.',
      // info boxes
      detailsInfo: 'When a user views a piece of content, we record how long they spend and the' +
        ' progress they make. Each row in this file records a single visit a user made to a ' +
        'specific piece of content. This includes anonymous usage, when no user is logged in.',
      summaryInfo: 'A user may visit the same piece of content multiple times. This file records' +
        ' the total time and progress each user has achieved for each piece of content, ' +
        'summarized across possibly more than one visit. Anonymous usage is not included.',
      // button
      download: 'Download',
      // section indicator
      note: 'Note',
    },
    components: {
      'icon-button': require('kolibri.coreVue.components.iconButton'),
    },
    computed: {
      columnSize() {
        return this.windowSize.breakpoint > 2 ? 'pure-u-1-2' : 'pure-u-1-1';
      },
      summarylogurl() {
        return coreApp.urls['contentsummarylogcsv-list']();
      },
      sessionlogurl() {
        return coreApp.urls['contentsessionlogcsv-list']();
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~kolibri.styles.definitions'

  .infobox
    background-color: $core-bg-warning
    border-radius: $radius
    font-size: 0.8em
    padding: 8px
    margin-left: -8px
    margin-right: 8px

  form
    display: inline

{'fraction_non_alphanumeric': 0.1544213263979194, 'fraction_numerical': 0.005364109232769831, 'mean_word_length': 2.6236749116607774, 'pattern_counts': {'":': 0, '<': 85, '<?xml version=': 0, '>': 86, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 14, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3520992', 'n_tokens_mistral': 1967, 'n_tokens_neox': 1898, 'n_words': 501}