.row
  .mr-auto.col-auto
    .list-group.text-dark
      .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.leg_prev(); focus_leg(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-leg.list-group.bg-dark(
      tag="div",
      :list="journey.data.main",
      handle=".handle"
    )
      .list-group-item.bg-white.text-white.show.placeholder-left(
        :class="journey.sel_leg >0? '': 'bg-dark'"
        slot="header"
      )
        .text {{'⋅'}}
      .list-group-item.handle.text-dark(
        v-for="(element, idx) in journey.data.main",
        :key="idx",
        @click="journey.leg_sel(idx)",
        :class="journey.sel_leg == idx ? 'bg-primary active' : 'bg-white'"
      )
        .text {{ element.title || "Leg "+idx}}
        i.fa.fa-times.text-small.fright(
          style="top: 2px; right: 2px; position: absolute",
          @click="journey.rm_leg(idx); focus_leg(journey);"
        )
      .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-white.text-dark.add(@click="journey.add_leg(); focus_leg(journey);"
        slot="footer"
        :class="journey.sel_leg >= journey.data.main.length-1? 'show': ''")
        div 
          i.fa.fa-plus()

  .ml-auto.col-auto
    .list-group.text-dark
      .list-group-item.show.bg-white.rounded(v-on:click.prevent="journey.leg_next(); focus_leg(journey);")
        i.fas.fa-angle-right
.row.text-center
    .col-6.col-sm-6.col-md-5.mr-auto
      .input.w-100
          input(
          placeholder="Leg" 
          v-model="journey.leg_get().title")
    .col-6.col-sm-6.col-md-4
        .input.w-100
            date-picker(
            :lang="lang",
            v-model="journey.leg_get().date_range",
            range="",
            format="ddd D MMM",
            placeholder="Date Range",
            v-on:change="journey.date_update(journey.sel_leg)"
        )