<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner sliding">
        <div class="left">
            <a href="#" class="link back">
              <i class="icon icon-back"></i>
              <span class="if-not-md">Back</span>
            </a>
          </div>
        <div class="title">Tabbar Scrollable</div>
        <div class="right">
          <a class="link" @click="toggleToolbarPosition">
            <i class="icon material-icons rotate-icon md-only">compare_arrows</i>
            <i class="icon f7-icons rotate-icon if-not-md">reload</i>
          </a>
        </div>
      </div>
    </div>
    <div class="toolbar tabbar tabbar-scrollable toolbar-{{toolbarPosition}}">
      <div class="toolbar-inner">
        {{#each tabs}}
        <a href="#tab-{{this}}" class="tab-link {{#if @first}}tab-link-active{{/if}}">Tab {{this}}</a>
        {{/each}}
      </div>
    </div>
    <div class="tabs">
      {{#each tabs}}
      <div id="tab-{{this}}" class="page-content tab {{#if @first}}tab-active{{/if}}">
        <div class="block">
          <p><b>Tab {{this}} content</b></p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque corrupti, quos asperiores unde aspernatur illum odio, eveniet. Fugiat magnam perspiciatis ex dignissimos, rerum modi ea nesciunt praesentium iusto optio rem?</p>
          <p>Illo debitis et recusandae, ipsum nisi nostrum vero delectus quasi. Quasi, consequatur! Corrupti, explicabo maxime incidunt fugit sint dicta saepe officiis sed expedita, minima porro! Ipsa dolores quia, delectus labore!</p>
          <p>At similique minima placeat magni molestias sunt deleniti repudiandae voluptatibus magnam quam esse reprehenderit dolor enim qui sed alias, laboriosam quaerat laborum iure repellat praesentium pariatur dolorum possimus veniam! Consectetur.</p>
          <p>Sunt, sed, magnam! Qui, suscipit. Beatae cum ullam necessitatibus eligendi, culpa rem excepturi consequatur quidem totam eum voluptates nihil, enim pariatur incidunt corporis sed facere magni earum tenetur rerum ea.</p>
          <p>Veniam nulla quis molestias voluptatem inventore consectetur iusto voluptatibus perferendis quisquam, cupiditate voluptates, tenetur vero magnam nisi animi praesentium atque adipisci optio quod aliquid vel delectus ad? Dicta deleniti, recusandae.</p>
        </div>
      </div>
      {{/each}}
    </div>
  </div>
</template>
<style scoped>
  .rotate-icon {
    transform: rotate(90deg);
  }
</style>
<script>
  return {
    data() {
      return {
        tabs: [1,2,3,4,5,6,7,8,9,10],
        toolbarPosition: 'bottom',
      };
    },
    methods: {
      toggleToolbarPosition: function () {
        this.$setState({
          toolbarPosition: this.toolbarPosition === 'top' ? 'bottom' : 'top',
        });
      },
    }
  }
</script>
