{# ================================================================
   FINAL TWIG TEMPLATE FOR cstv_add_contact_form
   Renders each field individually without duplicates.
================================================================ #}

<div class="add-contact-form">

  {# -------------------------------------------------------------
     TOP WRAPPER (AJAX REFRESHES THIS ENTIRE BLOCK)
     ------------------------------------------------------------- #}
  <div id="add-contact-top-wrapper" class="contact-top-wrapper">

    {# --------------------------- 
       HEADER BLOCK 
       --------------------------- #}
    <div class="contact-header-block">

      {% if form.top_wrapper.header_block.header_text is defined %}
        <div class="contact-header-text">
          {{ form.top_wrapper.header_block.header_text }}
        </div>
      {% endif %}

      <div class="contact-mode-toggle-wrap">
        {{ form.top_wrapper.header_block.mode_toggle }}
      </div>

    </div>

    {% if form.top_wrapper.header_desc is defined %}
      <div class="contact-description">
        {{ form.top_wrapper.header_desc }}
      </div>
    {% endif %}


    {# ---------------------------
       FIELDS BLOCK
       --------------------------- #}
    <div class="contact-fields">
      {{ form.top_wrapper.fields }}
    </div>

  </div>

</div>

{# --------------------------------------------------------
   Remove raw wrapper from the output to prevent duplicates
   -------------------------------------------------------- #}
{{ form|without('top_wrapper') }}