include smallbar.pug

.bg-dark.text-white(v-if="journey && journey.leg_get()")
  .container
    .row.align(style="padding-top:45px;position:relative")
      .col-6.col-sm-4.col-md-3
        .input.text-big
          input.text-center(v-model="journey.data.name" placeholder="My Journey" type="text")
      .col-6.col-sm-4.col-md-3( v-if="useDay" )
        .input.text-small
          input.text-center(v-model="journey.leg_get().title" placeholder="Leg" type="text")
      //- input.small(type="text", :placeholder="journey.date_tot() + ' (' + journey.tot_len() + ')'" )

    template(v-if="useDay")
      include leg/top_day.pug
    template(v-else)
      include leg/top_leg.pug
    .row(style="aspect-ratio:1.25;min-height:432px;max-height:calc(100vh - 125px);width:calc(100% + 24px);")
      .map-container(:class=" { 'col-2 col-sm-5 col-md-8': search_drawer.is_query(), 'col-2 col-sm-5 col-md-6': search_drawer.is_note() , 'col-12': (!search_drawer.is_query()  && !search_drawer.is_note()) }" )
        include map.pug
      .row.drawer-container(:class="{ 'col-10 col-sm-7 col-md-4': search_drawer.is_query(), 'col-10 col-sm-7 col-md-6': search_drawer.is_note(), 'col-0': (!search_drawer.is_query()  && !search_drawer.is_note()) }")
        .h-100(:class="{ 'w-100 ': search_drawer.is_query(), 'w-0': !search_drawer.is_query() }")
          include leg/drawer.pug
        .h-100(:class="{ 'w-100': search_drawer.is_note(), 'w-0': !search_drawer.is_note() }")
          include leg/drawer-notes.pug