.bg-dark.text-white
  .container.section
    .row.text-center
      .input.col-sm-4
        input(disabled='' :value="journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day")
      .input.col-sm-2
        input(placeholder='Day title' v-model='journey_data.step_title[journey_step]')
      .col-sm-3
      .right.input.col-sm-2
        input(disabled='' :value='active_date()')
    .row
      .col-12.col-sm-12
        l-map(:zoom='  journey_data.main[journey_step_data.section].map.zoom' :center='journey_data.main[journey_step_data.section].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='journey_data.main[journey_step_data.section].hotel && \
          journey_data.main[journey_step_data.section].hotel.icon' :lat-lng='journey_data.main[journey_step_data.section].hotel.latlon')
            l-icon
              div(v-html="generate_icon(journey_data.main[journey_step_data.section].hotel,'darkblue')")
            l-popup
              h1.row.text-medium.text-center {{journey_data.main[journey_step_data.section].hotel.sname}}
              span.row.text-small.text-gray {{journey_data.main[journey_step_data.section].hotel.display_name}}
              .row.input
                textarea-autosize.col-12.col-sm-10.text-small(placeholder='Notes' v-model='journey_data.main[journey_step_data.section].hotel.notes' :min-height='30' :max-height='350')
          l-marker(v-for='place in journey_data.main[journey_step_data.section].places.activities' :lat-lng='place.latlon')
            div(v-if='place.step==journey_step')
              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')
                a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#rm' v-on:click.prevent='place.step=-1') -
            div(v-else-if='place.step >= 0')
              l-icon
                div(v-html="generate_icon(place,'orange')")
              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')
                a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#add' v-on:click.prevent='place.step=journey_step') +
            div(v-else-if='place.step==undefined || place.step == -1')
              l-icon
                div(v-html="generate_icon(place,'red')")
              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')
                a.leaflet-popup-close-button.text-gray(style='bottom:9px;top:auto; ' href='#add' v-on:click.prevent='place.step=journey_step') +
            div(v-else='')
              l-icon
                div(v-html='generate_icon()')
              l-popup
                h1.row.text-medium.text-center {{place.sname}}
                span.row.text-small.text-gray {{place.display_name}}
    .row
      .col-12.col-sm-12
        .container.text-center(v-if='journey_step_data.start || journey_step_data.end')
          b Flights
          div(v-if='journey_step_data.start')
            div(v-for='element in journey_data.main[journey_step_data.section].flightA')
              a(href='#fligh' v-on:click.prevent="window.open('https://www.flightradar24.com/data/flights/'+element.id,'_blank')") {{ element.label }}
          div(v-if='journey_step_data.end')
            div(v-for='element in journey_data.main[journey_step_data.section].flightB')
              a(href='#fligh' v-on:click.prevent="window.open('https://www.flightradar24.com/data/flights/'+element.id,'_blank')") {{ element.label }}
        .container
div
  .container-medium.section
.bg-dark