Twig\Error\RuntimeError {#1431
  -lineno: 2
  -rawMessage: "Variable "poi" does not exist."
  -source: Twig\Source {#1423
    -code: """
      {% extends "basepages.html.twig" %}\n
      {% block head_title %}{{ poi.nombre}}{% endblock %}\n
      {% block destacada %}\n
          background-image: url({{ asset(poi.destacada|replace({'\\' : '/'})) }});\n
      {% endblock %}\n
      {% block head %}\n
          <link href="{{ asset('bundles/curiousincmapformtype/vendor/leaflet/dist/leaflet.css') }}" rel="stylesheet" />\n
          <link href="{{ asset('bundles/curiousincmapformtype/css/style.css') }}" rel="stylesheet" />\n
      \n
          <script src="{{ asset('bundles/curiousincmapformtype/vendor/leaflet/dist/leaflet.js') }}"></script>\n
          <script src="{{ asset('bundles/curiousincmapformtype/vendor/leaflet.geometryutil/dist/leaflet.geometryutil.js') }}"></script>\n
          <script src="{{ asset('bundles/curiousincmapformtype/vendor/leaflet.wms/dist/leaflet.wms.js') }}"></script>\n
          <script src="{{ asset('bundles/curiousincmapformtype/vendor/Leaflet.Snap/leaflet.snap.js') }}"></script>\n
          <script src="{{ asset('bundles/curiousincmapformtype/js/leaflet-embed.js') }}"></script>\n
          <script src="{{ asset('js/three.min.js.js') }}"></script>\n
          <script src="{{ asset('js/panolens.min.js.js') }}"></script>\n
          <script src="{{ asset('js/L.Control.Locate.min.js') }}" charset="utf-8"></script>\n
          <link rel="stylesheet" href="{{ asset('css/L.Control.Locate.min.css') }}" />\n
          <link href="{{ asset('css/Leaflet.Weather.css') }}" rel="stylesheet" type="text/css" />\n
          <script src="{{ asset('js/Leaflet.Weather.js') }}"></script><link href="{{ asset('js/leaflet.fullscreen.css') }}" rel="stylesheet" type="text/css" />\n
          <script src="{{ asset('js/Leaflet.fullscreen.js') }}"></script>\n
      {% endblock %}\n
       {% block header %}\n
           <div class="video-overlay"></div>\n
           <div class="video-content">\n
               <div class="inner">\n
      \n
                   <div class="logo" style="text-align: center;">\n
                       <a href="/"><img src="{{ asset('img/logo.png') }}" alt="" style="width: 50%;"></a>\n
                   </div><br/>\n
                   <div class="masthead-subheading">{{'Rutas del Camino de Santiago Francés'|trans }}</div>\n
                   <div class="masthead-heading">{{ poi.nombre}}</div>\n
                   <div class="scroll-icon">\n
                       <a class="scrollTo" data-scrollTo="portfolio" href="#"><img src="{{ asset('img/flecha.png') }}" alt=""></a>\n
                   </div>\n
      \n
               </div>\n
           </div>\n
           <img class="destacada" src="{{ asset(poi.destacada|replace({'\\' : '/'})) }}"/>\n
      \n
      {#                <a class="btn btn-primary btn-xl text-uppercase" href="#services">{{ 'Sobre nosotros'|trans }}</a>#}\n
       {% endblock %}\n
      {% block services %}\n
          {% set imagepos = 'bg-white' %}\n
              <section class="page-section {{ imagepos }}" id="services">\n
                  <div class="container">\n
                      <div class="text-center">\n
      {#                    <img class="img-fluid" src="{{ asset(poi.destacada|replace({'\\' : '/'})) }}" alt="..." />#}\n
                          <h2 class="section-heading text-uppercase">{{ poi.nombre}}</h2>\n
                      </div>\n
                      <div class="row text-center" style=" font-size: 1.5em;">\n
                          {{ poi.descripcionCorta|raw }}\n
                          <a id="open">{{ 'Leer más'|trans }}</a>\n
                      </div>\n
                      <div id="descLarga" class="row text-center" style="display:none; font-size: 1.5em;">\n
                          {{ poi.descripcionLarga|raw }}\n
                      </div>\n
                      <a id="close" style="display:none">{{ 'Cerrar'|trans }}</a>\n
      \n
                         <p>{{ 'Horario:'|trans}} {{ poi.horario }}</p>\n
                         <p>{{ 'Teléfono:'|trans}} {{ poi.telefono }}</p>\n
                          <p>{{ 'Página Web:'|trans}} <a href="https://{{ poi.web }}">{{ poi.web }}</a></p>\n
      \n
                      </div>\n
                  </div>\n
              </section>\n
          {% if imagepos == 'bg-white' %}\n
              {% set imagepos = 'bg-dark' %}\n
          {% else %}\n
              {% set imagepos = 'bg-white' %}\n
          {% endif %}\n
          <section class="page-section {{ imagepos }}" id="mapsection">\n
              <div class="container">\n
                  <div class="text-center">\n
                      <h2 class="section-heading text-uppercase">{{ 'Mapa Interactivo'|trans }}</h2>\n
                  </div>\n
                  <div class="row text-center">\n
      \n
                      {#    <a class="btn btn-success" href="{{ path('admin_app_calendario_create') }}">Crear Entrada de Calendario</a>#}\n
      \n
      \n
      \n
                      <div id="map" style="height:500px"></div>\n
      \n
      \n
                  </div></div></section>\n
              <!-- carrusel-->\n
          {% if poi.imagenes is not empty %}\n
          {% if imagepos == 'bg-white' %}\n
              {% set imagepos = 'bg-dark' %}\n
          {% else %}\n
              {% set imagepos = 'bg-white' %}\n
          {% endif %}\n
      \n
              <section class="page-section {{ imagepos }}" id="portfolio">\n
                  <div class="container">\n
                      <div class="text-center">\n
                          <h2 class="section-heading text-uppercase">{{ poi.nombre }}</h2>\n
                          <h3 class="section-subheading text-muted">{{ 'Descubrenos'|trans }}</h3>\n
                      </div>\n
                      <div class="masonry-portfolio" id="masonry">\n
                          <div class="container-fluid">\n
                              <div class="masonry">\n
                                  {% for imagen in poi.imagenes %}\n
                                      <div class="item {% if loop.first %}first-item {% endif%}{% if loop.last %}last-item {% endif %}col-md-4 col-sm-6 col-xs-12">\n
                                          <a href="{{ asset(imagen.rutaArchivo|replace({'\\' : '/'})) }}" data-lightbox="image-1"><div class="thumb">\n
                                                  <div class="hover-effect">\n
                                                      <div class="hover-content">\n
                                                          <h1>{{ imagen.nombre }}</h1>\n
                                                      </div>\n
                                                  </div>\n
                                                  <div class="image">\n
                                                      <img src="{{ asset(imagen.rutaArchivo|replace({'\\' : '/'})) }}">\n
                                                  </div>\n
                                              </div></a>\n
                                          <!-- Portfolio item 1-->\n
      \n
                                      </div>\n
                                  {% endfor %}\n
      \n
                              </div>\n
                          </div>\n
                      </div>\n
      \n
                  </div>\n
              </section>\n
          {% endif %}\n
      \n
              <!-- About-->\n
          {% if poi.panoramicas is not empty %}\n
              {% if imagepos == 'bg-white' %}\n
                  {% set imagepos = 'bg-dark' %}\n
              {% else %}\n
                  {% set imagepos = 'bg-white' %}\n
              {% endif %}\n
          <section class="page-section {{ imagepos }}" id="panoramicas">\n
              <div class="container">\n
                  <div class="text-center">\n
                      <h2 class="section-heading text-uppercase">{{ 'Panoramas'|trans }}</h2>\n
                  </div>\n
                  <style>\n
      \n
                      #progress {\n
                          position: absolute;\n
                          width: 100%;\n
                          height: 3px;\n
                      }\n
      \n
                      #bar {\n
                          background-color: #fff;\n
                          height: 100%;\n
                          transition: width 0.1s ease;\n
                      }\n
      \n
                      #bar.hide {\n
                          opacity: 0;\n
                          transition: opacity 1s ease;\n
                      }\n
      \n
                      #containerpanorama {\n
                          margin-left: auto;\n
                          margin-right: auto;\n
                          margin-top: 10px;\n
                          width: 700px;\n
                          height: 400px;"\n
                      }\n
      \n
                      button {\n
                          position: absolute;\n
                          top: 5px;\n
                          width: 100px;\n
                          height: 30px;\n
                      }\n
      \n
                      #btn1 {\n
                          left: 5px;\n
                      }\n
      \n
                      #btn2 {\n
                          left: 110px;\n
                      }\n
      \n
                      #btn3 {\n
                          left: 215px;\n
                      }\n
                  </style>\n
                  <div class="row text-center">\n
                      <div id="progress">\n
                          <div id="bar"></div>\n
                      </div>\n
                      <div id="containerpanorama"></div>\n
                      {% for imagen in poi.panoramicas %}\n
                      <button id="btn{{ loop.index }}">{{ imagen.nombre }}</button>\n
                      {% endfor %}\n
      <script>\n
          {% for imagen in poi.panoramicas %} var panorama{{ loop.index }}; {% endfor %}\n
          var  viewer, container, infospot;\n
          var bar = document.querySelector( '#bar' );\n
      \n
          function onProgressUpdate ( event ) {\n
              var percentage = event.progress.loaded/ event.progress.total * 100;\n
              bar.style.width = percentage + "%";\n
              if (percentage >= 100){\n
                  bar.classList.add( 'hide' );\n
                  setTimeout(function(){\n
                      bar.style.width = 0;\n
                  }, 1000);\n
              }\n
          }\n
          container = document.querySelector( '#containerpanorama' );\n
          {% for imagen in poi.panoramicas %}\n
          panorama{{ loop.index }} = new PANOLENS.ImagePanorama( '{{ asset(imagen.rutaArchivo|replace({'\\' : '/'})) }}' );\n
          panorama{{ loop.index }}.addEventListener( 'progress', onProgressUpdate );\n
          {% endfor %}\n
      \n
          infospot = new PANOLENS.Infospot( 350, PANOLENS.DataImage.Info );\n
          panorama1.add( infospot );\n
          viewer = new PANOLENS.Viewer( { container: container } );\n
          viewer.add( {% for imagen in poi.panoramicas %} panorama{{ loop.index }} {% if not loop.last %},{% endif %}  {% endfor %} );\n
          // Maunal Set Panorama\n
          {% for imagen in poi.panoramicas %}\n
          var button{{ loop.index }} = document.querySelector( '#btn{{ loop.index }}' );\n
          {% endfor %}\n
      \n
          // Enter panorama when load completes\n
          function onButtonClick( targetPanorama ) {\n
              bar.classList.remove( 'hide' );\n
              viewer.setPanorama( targetPanorama );\n
          }\n
          {% for imagen in poi.panoramicas %}\n
          button{{ loop.index }}.addEventListener( 'click', onButtonClick.bind( this, panorama{{ loop.index }} ) );\n
          {% endfor %}\n
          </script>\n
      \n
                  </div></div></section>\n
          {%  endif %}\n
          {% if poi.recursos is not empty %}\n
              {% if imagepos == 'bg-white' %}\n
                  {% set imagepos = 'bg-dark' %}\n
              {% else %}\n
                  {% set imagepos = 'bg-white' %}\n
              {% endif %}\n
              <section class="page-section {{ imagepos }}" id="recursos">\n
                  <div class="container">\n
                      <div class="text-center">\n
                          <h2 class="section-heading text-uppercase">{{ 'Recursos'|trans }}</h2>\n
                      </div>\n
                      <div class="row text-center">\n
                          <div id="progress">\n
                              <div id="bar"></div>\n
                          </div>\n
                          <div id="containerrecursos"></div>\n
                          <ul>\n
                          {% for imagen in poi.recursos %}\n
                              <li><a href="{{ asset(imagen.rutaArchivo|replace({'\\' : '/'})) }}">{{ imagen.nombre }}</a></li>\n
                          {% endfor %}\n
                          </ul>\n
      \n
                      </div></div></section>\n
          {%  endif %}\n
              <!-- Contact-->\n
      {#        <section class="page-section" id="contact">#}\n
      {#            <div class="container">#}\n
      {#                <div class="text-center">#}\n
      {#                    <h2 class="section-heading text-uppercase">{{ 'Contactanos'|trans }}</h2>#}\n
      {#                    <h3 class="section-subheading text-muted">{{ 'Si tienes dudas, ponte en contacto con nosotros.'|trans }}</h3>#}\n
      {#                </div>#}\n
      {#                <!-- * * * * * * * * * * * * * * *-->#}\n
      {#                <!-- * * SB Forms Contact Form * *-->#}\n
      {#                <!-- * * * * * * * * * * * * * * *-->#}\n
      {#                <!-- This form is pre-integrated with SB Forms.-->#}\n
      {#                <!-- To make this form functional, sign up at-->#}\n
      {#                <!-- https://startbootstrap.com/solution/contact-forms-->#}\n
      {#                <!-- to get an API token!-->#}\n
      {#                <form id="contactForm" data-sb-form-api-token="API_TOKEN">#}\n
      {#                    <div class="row align-items-stretch mb-5">#}\n
      {#                        <div class="col-md-6">#}\n
      {#                            <div class="form-group">#}\n
      {#                                <!-- Name input-->#}\n
      {#                                <input class="form-control" id="name" type="text" placeholder="{{ 'Empresa'|trans }} *" data-sb-validations="required" />#}\n
      {#                                <div class="invalid-feedback" data-sb-feedback="name:required">{{ 'El nombre de la Empresa es obligatorio.'|trans }}</div>#}\n
      {#                            </div>#}\n
      {#                            <div class="form-group">#}\n
      {#                                <!-- Email address input-->#}\n
      {#                                <input class="form-control" id="email" type="email" placeholder="{{ 'Email'|trans }} *" data-sb-validations="required,email" />#}\n
      {#                                <div class="invalid-feedback" data-sb-feedback="email:required">{{ 'El email es obligatorio.'|trans }}</div>#}\n
      {#                                <div class="invalid-feedback" data-sb-feedback="email:email">{{ 'El email no es válido'|trans }}</div>#}\n
      {#                            </div>#}\n
      {#                            <div class="form-group mb-md-0">#}\n
      {#                                <!-- Phone number input-->#}\n
      {#                                <input class="form-control" id="phone" type="tel" placeholder="{{ 'Teléfono'|trans }} *" data-sb-validations="required" />#}\n
      {#                                <div class="invalid-feedback" data-sb-feedback="phone:required">{{ 'Un número de Teléfono es obligatorio.'|trans }}</div>#}\n
      {#                            </div>#}\n
      {#                        </div>#}\n
      {#                        <div class="col-md-6">#}\n
      {#                            <div class="form-group form-group-textarea mb-md-0">#}\n
      {#                                <!-- Message input-->#}\n
      {#                                <textarea class="form-control" id="message" placeholder="{{ 'Mensaje'|trans }} *" data-sb-validations="required"></textarea>#}\n
      {#                                <div class="invalid-feedback" data-sb-feedback="message:required">{{ 'El mensaje es obligatorio.'|trans }}</div>#}\n
      {#                            </div>#}\n
      {#                        </div>#}\n
      {#                    </div>#}\n
      {#                    <!-- Submit success message-->#}\n
      {#                    <!---->#}\n
      {#                    <!-- This is what your users will see when the form-->#}\n
      {#                    <!-- has successfully submitted-->#}\n
      {#                    <div class="d-none" id="submitSuccessMessage">#}\n
      {#                        <div class="text-center text-white mb-3">#}\n
      {#                            <div class="fw-bolder">{{ 'Se ha enviado correctamente'|trans }}</div>#}\n
      {#                        </div>#}\n
      {#                    </div>#}\n
      {#                    <!-- Submit error message-->#}\n
      {#                    <!---->#}\n
      {#                    <!-- This is what your users will see when there is-->#}\n
      {#                    <!-- an error submitting the form-->#}\n
      {#                    <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">{{ 'Error enviando el mensaje'|trans }}</div></div>#}\n
      {#                    <!-- Submit Button-->#}\n
      {#                    <div class="text-center"><button class="btn btn-primary btn-xl text-uppercase disabled" id="submitButton" type="submit">{{ 'Enviar'|trans }}</button></div>#}\n
      {#                </form>#}\n
      {#            </div>#}\n
      {#        </section>#}\n
      {% endblock %}\n
           {% block modals %}\n
              <!-- Portfolio Modals-->\n
              <!-- Portfolio item 1 modal popup-->\n
               {% for imagen in poi.imagenes %}\n
              <div class="portfolio-modal modal fade" id="portfolioModal{{loop.index}}" tabindex="-1" role="dialog" aria-hidden="true">\n
                  <div class="modal-dialog">\n
                      <div class="modal-content">\n
                          <div class="close-modal" data-bs-dismiss="modal"><img src="{{ asset('pages/assets/img/close-icon.svg') }}" alt="Close modal" /></div>\n
                          <div class="container">\n
                              <div class="row justify-content-center">\n
                                  <div class="col-lg-8">\n
                                      <div class="modal-body">\n
                                          <!-- Project details-->\n
                                          <h2 class="text-uppercase">{{ imagen.nombre }}</h2>\n
                                          <p class="item-intro text-muted">{{ poi.nombre}}</p>\n
                                          <img class="img-fluid d-block mx-auto" src="{{ asset(imagen.rutaArchivo|replace({'\\' : '/'})) }}" alt="{{ imagen.nombre }}" />\n
      {#                                    <p>Use this area to describe your project. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est blanditiis dolorem culpa incidunt minus dignissimos deserunt repellat aperiam quasi sunt officia expedita beatae cupiditate, maiores repudiandae, nostrum, reiciendis facere nemo!</p>#}\n
      {#                                    <ul class="list-inline">#}\n
      {#                                        <li>#}\n
      {#                                            <strong>Client:</strong>#}\n
      {#                                            Threads#}\n
      {#                                        </li>#}\n
      {#                                        <li>#}\n
      {#                                            <strong>Category:</strong>#}\n
      {#                                            Illustration#}\n
      {#                                        </li>#}\n
      {#                                    </ul>#}\n
                                          <button class="btn btn-primary btn-xl text-uppercase" data-bs-dismiss="modal" type="button">\n
                                              <i class="fas fa-xmark me-1"></i>\n
                                               {{ 'Cerrar'|trans }}\n
                                          </button>\n
                                      </div>\n
                                  </div>\n
                              </div>\n
                          </div>\n
                      </div>\n
                  </div>\n
              </div>\n
               {% endfor %}\n
      \n
      {% endblock %}\n
      {% block footscripts %}\n
          <script type="text/javascript">\n
              $(document).ready(function() {\n
                  const map = L.map('map').setView([{{ poi.localizacion.latitude }}, {{ poi.localizacion.longitude }}], 13);\n
      \n
                  L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {\n
                      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'\n
                  }).addTo(map);\n
      \n
                  const LeafIcon = L.Icon.extend({\n
                      options: {\n
                          // shadowUrl: 'leaf-shadow.png',\n
                          iconSize:     [38, 95],\n
                          shadowSize:   [50, 64],\n
                          iconAnchor:   [22, 94],\n
                          shadowAnchor: [4, 62],\n
                          popupAnchor:  [-3, -76]\n
                      }\n
                  });\n
                  $.getJSON('{{ path('loadmapdetalle',{ 'id': poi.code }) }}', function (geojson) {\n
                      L.geoJson(geojson, {\n
                          style: function(feature) {\n
                              if(feature.properties.color) {\n
                                  return {color: feature.properties.color};\n
                              }\n
                          },\n
                          onEachFeature: function (feature, layer) {\n
                              if (feature.properties.icon) {\n
                                  var icon = L.icon({\n
                                      iconUrl: feature.properties.icon,\n
                                      iconSize: [50, 50]\n
                                  });\n
                                  layer.setIcon(icon);\n
                              }\n
                              layer.bindPopup("<h1>" + feature.title + "</h1><img src=\""+feature.properties.image+"\" style=\"width: 200px;\"><p>"+feature.properties.address+"</p>");\n
                          }\n
                      }).addTo(map);\n
                  });\n
                  L.control.locate().addTo(map);map.addControl(new L.Control.Fullscreen());\n
                  const apiKey = 'c3db6a7385d1ac0af3beec2f03d1be70';\n
                  const template= '<div class="weatherIcon"><img src=":iconurl"></div><div>Temp.: :temperature °C</div><div>Humedad: :humidity%</div><div>Viento: :winddirection :windspeed m/s</div>';\n
      \n
                  L.control.weather({\n
                      apiKey: apiKey,\n
                      lang: '{{ app.request.locale }}',\n
                      units: 'metric',\n
                      template: template\n
                  }).addTo(map);\n
              } )\n
      \n
          </script>\n
      {% endblock %}
      """
    -name: "pages/poidetalle.html.twig"
    -path: "/var/www/html/rutascsf/templates/pages/poidetalle.html.twig"
  }
  -phpFile: "/var/www/html/rutascsf/var/cache/dev/twig/f9/f9751c01c0b77456822807cfc3656bd9.php"
  -phpLine: 81
}