{% include 'mixins/partials/notify.html' %}
<div id="{{ context_object_name|slugify }}-panel">
  {% if service_warning %}
    <article class="notification is-warning is-light" style="margin-bottom: 0.55rem;">
      {{ service_warning }}
    </article>
  {% endif %}
  <table
    class="table is-fullwidth is-hoverable"
    hx-target="#{{ context_object_name|slugify }}-panel"
    id="{{ context_object_name|slugify }}-table"
    hx-swap="outerHTML"
    hx-trigger="{{ context_object_name_singular|slugify }}-event from:body"
    hx-get="{{ list_url }}">
    <thead>
      <th>{{ service_label|default:"Service" }} account</th>
      <th>actions</th>
    </thead>
    {% for item in object_list %}
      <tr>
        <td>{{ item }}</td>
        <td>
          <div class="buttons">
            <button
              hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
              {% if account_unlink_url_name %}
                hx-delete="{% url account_unlink_url_name type=type account=item %}"
                hx-trigger="click"
                hx-target="#{{ context_object_name|slugify }}-panel"
                hx-swap="outerHTML"
              {% endif %}
              {% if account_unlink_url_name %}
                hx-confirm="Are you sure you wish to unlink {{ item }}?"
              {% endif %}
              class="button"
              {% if not account_unlink_url_name %}disabled{% endif %}>
              <span class="icon-text">
                <span class="icon">
                  <i class="fa-solid fa-xmark"></i>
                </span>
              </span>
            </button>
            {% if show_contact_actions %}
              {% if type == 'page' %}
                <a href="{% url contacts_url_name type=type pk=item %}"><button
                  class="button">
                  <span class="icon-text">
                    <span class="icon">
                      <i class="fa-solid fa-eye"></i>
                    </span>
                  </span>
                </button>
                </a>
                <a href="{% url chats_url_name type=type pk=item %}"><button
                  class="button">
                  <span class="icon-text">
                    <span class="icon">
                      <i class="fa-solid fa-envelope"></i>
                    </span>
                  </span>
                </button>
                </a>
              {% else %}
                <button
                  type="button"
                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                  hx-get="{% url contacts_url_name type=type pk=item %}"
                  hx-trigger="click"
                  hx-target="#{{ type }}s-here"
                  hx-swap="innerHTML"
                  class="button">
                  <span class="icon-text">
                    <span class="icon">
                      <i class="fa-solid fa-eye"></i>
                    </span>
                  </span>
                </button>
                <button
                  type="button"
                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                  hx-get="{% url chats_url_name type=type pk=item %}"
                  hx-trigger="click"
                  hx-target="#{{ type }}s-here"
                  hx-swap="innerHTML"
                  class="button">
                  <span class="icon-text">
                    <span class="icon">
                      <i class="fa-solid fa-envelope"></i>
                    </span>
                  </span>
                </button>
              {% endif %}
            {% endif %}
          </div>
        </td>
      </tr>
    {% endfor %}

  </table>
  <form
    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
    hx-post="{% url account_add_url_name type=type %}"
    hx-target="{% if account_add_target %}{{ account_add_target }}{% else %}#widgets-here{% endif %}"
    hx-swap="{% if account_add_swap %}{{ account_add_swap }}{% else %}innerHTML{% endif %}">
    {% csrf_token %}
    <div class="field has-addons">
      <div id="device" class="control is-expanded has-icons-left">
        <input
          name="device"
          class="input"
          type="text"
          required
          placeholder="Account name">
        <span class="icon is-small is-left">
          <i class="fa-solid fa-plus"></i>
        </span>
      </div>
      <div class="control">
        <div class="field">
          <button
            id="search"
            type="submit"
            class="button is-fullwidth"
          >
            Add account
          </button>
        </div>
      </div>
    </div>
  </form>
</div>