.row
  .mr-auto.col-auto
    .list-group.text-dark
      .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.day_prev(); focus_day(journey);")
        i.fas.fa-angle-left
  .col-8.col-sm-8.col-md-10.scroll-handler(
  @pointerleave="nav_mouseleave"
  @pointermove="nav_mousemove")
  
    draggable.scroll-content.nav-day.list-group.bg-dark(
      tag="div",
      :list="journey.leg_get().day_title",
      handle=".handle"
    )
      .list-group-item.bg-white.text-white.show.placeholder-left(
        :class="journey.sel_day >0? '': 'bg-dark'"
        slot="header"
      )
        .text {{'⋅'}}
      .list-group-item.handle.text-dark(
        v-for="(element, idx) in journey.leg_len()",
        :key="idx",
        @click="journey.day_sel(idx)",
        :class="journey.sel_day == idx ? 'bg-primary active' : 'bg-white'"
      )
        .text {{ journey.leg_get().day_title[idx] || "Leg "+idx}}
      .list-group-item.bg-white.text-white.show.placeholder-right(
        :class="journey.sel_leg < journey.data.main.length-1? '': 'bg-dark'"
        slot="footer"
      )
        .text {{'⋅'}}
      .list-group-item.bg-dark.text-white(
          style="display:none"
          slot="footer"
      )
        .text {{'⋅'}}

  .ml-auto.col-auto
    .list-group.text-dark
      .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.day_next(); focus_day(journey);")
        i.fas.fa-angle-right
.row
  .col-8.col-sm-6.col-md-4
    .input.w-100
      input.col-8(
      placeholder="Day"
      v-model="journey.leg_get().day_title[journey.sel_day]"
      )
  .ml-auto.col-4.col-sm-4.col-md-3
    .input.w-100
      input.text-right(
      disabled="",
      :value="journey.date_sel() + ' (' + journey.sel_day + ')'"
      )