{% set sub = '' %}
	<style>
  .blog-row--{{ section.id }}{
    background: url({{section.settings.backgroundImage}});
    background-attachment:fixed;
  }
  .blog-row--{{ section.id }} .coverImage{
    width:100%;
    background-size: {{section.settings.image_size}} !important;
  }
  .blog-row--{{ section.id }}  .blog-excerpt{
    color: #666666;
  }
  .blog-row--{{ section.id }}  h2{
    font-size:1.4rem;
    color:black;
  }
  .blog-row--{{ section.id }} .blogItem{
    padding-bottom: 45px;
  }
  .eventItemDescription{
    background: white;
    padding:20px;
    display: flex;
    flex-direction: column;
    min-height: 195px;
  }
  .eventItemDescription a{
    align-self: center;
  }
  .blog-row-title{
    flex-grow:1; 
  }
  @keyframes pulse {to {box-shadow: 0 0 0 10px rgba(232, 76, 61, 0);}}
  .IndicatorLive::before {
    content: '';
    display: inline-block;
    animation: pulse 1.25s infinite cubic-bezier(0.66, 0, 0, 1);
    background: #50b83c;
    box-shadow: 0px 0px 0px #50b83c;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    margin-right: 0.4rem;
  }
  .nextEventBanner{
    margin: 0px auto 50px !important;
    padding: 10px;
    text-align:center;
  }
  .countdown-row {
    display: inline-block;
  }
  .nextEventBannerCountdown{
    background: #000000;
    min-width: 360px;
    color: white;
    border: none;
    font-size:1.5rem;
    display: block;
    border-radius: 10px;   
  }
  .countdown-section{
    border-right: 1px solid white;
  }
  .countdown-period {
    font-weight:100;
  }
  .countdown-section:last-child{
    border:none !important; 
  }
  .tillNextEvent{
    /* till opening fiesta: */
    font-weight:bold;
    font-size: 1rem;
    color: #000000;
    letter-spacing: 0.7px;
    line-height: 33px;
  }
</style>

   {% set venue = sub|venueAlias %}



<div class="blog-row event-row--single event-row--{{ section.id }} {{section.settings.spacing}} feature-row--{{ section.settings.size }}"  data-section-id="{{ section.id }}" data-section-type="venuePage">

  	
  <div class=" container">
    <div class="d-flex">
      <div class="col-12 eventDetails">
       
        <div class="row mb-4">
          <div class="col-12">
           
          </div>
          <div class="col-12 col-sm-12 col-md-9 event-description-details">
            <div class="event--box event--box--desc clearfix d-flex align-items-center">
              <div style="float:left;width: 200px;height: 200px;background-size: contain !important;background-repeat: no-repeat !important;background-position: center center !important; background:url({{venue.logo}})"></div>
              <div class="col-8">
               	<h1 class="p-3"><span>{{venue.venueName}}</span></h1>
                <div class="venue p-3 d-flex w-100">
                  <i class="fa-solid fa-location-check p-2"></i> 
                  <div class="d-flex w-100">
                  	<a target="_blank" class="ps-2"href="https://www.google.com/maps?q={{venue.venueName}}">
                  		<h3 class="m-0">{{venue.city}} {{venue.country}}</h3>
                      	<p class="">{{venue.address}}, {{venue.city}} {{venue.country}}</p>
                    </a>
                  </div>
                </div>
                
               
<script>
  
  async function getInstagram() {
  const response = await   fetch("https://b3.my/api/instagramFeed.php", {
  "headers": {
    "accept": "*/*",
    "accept-language": "en-GB,en;q=0.9,en-US;q=0.8,el;q=0.7,fr;q=0.6",
    "content-type": "application/x-www-form-urlencoded; charset=UTF-8",
    "sec-ch-ua": "\"Not.A/Brand\";v=\"8\", \"Chromium\";v=\"114\", \"Google Chrome\";v=\"114\"",
    "sec-ch-ua-mobile": "?0",
    "sec-ch-ua-platform": "\"macOS\"",
    "sec-fetch-dest": "empty",
    "sec-fetch-mode": "cors",
    "sec-fetch-site": "cross-site"
  },
  "body": "username={{venue.instagram_username}}",
  "method": "POST",
  "mode": "cors",
  "credentials": "omit"
});
 html = await response.text();
$('.section_instagram_{{venue.id}}').html(html);
}
getInstagram();
</script>
                
             
              </div>
              
              
            </div>
            <div class="venue-galleries">
            	{{venue.galleries}}
              
            </div>
            {% if venue.article.id != "" %}
            <div class="venue-description">
              <h2>Description</h2>
          
            	{{venue.article.content}}
            </div>
            {% endif %}
              <div class="venue mt-2">
                
              <iframe
              title="{{venue.venueName}}"
              src="https://www.google.com/maps?q={{venue.venueName}} {{venue.address}}, {{venue.city}} {{venue.country}} &output=embed"
              allowfullscreen
              loading="lazy"
              referrerpolicy="no-referrer-when-downgrade">
            </iframe>
                
              </div>
               {% if venue.instagram_username != "" %}
                  <div class="instagram mt-2">
            
             <div class="section_instagram_{{venue.id}}" data-username="{{venue.instagram_username}}">
  <div style="padding: 40px"><div class="loading__indicator relative" style="padding: 20px; margin-left: -10px; "></div></div>
</div>
            
        </div>
                          {% endif %}
            
          </div>
        <div class="col-12 col-sm-12 col-md-3 ">
        <div class="event-description-details venue-contact">
          <h3>Contact Information</h3>
          {% if venue.telephone  %}
          <p class="m-0"><a href="tel: {{venue.telephone}}">{{venue.telephone}}</a></p>
          {% endif %}
          {% if venue.event_venue_email  %}
          <p class="m-0"><a class=""href="mailto: {{venue.event_venue_email}}">{{venue.event_venue_email}}</a></p>
          {% endif %}
           {% if venue.event_venue_website  %}
          <p class="m-0"><a class="" target="_blank" href="{{venue.event_venue_website}}">{{venue.event_venue_website}} <i class="fa fa-external-link"></i></a></p>
          {% endif %}
        </div>
        </div>
       
        </div>
       
      </div>
    </div>
  </div>
</div>