<br/>
<div class="row col s12 center-align">
  <div class="col s6 center-align distinguished">
    <div><%= showAdType %> </div>
  </div>
  <div class="col s6 center-align distinguished">
    <%= showRealEstateType %> 
  </div>
</div>

 <section class="slider">
  <div class="flexslider" >
    <ul class="slides">
      <% for (const photoUrl of realEstatePhotosUrls) { %>
      <li class="flex-li">
        <img src=<%= photoUrl %> alt=""/>
    </li>
    <% } %>
    </ul>
  </div>
</section> 

<br/>
<br>
<div class="row col s12">
<% for (const field of inputFields){ %>
  <p>
      <span class="col s4"><%= field.title %></span>
      <span class="col s8 distinguished dont-break-out"><%= allInputValues[field.dbField] %></span>
  </p>
  <br>
<% } %>
</div>

<br>
<div class="row">
<% for (const field of segmentFields){ %>
  <p>
      <span class="col s4"><%= field.title.replace(/>/g,'') %></span>
      <% for (const segmentObject of field.values) { %>
        <% if (allSegmentSelectedValues[field.dbField] === segmentObject.id) { %>
                <span class="col s8 distinguished"><%= segmentObject.title.replace(/>/g,'') %></span>
            <% } %>
      <% } %>
  </p>
  <br>
<% } %>
</div>
<br>
<div class="row col s12">
<% for (const field of booleanFields){ %>
  <p class="col s4">
    <span>&#10003;</span>
      <span><%= field.title %></span>
    
  </p>
<% } %>
</div>

<div class="row center-align ">
  <div class="distinguished"> 
    <span>Lokacija nekretnine</span>
    
  </div>
  <br>
    <br>
  <div class="col s12">
    <div id="map"></div>
  </div>
</div>

<script type="text/javascript">
       $(window).load(function() {
           $('.flexslider').flexslider({
           animation: "slide",
           smoothHeight: true
          });
        });
</script>

<script>
  //Setting up image gallery - carousel
  

  //Setting up location map
  let map;

  function initMap() {
    const BOSNIA_BOUNDS = {
      north: 45.7,
      south: 41.69,
      west: 15.55,
      east: 20.77
    };
    const ESTATE_COORDINATES = {
      lat: <%= locationLat %>,
      lng: <%= locationLong %>
    };

    const mapElement = document.getElementById("map");
    const restrictMapPanningToBosniaOnly = {
      latLngBounds: BOSNIA_BOUNDS,
      strictBounds: true
    };
    const initialMapParams = {
      center: ESTATE_COORDINATES,
      zoom: 13,
      restriction: restrictMapPanningToBosniaOnly,
      mapTypeControl: false,
      panControl: false,
      zoomControl: true,
      streetViewControl: false
    };
    map = new google.maps.Map(mapElement, initialMapParams);
    
    marker = new google.maps.Marker({
                position: ESTATE_COORDINATES,
                map: map,
            });
   
  }


</script>
<script
  src="https://maps.googleapis.com/maps/api/js?key=<%= process.env.GOOGLE_MAP_KEY %>&language=bs&libraries=places&callback=initMap"
  async
  defer
></script>
