.container.section
  .row.text-center
    .col-auto
      button.button.button--secondary.button--mobileFull(v-on:click='rm_section(idx)') X
    .col-auto
      button.button.button--secondary.button--mobileFull(v-on:click='toggle_section_vis(idx)') -
    .input.col-sm-4
      input(v-model='item.title' type='text')
  .row(v-if='visible_step & (0x1 << idx)')
    .col-12.col-sm-8
      l-map(:zoom.sync='item.map.zoom' :center.sync='item.map.center' style='padding-top: 100%;')
        l-tile-layer(url='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' attribution='© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors')
        l-control-scale(position='topright' :imperial='false' :metric='true')
        l-marker(v-if='item.hotel' :lat-lng.sync='item.hotel.latlon')
          l-icon
            div(v-html="generate_icon(item.hotel,'darkblue')")
          l-popup
            h1.row.text-medium.text-center {{item.hotel.sname}}
            span.row.text-small.text-gray {{item.hotel.display_name}}
            .row.input
              textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='item.hotel.notes' :min-height='30' :max-height='350')
          //
            <l-tooltip :options="{ permanent: true, interactive: true }">
            <div>
            H
            </div>
            </l-tooltip>
        l-marker(v-for='place in item.places.restaurants' :lat-lng.sync='place.latlon')
          l-icon
            div(v-html="generate_icon(place,'cadetblue')")
          l-popup
            h1.row.text-medium.text-center {{place.sname}}
            span.row.text-small.text-gray {{place.display_name}}
            .row.input
              textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
        l-marker(v-for='place in item.places.activities' :lat-lng.sync='place.latlon')
          l-icon
            div(v-html='generate_icon(place)')
          l-popup
            h1.row.text-medium.text-center {{place.sname}}
            span.row.text-small.text-gray {{place.display_name}}
            .row.input
              textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
    .col-12.col-sm-4
      .row.text-center
        div
          label Date Range
        .input.text-dark
          date-picker(:lang='lang' v-model='item.dateRange' range='' placeholder='Date Range')
      .row.text-center
        div
          label Hotel
        multiselect#ajax(v-model='item.hotel' label='sname' track-by='place_id' placeholder='Type to search' open-direction='bottom' :options='query.nominatim' :searchable='true' :loading='querying.hotel' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='1' :max-height='600' @search-change='debounceSearch.hotel')
      .row.text-center
        div
          label Fight
        multiselect#ajax(v-model='item.flightA' label='label' track-by='id' placeholder='Type to search' open-direction='bottom' :multiple='true' :options='query.flight' :searchable='true' :loading='querying.flight' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='10' :max-height='600' @search-change='debounceSearch.flight')
        multiselect#ajax(v-model='item.flightB' label='label' track-by='id' placeholder='Type to search' open-direction='bottom' :multiple='true' :options='query.flight' :searchable='true' :loading='querying.flight' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='10' :max-height='600' @search-change='debounceSearch.flight')
      .row.text-center
        div
          label Restoration
        multiselect#ajax(v-model='item.places.restaurants' label='sname' track-by='place_id' placeholder='Type to search' open-direction='bottom' :multiple='true' :options='query.nominatim' :searchable='true' :loading='querying.food' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='10' :max-height='600' @search-change='debounceSearch.restaurants')
      .row.text-center
        div
          label Activities
        multiselect#ajax(v-model='item.places.activities' label='sname' track-by='place_id' placeholder='Type to search' open-direction='bottom' :multiple='true' :options='query.nominatim' :searchable='true' :loading='querying.place' :internal-search='false' :clear-on-select='false' :options-limit='50' :limit='10' :max-height='600' @search-change='debounceSearch.places')
      .row.text-center
        div
          label Notes
        .input.text-dark(style='width:100%;')
          textarea-autosize.text-small(v-model='item.notes' placeholder='Notes' :min-height='30' :max-height='350')