<commit_before><template>

  <div>
    <nav class="nav" role="navigation" aria-label="You are here:">
      <span class="learn-bread" v-if="pageName === PageNames.LEARN_CONTENT">
        <breadcrumb :linkobject="learnRootLink" text="Learn"></breadcrumb>
      </span>

      <template v-if="pageName === PageNames.EXPLORE_TOPIC">
        <span class="landscape">
          <breadcrumb :showarrow='false' :linkobject="exploreRootLink" text="Explore"></breadcrumb>
        </span>
        <span class="portrait">
          <breadcrumb :linkobject="portraitOnlyParentLink"></breadcrumb>
        </span>
      </template>

      <span v-if="pageName === PageNames.EXPLORE_CONTENT">
        <breadcrumb :linkobject="parentLink"></breadcrumb>
      </span>

      <span class="middle-bread explore-bread" v-if="pageMode === PageModes.EXPLORE" v-for="crumb in crumbs">
        <a v-link="crumbLink(crumb.id)">{{ crumb.title }}</a>
      </span>
    </nav>
  </div>

</template>


<script>

  const PageNames = require('../../state/constants').PageNames;
  const PageModes = require('../../state/constants').PageModes;
  const getters = require('../../state/getters');

  module.exports = {
    components: {
      breadcrumb: require('./breadcrumb'),
    },
    computed: {
      PageModes() {
        return PageModes;
      },
      PageNames() {
        return PageNames;
      },
      learnRootLink() {
        return { name: PageNames.LEARN_ROOT };
      },
      exploreRootLink() {
        return { name: PageNames.EXPLORE_ROOT };
      },
      parentLink() {
        let bread;
        let id;
        if (this.pageState.content) {
          bread = this.pageState.content.breadcrumbs;
          id = bread[bread.length - 1].id;
        }
        return {
          name: PageNames.EXPLORE_TOPIC,
          params: { id },
        };
      },
      portraitOnlyParentLink() {
        if (this.pageState.topic) {
          const bread = this.pageState.topic.breadcrumbs;
          if (bread[bread.length - 1]) {
            const id = bread[bread.length - 1].id;
            return {
              name: PageNames.EXPLORE_TOPIC,
              params: { id },
            };
          }
        }
        return { name: PageNames.EXPLORE_ROOT };
      },
    },
    methods: {
      crumbLink(id) {
        return {
          name: PageNames.EXPLORE_TOPIC,
          params: { id },
        };
      },
    },
    vuex: {
      getters: {
        pageMode: getters.pageMode,
        crumbs: state => (state.pageState.topic ? state.pageState.topic.breadcrumbs : null),
        pageName: state => state.pageName,
        pageState: state => state.pageState,
      },
    },
  };

</script>


<style lang="stylus" scoped>

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

  .nav
    margin-top: 2em
    margin-bottom:1.4em
<commit_msg>clean up conditional and page checking logic<commit_after><template>

  <div>
    <nav class="nav" role="navigation" aria-label="You are here:">
      <span class="learn-bread" v-if="pageName === PageNames.LEARN_CONTENT">
        <breadcrumb :linkobject="learnRootLink" text="Learn"></breadcrumb>
      </span>

      <template v-if="pageName === PageNames.EXPLORE_TOPIC">
        <span class="landscape">
          <breadcrumb :showarrow='false' :linkobject="exploreRootLink" text="Explore"></breadcrumb>
        </span>
        <span class="portrait">
          <breadcrumb :linkobject="parentLink"></breadcrumb>
        </span>
        <span class="middle-bread landscape" v-for="crumb in topicCrumbs">
          <a v-link="topicLink(crumb.id)">{{ crumb.title }}</a>
        </span>
      </template>

      <span v-if="pageName === PageNames.EXPLORE_CONTENT">
        <breadcrumb :linkobject="parentLink"></breadcrumb>
      </span>

    </nav>
  </div>

</template>


<script>

  const PageNames = require('../../state/constants').PageNames;
  const PageModes = require('../../state/constants').PageModes;
  const getters = require('../../state/getters');

  module.exports = {
    components: {
      breadcrumb: require('./breadcrumb'),
    },
    computed: {
      PageModes() {
        return PageModes;
      },
      PageNames() {
        return PageNames;
      },
      learnRootLink() {
        return { name: PageNames.LEARN_ROOT };
      },
      exploreRootLink() {
        return { name: PageNames.EXPLORE_ROOT };
      },
      parentLink() {
        let breadcrumbs = [];
        if (this.pageName === PageNames.EXPLORE_CONTENT) {
          breadcrumbs = this.pageState.content.breadcrumbs;
        } else if (this.pageName === PageNames.EXPLORE_TOPIC) {
          breadcrumbs = this.pageState.topic.breadcrumbs;
        }
        if (breadcrumbs.length) {
          return this.topicLink(breadcrumbs[breadcrumbs.length - 1].id);
        }
        return { name: PageNames.EXPLORE_ROOT };
      },
    },
    methods: {
      topicLink(id) {
        return {
          name: PageNames.EXPLORE_TOPIC,
          params: { id },
        };
      },
    },
    vuex: {
      getters: {
        pageMode: getters.pageMode,
        topicCrumbs: state => state.pageState.topic.breadcrumbs,
        pageName: state => state.pageName,
        pageState: state => state.pageState,
      },
    },
  };

</script>


<style lang="stylus" scoped>

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

  .nav
    margin-top: 2em
    margin-bottom:1.4em

{'fraction_non_alphanumeric': 0.15168331483536812, 'fraction_numerical': 0.001849796522382538, 'mean_word_length': 2.1546091015169195, 'pattern_counts': {'":': 0, '<': 65, '<?xml version=': 0, '>': 71, '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': '5104893', 'n_tokens_mistral': 1744, 'n_tokens_neox': 1724, 'n_words': 296}