.bg-dark.text-white(v-cloak='')
  .text-small.fright(style='margin:6px 12px;')
    a(:href="'/'+journey_id")
      i.fas.fa-tools
  .container.section
    .aligner.text-center.text-white.text-huge(style='margin-bottom:5px')
      .aligner--itemTop.fleft
        a(href='#prev' v-on:click.prevent='prev_step')
          i.fas.fa-angle-left
      span.container
        div
          | {{journey_data.main[journey_step_data.section].title + ': Day ' + journey_step_data.day}}
        .text-big.text-gray {{journey_data.step_title[journey_step]}}
      .aligner--itemEnd.fright
        a(href='#next' v-on:click.prevent='next_step')
          i.fas.fa-angle-right
    .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}}
              span.row.text-small.text-white {{journey_data.main[journey_step_data.section].hotel.notes}}
          l-marker(v-for='place in journey_data.main[journey_step_data.section].places.activities' :lat-lng='place.latlon' 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}}
              span.row.text-small.text-dark {{place.notes}}
          l-marker(v-for='place in journey_data.main[journey_step_data.section].places.activities' :lat-lng='place.latlon' v-if='place.step==undefined || place.step==-1')
            l-icon
              div(v-html="generate_icon(place,'gray')")
            l-popup
              h1.row.text-medium.text-center {{place.sname}}
              span.row.text-small.text-gray {{place.display_name}}
              span.row.text-small.text-dark {{place.notes}}
          l-marker(v-for='place in journey_data.main[journey_step_data.section].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}}
              span.row.text-small.text-dark {{place.notes}}
    .row
      .col-12.col-sm-12
        .container