{% set section_titles = {
  'budvue_billing': 'Budvue Invoices',
  'edgeworth_payments': 'Edgeworth Payment',
  'product_offer_updates': 'Product Data Offers'
} %}

{# <div class="invite-user"><a href="/invite-user"><span class="icon">+</span>Invite User</a></div> #}

<div class="email-notifications-wrapper">

  {% for group, contact_list in contacts %}
    <h2>{{ section_titles[group] }}</h2>
    <div class="table-responsive col">
      <table class="email-notifications-table find-a-contact table table-hover table-striped views-table views-view-table cols-12">
        <thead>
          <tr>
            <th>Contact</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Last Login</th>
            <th>Action</th>
          </tr>
        </thead>

        <tbody>

          {% for contact in contact_list %}
            <tr>
              <td>{{ contact.first_name.value }} {{ contact.last_name.value }}</td>
              <td>{{ contact.email.value }}</td>
              <td>{{ contact.field_user_phone_number.value }}</td>
              <td>{{ contact._last_login ?: '' }}</td>
              <td>
                {% if contact.uid.target_id is not empty %}
                  <a data-dialog-options="{"dialogClass": "offer-details-popup"}" data-dialog-type="modal" class="use-ajax customAjax edit-contact" data-once="ajax" href="/user/edit/details/{{ contact.uid.target_id }}?destination=/email-notifications"><img src="/themes/custom/budvue/images/png/edit.png"></a>
                {% else %}
                  <a data-dialog-options="{"dialogClass": "offer-details-popup"}" data-dialog-type="modal" class="use-ajax customAjax edit-contact" data-once="ajax" href="/contact/edit/{{ contact.id.value }}?destination=/email-notifications"><img src="/themes/custom/budvue/images/png/edit.png"></a>
                {% endif %}
                <a href="#" 
                  class="delete-contact"
                  data-contact="{{ contact.id() }}"
                  data-newsletter="{{ group }}">
                  <img src="/themes/custom/budvue/images/png/delete.png">
                </a>
              </td>
            </tr>
          {% endfor %}

          <tr>
            <td colspan="5">
              <div class="contact-dropdown">
                <select class="newsletter-contact-dropdown" data-newsletter="{{ group }}">
                  <option value="">Select Contact</option>

                  {% for contact in filtered_related_contacts[group] %}
                    <option value="{{ contact.id() }}">
                    {{ contact.first_name.value }} {{ contact.last_name.value }} ({{ contact.email.value }})
                    </option>
                  {% endfor %}
                </select>
                <a data-dialog-options="{"dialogClass": "offer-details-popup"}" data-dialog-type="modal" class="use-ajax customAjax add-contact" href="/add-contact?destination=/email-notifications" data-once="ajax"><img src="/themes/custom/budvue/images/png/circled-plus.png"></a>
              </div>
            </td>
          </tr>

        </tbody>
      </table>
      <div class="require-contact-msg text-danger" style="display:none; font-weight:bold; margin-top:3px; margin-bottom: 20px;">
        * Requires at least one contact
      </div>
    </div>

  {% endfor %}

</div>