{% load cache %}
{% include 'mixins/partials/notify.html' %}
{% cache 600 objects_signal_accounts request.user.id object_list type service %}
  {% 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 }}-table"
    id="{{ context_object_name }}-table"
    hx-swap="outerHTML"
    hx-trigger="{{ context_object_name_singular }}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 }}"}'
              hx-delete="{# url 'account_delete' type=type pk=item.id #}"
              hx-trigger="click"
              hx-target="#modals-here"
              hx-swap="innerHTML"
              hx-confirm="Are you sure you wish to unlink {{ item }}?"
              class="button">
              <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 'signal_contacts' 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 'signal_chats' 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
                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                  hx-get="{% url 'signal_contacts' 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
                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                  hx-get="{% url 'signal_chats' 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="#widgets-here"
    hx-swap="innerHTML">
    {% 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>
{% endcache %}