{# INSTAGRAM ELFSIDE WIDGET #}
{% macro instagram(elfsight_code) %}
    <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
    <div class="{{elfsight_code}}" data-elfsight-app-lazy></div>
{% endmacro %}


{# CALENDAR ELFSIGHT WIDGET #}
{% macro calendar(elfsight_code) %}
<div class="row">
     <div class="col-lg-12">
         <script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
         <div class="{{elfsight_code}}" data-elfsight-app-lazy></div>
     </div>
 </div>
 {% endmacro %}

{# GOOGLE MAP WIDGET #}
{% macro googlemap(map_code, chapter_name) %}
<div class="row mt-4 m-b-lg">
     <iframe 
        title="{{chapter_name}} Partner Map" 
        src="{{map_code}}" 
        width="100%" height="450" 
        frameborder="0" 
        style="border:0" 
        allowfullscreen class="m-b-lg" 
        async defer>
     </iframe>
 </div>  
 {% endmacro %}


{# AIRTABLE FORMS #}
{% macro airtable_form(form_url, form_name) %}
<div class="row m-b-lg">  
     <div class="col-lg-12">
         <small>**Click in form box to scroll down.</small>
     </div>
     <div class="col-lg-12">
         <iframe 
             title="{% if form_name %}{{form_name}}{% else %}Pitch-A-Friend Sign Up Form{% endif %}" 
             class="airtable-embed" 
             src="{{form_url}}" 
             frameborder="0" 
             onmousewheel="" 
             width="95%" 
             height="800" 
             style="background: transparent; border: 1.5px solid #ccc;"
             async
             defer>
         </iframe>
        
     </div>
     <div class="col-lg-12 m-b-lg">
         <small>**Click out of form box to scroll up.</small>
     </div>
 </div> 
 {% endmacro %}
 
 
 {% macro airtable_form_with_load(form_url, form_name) %}
    <div class="row">
        <div class="col-12">
            <small>**Click in form box to scroll down.</small>
        </div>
        <div id="iframe-container" class="col-12">
            <!-- Placeholder content (spinner or image) -->
            <div id="iframe-placeholder" style="text-align: center;">
                <img src="placeholder-image.jpg" alt="Loading..." style="max-width: 100%; height: auto;">
                <!-- You can replace the above image with a spinner or any other loading animation -->
            </div>
            <!-- Iframe -->
            <iframe 
                id="iframe-content"
                title="{% if form_name %}{{form_name}}{% else %}Pitch-A-Friend Sign Up Form{% endif %}" 
                class="airtable-embed" 
                src="{{form_url}}" 
                frameborder="0" 
                onmousewheel="" 
                width="95%" 
                height="800" 
                style="background: transparent; border: 1.5px solid #ccc; display: none;" <!-- Initially hidden -->
                onload="iframeLoaded()"
                async
                defer>
            </iframe>
        </div>
        <div class="col-12">
            <small>**Click out of form box to scroll up.</small>
        </div>
    </div>
    
    <script>
        function iframeLoaded() {
            // Hide the placeholder
            document.getElementById('iframe-placeholder').style.display = 'none';
            // Show the iframe
            document.getElementById('iframe-content').style.display = 'block';
        }
    </script>
 {% endmacro %}