mixin map(section_str)
  l-map(
    :zoom.sync=section_str+'.map.zoom' 
    :center.sync=section_str+'.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=section_str+'.hotel && '+section_str+'.hotel.icon' :lat-lng=section_str+'.hotel.latlon')
      l-icon
        div(v-html='generate_icon('+section_str+'.hotel,"darkblue")')
      l-popup
        h1.row.text-medium.text-center {{ #{section_str}.hotel.sname}}
        span.row.text-small.text-gray {{ #{section_str}.hotel.display_name}}
        span(v-if='journey_edit')
          .row.input
            textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model=section_str+'.hotel.notes' :min-height='30' :max-height='350')
        span.row.text-small.text-white(v-else) {{ #{section_str}.hotel.notes}}
    l-marker(v-for='place in '+section_str+'.places.activities' :lat-lng='place.latlon')
      l-icon
        div(v-if='place.step==journey_step_data.day' v-html='generate_icon(place)')
        div(v-else-if='place.step==-1 || place.step==undefined' v-html='generate_icon(place, "gray")')
        div(v-else-if='journey_edit' v-html='generate_icon(place, "lightgray")')
        div(v-else)
      l-popup
        h1.row.text-medium.text-center {{place.sname}}
        span.row.text-small.text-gray {{place.display_name}}
        span(v-if='journey_edit')
          .row.input
            textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
          a.leaflet-popup-close-button.text-gray(style='right:0px;visibility:visible;' href='#rm' v-on:click.prevent='place.step=-1') -
          a.leaflet-popup-close-button.text-gray(style='right:16px;visibility:visible;' href='#ad' v-on:click.prevent='place.step=journey_step_data.day') +
        span.row.text-small.text-dark(v-else) {{place.notes}}

    l-marker(v-for='place in '+section_str+'.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(v-if='journey_edit')
          .row.input
            textarea-autosize.col-12.col-sm-12.text-small(placeholder='Notes' v-model='place.notes' :min-height='30' :max-height='350')
        span.row.text-small.text-dark(v-else) {{place.notes}}