<commit_before><template>

  <div class='pane'>

    <!-- search block -->
    <div class='top'>
      <input
        type="search"
        v-el:search
        placeholder="Find content..."
        autocomplete="off"
        v-focus="searchOpen"
        v-model="localSearchTerm"
        id="search"
        name="search"
        @keyup="search() | debounce 500"
        @keydown.esc.prevent="clear()">
      <button class="reset" type="reset" @click="clear()" :style="{ visibility: localSearchTerm ? 'inherit' : 'hidden' }">
        <svg height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </button>
    </div>

    <!-- results -->
    <div class='results' v-if="!loading">
      <h4 v-if="searchTerm">
        {{ message }}
      </h4>

      <card-grid v-if="topics.length && showTopics">
        <topic-card
          v-for="topic in topics"
          class="card"
          :id="topic.id"
          :title="topic.title"
          :ntotal="topic.n_total"
          :ncomplete="topic.n_complete">
        </topic-card>
      </card-grid>

      <card-grid v-if="contents.length">
        <content-card
          v-for="content in contents"
          class="card"
          :title="content.title"
          :thumbnail="content.thumbnail"
          :kind="content.kind"
          :progress="content.progress"
          :id="content.id">
        </content-card>
      </card-grid>
    </div>

  </div>

</template>


