{% if form  %}
<section id='form' class="container features">
     <div class="container">
          {{textMacro.header_row(
               title = form.get('form_header_title'),
               sub_text = form.get('form_header_subtext') ,
               line_margin_top = None,
               row_margin_bottom ='m-b-lg'
               ) 
           }}
           {% if form.get('form_url') %}
            <div class="row m-b-lg">
                <div class="col-lg-12">
                    <small>**Click in form box to scroll down.</small>
                </div>
                 <!-- Placeholder content (spinner or image) -->
                <div id="iframe-container" class="col-lg-12">
                    <p>Loading Form...</p>
                </div>
                <script>
                document.addEventListener('DOMContentLoaded', function() {
                    var container = document.getElementById('iframe-container');
                    var iframe = document.createElement('iframe');
                    iframe.src = "{{form.get('form_url')}}";
                    iframe.style.width = '95%';
                    iframe.style.height = '800px';
                    iframe.style.border = '1.5px solid #ccc';
                    iframe.classList.add('airtable-embed');  // Add a class to the iframe
                    iframe.setAttribute('loading', 'lazy');
                    iframe.setAttribute('title', "{% if form.get('form_name') %}{{form.get('form_name')}}{% else %}Pitch-A-Friend Sign Up Form{% endif %}");  // Add the title attribute
                    container.innerHTML = ''; // Clear the loading text
                    container.appendChild(iframe);
                });
                </script>
    
                <div class="col-lg-12 m-b-lg">
                    <small>**Click out of form box to scroll up.</small>
                </div>
            </div>
           
          {% endif %}
      
     </div>
</section>
{% endif %}