{% load django_tables2 %}
{% load django_tables2_bulma_template %}
{% load static %}
{% load joinsep %}
{% load urlsafe %}
{% block table-wrapper %}
  <div id="drilldown-table" class="column-shifter-container" style="position:relative; z-index:1;">
    {% block table %}
      <div class="nowrap-parent">
        <div class="nowrap-child">
          <div class="dropdown" id="dropdown">
            <div class="dropdown-trigger">
              <button id="dropdown-trigger" class="button dropdown-toggle" aria-haspopup="true" aria-controls="dropdown-menu">
                <span>Show/hide fields</span>
                <span class="icon is-small">
                  <i class="fas fa-angle-down" aria-hidden="true"></i>
                </span>
              </button>
            </div>
            <div class="dropdown-menu" id="dropdown-menu" role="menu">
              <div class="dropdown-content" style="position:absolute; z-index:2;">
                {% for column in table.columns %}
                  {% if column.name in show %}
                    <a class="btn-shift-column dropdown-item"
                      data-td-class="{{ column.name }}"
                      data-state="on"
                      {% if not forloop.last %} style="border-bottom:1px solid #ccc;" {%endif %}
                      data-table-class-container="drilldown-table">
                      <span class="check icon" data-tooltip="Visible" style="display:none;">
                        <i class="fa-solid fa-check"></i>
                      </span>
                      <span class="uncheck icon" data-tooltip="Hidden" style="display:none;">
                        <i class="fa-solid fa-xmark"></i>
                      </span>
                      {{ column.header }}
                    </a>
                  {% endif %}
                {% endfor %}
              </div>
            </div>
          </div>
        </div>
        <div class="nowrap-child">
          <span id="loader" class="button is-light has-text-link is-loading">Static</span>
        </div>
      </div>
      <script>
        var dropdown_button = document.getElementById("dropdown-trigger");
        var dropdown = document.getElementById("dropdown");
        dropdown_button.addEventListener('click', function(e) {
          // elements[i].preventDefault();
          dropdown.classList.toggle('is-active');
        });

      </script>
      <div id="table-container" style="display:none;">
        <table {% render_attrs table.attrs class="table drilldown-results-table is-fullwidth" %}>
          {% block table.thead %}
            {% if table.show_header %}
              <thead {% render_attrs table.attrs.thead class="" %}>
                {% block table.thead.row %}
                  <tr>
                    {% for column in table.columns %}
                      {% if column.name in show %}
                        {% block table.thead.th %}
                          <th class="orderable {{ column.name }}">
                            <div class="nowrap-parent">
                              {% if column.orderable %}
                                <div class="nowrap-child">
                                  {% if column.is_ordered %}
                                    {% is_descending column.order_by as descending %}
                                    {% if descending %}
                                      <span class="icon" aria-hidden="true">{% block table.desc_icon %}<i class="fa-solid fa-sort-down"></i>{% endblock table.desc_icon %}</span>
                                    {% else %}
                                      <span class="icon" aria-hidden="true">{% block table.asc_icon %}<i class="fa-solid fa-sort-up"></i>{% endblock table.asc_icon %}</span>
                                    {% endif %}
                                  {% else %}
                                    <span class="icon" aria-hidden="true">{% block table.orderable_icon %}<i class="fa-solid fa-sort"></i>{% endblock table.orderable_icon %}</span>
                                  {% endif %}
                                </div>
                                <div class="nowrap-child">
                                  <a
                                    hx-get="search/{% querystring table.prefixed_order_by_field=column.order_by_alias.next %}&{{ uri }}"
                                    hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                    hx-trigger="click"
                                    hx-target="#results"
                                    hx-swap="innerHTML"
                                    hx-indicator="#spinner"
                                    style="cursor: pointer;">
                                    {{ column.header }}
                                  </a>
                                </div>
                              {% else %}
                                <div class="nowrap-child">
                                  {{ column.header }}
                                </div>
                              {% endif %}
                            </div>
                          </th>
                        {% endblock table.thead.th %}
                      {% endif %}

                    {% endfor %}
                  </tr>
                {% endblock table.thead.row %}
              </thead>
            {% endif %}
          {% endblock table.thead %}
          {% block table.tbody %}
            <tbody {{ table.attrs.tbody.as_html }}>
              {% for row in table.paginated_rows %}
                {% block table.tbody.row %}
                  {% if row.cells.type == 'control' %}
                    <tr>
                      <td></td>
                      <td>
                        <span class="icon has-text-grey" data-tooltip="Hidden">
                          <i class="fa-solid fa-file-slash"></i>
                        </span>
                      </td>
                      <td>
                        <p class="has-text-grey">Hidden {{ row.cells.hidden }} similar result{% if row.cells.hidden > 1%}s{% endif %}</p>
                      </td>

                    </tr>
                  {% else %}
                    <tr class="
                      {% if row.cells.exemption == True %}has-background-grey-lighter
                      {% elif cell == 'join' %}has-background-success-light
                      {% elif cell == 'quit' %}has-background-danger-light
                      {% elif cell == 'kick' %}has-background-danger-light
                      {% elif cell == 'part' %}has-background-warning-light
                      {% elif cell == 'mode' %}has-background-info-light
                      {% endif %}">
                      {% for column, cell in row.items %}
                        {% if column.name in show %}
                          {% block table.tbody.td %}
                            {% if cell == '—' %}
                              <td class="{{ column.name }}">
                                <span class="icon">
                                  <i class="fa-solid fa-file-slash"></i>
                                </span>
                              </td>
                            {% elif column.name == 'tokens' %}
                              <td class="{{ column.name }} wrap" style="max-width: 10em">
                                {{ cell|joinsep:',' }}
                              </td>
                            {% elif column.name == 'src' %}
                              <td class="{{ column.name }}">
                                <a
                                  class="has-text-link is-underlined"
                                  onclick="populateSearch('src', '{{ cell|escapejs }}')">
                                  {% if row.cells.src == 'irc' %}
                                    <span class="icon" data-tooltip="IRC">
                                      <i class="fa-solid fa-hashtag" aria-hidden="true"></i>
                                    </span>
                                  {% elif row.cells.src == 'dis' %}
                                    <span class="icon" data-tooltip="Discord">
                                      <i class="fa-brands fa-discord" aria-hidden="true"></i>
                                    </span>
                                  {% elif row.cells.src == '4ch' %}
                                    <span class="icon" data-tooltip="4chan">
                                      <i class="fa-solid fa-leaf" aria-hidden="true"></i>
                                    </span>
                                  {% endif %}
                                </a>
                              </td>
                            {% elif column.name == 'ts' %}
                              <td class="{{ column.name }}">
                                <p>{{ row.cells.date }}</p>
                                <p>{{ row.cells.time }}</p>
                              </td>
                            {% elif column.name == 'type' or column.name == 'mtype' %}
                              <td class="{{ column.name }}">
                                <a
                                  class="has-text-link is-underlined"
                                  onclick="populateSearch('{{ column.name }}', '{{ cell|escapejs }}')">
                                  {% if cell == 'msg' %}
                                    <span class="icon" data-tooltip="Message">
                                      <i class="fa-solid fa-message"></i>
                                    </span>
                                  {% elif cell == 'join' %}
                                    <span class="icon" data-tooltip="Join">
                                      <i class="fa-solid fa-person-to-portal"></i>
                                    </span>
                                  {% elif cell == 'part' %}
                                    <span class="icon" data-tooltip="Part">
                                      <i class="fa-solid fa-person-from-portal"></i>
                                    </span>
                                  {% elif cell == 'quit' %}
                                    <span class="icon" data-tooltip="Quit">
                                      <i class="fa-solid fa-circle-xmark"></i>
                                    </span>
                                  {% elif cell == 'kick' %}
                                    <span class="icon" data-tooltip="Kick">
                                      <i class="fa-solid fa-user-slash"></i>
                                    </span>
                                  {% elif cell == 'nick' %}
                                    <span class="icon" data-tooltip="Nick">
                                      <i class="fa-solid fa-signature"></i>
                                    </span>
                                  {% elif cell == 'mode' %}
                                    <span class="icon" data-tooltip="Mode">
                                      <i class="fa-solid fa-gear"></i>
                                    </span>
                                  {% elif cell == 'action' %}
                                    <span class="icon" data-tooltip="Action">
                                      <i class="fa-solid fa-exclamation"></i>
                                    </span>
                                  {% elif cell == 'notice' %}
                                    <span class="icon" data-tooltip="Notice">
                                      <i class="fa-solid fa-message-code"></i>
                                    </span>
                                  {% elif cell == 'conn' %}
                                    <span class="icon" data-tooltip="Connection">
                                      <i class="fa-solid fa-cloud-exclamation"></i>
                                    </span>
                                  {% elif cell == 'znc' %}
                                    <span class="icon" data-tooltip="ZNC">
                                      <i class="fa-brands fa-unity"></i>
                                    </span>
                                  {% elif cell == 'query' %}
                                    <span class="icon" data-tooltip="Query">
                                      <i class="fa-solid fa-message"></i>
                                    </span>
                                  {% elif cell == 'highlight' %}
                                    <span class="icon" data-tooltip="Highlight">
                                      <i class="fa-solid fa-exclamation"></i>
                                    </span>
                                  {% elif cell == 'who' %}
                                    <span class="icon" data-tooltip="Who">
                                      <i class="fa-solid fa-passport"></i>
                                    </span>
                                  {% elif cell == 'topic' %}
                                    <span class="icon" data-tooltip="Topic">
                                      <i class="fa-solid fa-sign"></i>
                                    </span>
                                  {% else %}
                                    {{ cell }}
                                  {% endif %}
                                </a>
                              </td>
                            {% elif column.name == 'msg' %}
                              <td class="{{ column.name }} wrap">
                                <a
                                  class="has-text-grey is-underlined"
                                  hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                  hx-post="{% url 'modal_context' %}"
                                  hx-vals='{"net": "{{ row.cells.net|escapejs }}",
                                  "num": "{{ row.cells.num|escapejs }}",
                                  "source": "{{ row.cells.src|escapejs }}",
                                  "channel": "{{ row.cells.channel|escapejs }}",
                                  "time": "{{ row.cells.time|escapejs }}",
                                  "date": "{{ row.cells.date|escapejs }}",
                                  "index": "{{ params.index }}",
                                  "type": "{{ row.cells.type }}",
                                  "mtype": "{{ row.cells.mtype }}",
                                  "nick": "{{ row.cells.nick|escapejs }}",
                                  "dedup": "{{ params.dedup }}"}'
                                  hx-target="#modals-here"
                                  hx-trigger="click"
                                  href="/?modal=context&net={{row.cells.net|escapejs}}&num={{row.cells.num|escapejs}}&source={{row.cells.src|escapejs}}&channel={{row.cells.channel|urlsafe}}&time={{row.cells.time|escapejs}}&date={{row.cells.date|escapejs}}&index={{params.index}}&type={{row.cells.type}}&mtype={{row.cells.mtype}}&nick={{row.cells.mtype|escapejs}}">
                                  {{ row.cells.msg }}
                                </a>
                              </td>
                            {% elif column.name == 'nick' %}
                              <td class="{{ column.name }}">
                                <div class="nowrap-parent">
                                  <div class="nowrap-child">
                                    {% if row.cells.online is True %}
                                      <span class="icon has-text-success has-tooltip-success" data-tooltip="Online">
                                        <i class="fa-solid fa-circle"></i>
                                      </span>
                                    {% elif row.cells.online is False %}
                                      <span class="icon has-text-danger has-tooltip-danger" data-tooltip="Offline">
                                        <i class="fa-solid fa-circle"></i>
                                      </span>
                                    {% else %}
                                      <span class="icon has-text-warning has-tooltip-warning" data-tooltip="Unknown">
                                        <i class="fa-solid fa-circle"></i>
                                      </span>
                                    {% endif %}
                                  </div>
                                  <a class="nowrap-child has-text-link is-underlined" onclick="populateSearch('nick', '{{ cell|escapejs }}')">
                                    {{ cell }}
                                  </a>
                                  <div class="nowrap-child">
                                    {% if row.cells.src == 'irc' %}
                                      <a
                                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                        hx-post="{% url 'modal_drilldown' %}"
                                        hx-vals='{"net": "{{ row.cells.net }}", "nick": "{{ row.cells.nick }}", "channel": "{{ row.cells.channel }}"}'
                                        hx-target="#modals-here"
                                        hx-trigger="click"
                                        class="has-text-black">
                                        <span class="icon" data-tooltip="Open drilldown modal">
                                          <i class="fa-solid fa-album"></i>
                                        </span>
                                      </a>
                                      <a
                                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                        hx-post="{% url 'modal_drilldown' type='window' %}"
                                        hx-vals='{"net": "{{ row.cells.net }}", "nick": "{{ row.cells.nick }}", "channel": "{{ row.cells.channel }}"}'
                                        hx-target="#items-here"
                                        hx-swap="afterend"
                                        hx-trigger="click"
                                        class="has-text-black">
                                        <span class="icon" data-tooltip="Open drilldown window">
                                          <i class="fa-solid fa-album"></i>
                                        </span>
                                      </a>
                                      <a
                                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                                        hx-post="{% url 'modal_drilldown' type='widget' %}"
                                        hx-vals='{"net": "{{ row.cells.net }}", "nick": "{{ row.cells.nick }}", "channel": "{{ row.cells.channel }}"}'
                                        hx-target="#widgets-here"
                                        hx-trigger="click"
                                        class="has-text-black">
                                        <span class="icon" data-tooltip="Open drilldown widget">
                                          <i class="fa-solid fa-album"></i>
                                        </span>
                                      </a>
                                    {% endif %}
                                  </div>
                                  {% if row.cells.num_chans != '—' %}
                                    <div class="nowrap-child">
                                      <span class="tag">
                                        {{ row.cells.num_chans }}
                                      </span>
                                    </div>
                                  {% endif %}
                                </div>
                              </td>
                            {% elif column.name == 'channel' %}
                              <td class="{{ column.name }}">
                                {% if cell != '—' %}
                                  <div class="nowrap-parent">
                                    <a
                                      class="nowrap-child has-text-link is-underlined"
                                      onclick="populateSearch('channel', '{{ cell|escapejs }}')">
                                      {{ cell }}
                                    </a>
                                    {% if row.cells.num_users != '—' %}
                                      <div class="nowrap-child">
                                        <span class="tag">
                                          {{ row.cells.num_users }}
                                        </span>
                                      </div>
                                    {% endif %}
                                  </div>
                                {% else %}
                                  {{ cell }}
                                {% endif %}
                              </td>
                            {% elif cell is True or cell is False %}
                              <td class="{{ column.name }}">
                                {% if cell is True %}
                                  <span class="icon has-text-success">
                                    <i class="fa-solid fa-check"></i>
                                  </span>
                                {% else %}
                                  <span class="icon">
                                    <i class="fa-solid fa-xmark"></i>
                                  </span>
                                {% endif %}
                              </td>
                            {% else %}
                              <td class="{{ column.name }}">
                                <a
                                  class="has-text-link is-underlined"
                                  onclick="populateSearch('{{ column.name }}', '{{ cell|escapejs }}')">
                                  {{ cell }}
                                </a>
                              </td>
                            {% endif %}
                          {% endblock table.tbody.td %}
                        {% endif %}
                      {% endfor %}
                    </tr>
                  {% endif %}
                {% endblock table.tbody.row %}
              {% empty %}
                {% if table.empty_text %}
                  {% block table.tbody.empty_text %}
                    <tr><td class="{{ column.name }}" colspan="{{ table.columns|length }}">{{ table.empty_text }}</td></tr>
                  {% endblock table.tbody.empty_text %}
                {% endif %}
              {% endfor %}
            </tbody>
          {% endblock table.tbody %}
          {% block table.tfoot %}
            {% if table.has_footer %}
              <tfoot {{ table.attrs.tfoot.as_html }}>
                {% block table.tfoot.row %}
                  <tr>
                    {% for column in table.columns %}
                      {% block table.tfoot.td %}
                        <td class="{{ column.name }}" {{ column.attrs.tf.as_html }}>{{ column.footer }}</td>
                      {% endblock table.tfoot.td %}
                    {% endfor %}
                  </tr>
                {% endblock table.tfoot.row %}
              </tfoot>
            {% endif %}
          {% endblock table.tfoot %}
        </table>
      </div>
    {% endblock table %}
    {% block pagination %}
      {% if table.page and table.paginator.num_pages > 1 %}
        <nav class="pagination is-justify-content-flex-end" role="navigation" aria-label="pagination">
          {% block pagination.previous %}
            <a
              class="pagination-previous is-flex-grow-0 {% if not table.page.has_previous %}is-hidden-mobile{% endif %}"
              {% if table.page.has_previous %}
                hx-get="search/{% querystring table.prefixed_page_field=table.page.previous_page_number %}&{{ uri }}"
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                hx-trigger="click"
                hx-target="#results"
                hx-swap="innerHTML"
                hx-indicator="#spinner"
              {% else %}
                href="#"
                disabled
              {% endif %}
              style="order:1;">
              {% block pagination.previous.text %}
                <span aria-hidden="true">&laquo;</span>
              {% endblock pagination.previous.text  %}
            </a>
          {% endblock pagination.previous %}
          {% block pagination.next %}
            <a
              class="pagination-next is-flex-grow-0 {% if not table.page.has_next %}is-hidden-mobile{% endif %}"
              {% if table.page.has_next %}
                hx-get="search/{% querystring table.prefixed_page_field=table.page.next_page_number %}&{{ uri }}"
                hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                hx-trigger="click"
                hx-target="#results"
                hx-swap="innerHTML"
                hx-indicator="#spinner"
              {% else %}
                href="#"
                disabled
              {% endif %}
              style="order:3;"
            >
              {% block pagination.next.text %}
                <span aria-hidden="true">&raquo;</span>
              {% endblock pagination.next.text  %}
            </a>
          {% endblock pagination.next %}
          {% if table.page.has_previous or table.page.has_next %}
            {% block pagination.range %}
              <ul class="pagination-list is-flex-grow-0" style="order:2;">
                {% for p in table.page|table_page_range:table.paginator %}
                  <li>
                    <a
                      class="pagination-link {% if p == table.page.number %}is-current{% endif %}"
                      aria-label="Page {{ p }}" block
                      {% if p == table.page.number %}aria-current="page"{% endif %}
                      {% if p == table.page.number %}
                        href="#"
                      {% else %}
                        hx-get="search/{% querystring table.prefixed_page_field=p %}&{{ uri }}"
                        hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}'
                        hx-trigger="click"
                        hx-target="#results"
                        hx-swap="innerHTML"
                        hx-indicator="#spinner"
                      {% endif %}
                    >
                      {% if p == '...' %}
                        <span class="pagination-ellipsis">&hellip;</span>
                      {% else %}
                        {{ p }}
                      {% endif %}
                    </a>
                  </li>
                {% endfor %}
              </ul>
            {% endblock pagination.range %}
          {% endif %}
        </nav>
      {% endif %}
    {% endblock pagination %}
  </div>
{% endblock table-wrapper %}