<script>

  const focus = require('vue-focus').focus;
  const actions = require('../../actions');


  module.exports = {
    directives: { focus },
    props: {
      showTopics: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        localSearchTerm: '',
      };
    },
    computed: {
      message() {
        if (this.topics.length || this.contents.length) {
          return 'Search results:';
        } else if (!this.topics.length && !this.contents.length) {
          return 'Could not find any matches.';
        }
        return '';
      },
    },
    methods: {
      clear() {
        if (!this.localSearchTerm) {
          this.toggleSearch();
        } else {
          this.localSearchTerm = '';
          this.$els.search.focus();
          this.triggerSearch(this.localSearchTerm);
        }
      },
      search() {
        this.triggerSearch(this.localSearchTerm);
      },
    },
    components: {
      'topic-card': require('../topic-card'),
      'content-card': require('../content-card'),
      'card-grid': require('../card-grid'),
    },
    vuex: {
      getters: {
        contents: state => state.searchState.contents,
        topics: state => state.searchState.topics,
        loading: state => state.searchLoading,
        searchTerm: state => state.searchState.searchTerm,
        searchOpen: state => state.searchOpen,
      },
      actions: {
        triggerSearch: actions.triggerSearch,
        toggleSearch: actions.toggleSearch,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'
  @require '../learn.styl'

  .pane
    background-color: $core-bg-canvas
    margin-right: $right-margin

  .top
    background-color: $core-bg-canvas
    position: fixed
    top: 0
    width-auto-adjust()
    height: 4em
    z-index: 10000
    margin-right: $right-margin
    padding-top: 1rem
    text-align: center

  .results
    margin-top: 5em
    width-auto-adjust()

  input
    display: inline-block
    border: 1px solid #ccc
    box-shadow: inset 0 1px 3px #ddd
    border-radius: 2em
    padding: 0.5em 1em
    vertical-align: middle
    box-sizing: border-box
    width: 60%
    &:focus
      outline: none
      border-color: $core-text-annotation

  .reset
    border:1px solid transparent
    background-color: transparent
    display: inline-block
    vertical-align: middle
    outline: none
    cursor: pointer
    right: 40px
    position: relative
    padding: 4px
    svg
      fill: $core-text-annotation
      height: 15px
      width: 15px

</style>
<commit_msg>fixes up search ‘clear’ button in IE10<commit_after><template>

  <div class='pane'>

    <!-- search block -->
    <div class='top'>
      <input
        type="search"
        v-el:search
        placeholder="Find content..."
        autocomplete="off"
        v-focus="searchOpen"
        v-model="localSearchTerm"
        id="search"
        name="search"
        @keyup="search() | debounce 500"
        @keydown.esc.prevent="clear()">
      <button class="reset" type="reset" @click="clear()" :style="{ visibility: localSearchTerm ? 'inherit' : 'hidden' }">
        <svg height="24" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
          <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"></path>
          <path d="M0 0h24v24H0z" fill="none"></path>
        </svg>
      </button>
    </div>

    <!-- results -->
    <div class='results' v-if="!loading">
      <h4 v-if="searchTerm">
        {{ message }}
      </h4>

      <card-grid v-if="topics.length && showTopics">
        <topic-card
          v-for="topic in topics"
          class="card"
          :id="topic.id"
          :title="topic.title"
          :ntotal="topic.n_total"
          :ncomplete="topic.n_complete">
        </topic-card>
      </card-grid>

      <card-grid v-if="contents.length">
        <content-card
          v-for="content in contents"
          class="card"
          :title="content.title"
          :thumbnail="content.thumbnail"
          :kind="content.kind"
          :progress="content.progress"
          :id="content.id">
        </content-card>
      </card-grid>
    </div>

  </div>

</template>


<script>

  const focus = require('vue-focus').focus;
  const actions = require('../../actions');


  module.exports = {
    directives: { focus },
    props: {
      showTopics: {
        type: Boolean,
        default: true,
      },
    },
    data() {
      return {
        localSearchTerm: '',
      };
    },
    computed: {
      message() {
        if (this.topics.length || this.contents.length) {
          return 'Search results:';
        } else if (!this.topics.length && !this.contents.length) {
          return 'Could not find any matches.';
        }
        return '';
      },
    },
    methods: {
      clear() {
        if (!this.localSearchTerm) {
          this.toggleSearch();
        } else {
          this.localSearchTerm = '';
          this.$els.search.focus();
          this.triggerSearch(this.localSearchTerm);
        }
      },
      search() {
        this.triggerSearch(this.localSearchTerm);
      },
    },
    components: {
      'topic-card': require('../topic-card'),
      'content-card': require('../content-card'),
      'card-grid': require('../card-grid'),
    },
    vuex: {
      getters: {
        contents: state => state.searchState.contents,
        topics: state => state.searchState.topics,
        loading: state => state.searchLoading,
        searchTerm: state => state.searchState.searchTerm,
        searchOpen: state => state.searchOpen,
      },
      actions: {
        triggerSearch: actions.triggerSearch,
        toggleSearch: actions.toggleSearch,
      },
    },
  };

</script>


<style lang="stylus" scoped>

  @require '~core-theme.styl'
  @require '../learn.styl'

  .pane
    background-color: $core-bg-canvas
    margin-right: $right-margin

  .top
    background-color: $core-bg-canvas
    position: fixed
    top: 0
    width-auto-adjust()
    height: 4em
    z-index: 10000
    margin-right: $right-margin
    padding-top: 1rem
    text-align: center

  .results
    margin-top: 5em
    width-auto-adjust()

  input
    display: inline-block
    border: 1px solid #ccc
    box-shadow: inset 0 1px 3px #ddd
    border-radius: 2em
    padding: 0.5em 1em
    vertical-align: middle
    box-sizing: border-box
    width: 60%
    &:focus
      outline: none
      border-color: $core-text-annotation

    // prevent IE10 from showing a duplicated 'x'  clear icon
    &::-ms-clear
      display: none

  .reset
    border: none
    background-color: white // IE10 needs a non-transparent bg to be clickable
    display: inline-block
    outline: none
    cursor: pointer
    position: relative
    top: 1px
    right: 40px
    padding: 4px
    svg
      fill: $core-text-annotation
      height: 15px
      width: 15px

</style>

{'fraction_non_alphanumeric': 0.1489115331171839, 'fraction_numerical': 0.028022232515053265, 'mean_word_length': 1.9497950819672132, 'pattern_counts': {'":': 0, '<': 69, '<?xml version=': 0, '>': 79, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 2}, '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': '6200701', 'n_tokens_mistral': 2936, 'n_tokens_neox': 2703, 'n_words': 581}