{% load i18n modeladmin_tags static %}
{% if results %}
<div id="content_results_table" class="content__results-table-wrapper">
    <table id="fixed_thead" class="listing full-width content__results-table fixed">
        <thead>
            <tr>
                {% for header in result_headers %}
                <th class="" scope="col" {{ header.class_attrib }} >
                    {% if header.sortable %}<a href="{{ header.url_primary }}" id="sortId-{{ header.sort_priority }}" class="icon {% if header.ascending %}icon-arrow-up-after {% else %}icon-arrow-down-after{% endif %}">{% endif %}
                    {{ header.text|capfirst }}
                    {% if header.sortable %}</a>{% endif %}
               </th>
               {% endfor %}
           </tr>
        </thead>
    </table>
    <table id="flowing_tbody" class="listing full-width content__results-table">
        <thead>
            <tr>
                {% for header in result_headers %}
                <th class="" scope="col" {{ header.class_attrib }} >
                    {% if header.sortable %}<a href="{{ header.url_primary }}" id="sortId-{{ header.sort_priority }}" class="icon {% if header.ascending %}icon-arrow-up-after {% else %}icon-arrow-down-after{% endif %}">{% endif %}
                    {{ header.text|capfirst }}
                    {% if header.sortable %}</a>{% endif %}
               </th>
               {% endfor %}
           </tr>
        </thead>
        <tbody class="content__tbody">
            {% for result in results %}
                {% result_row_display forloop.counter0 %}
            {% endfor %}
        </tbody>
    </table>
</div>
{% else %}
    <div class="nice-padding no-search-results">
        <p>{% blocktrans %}Sorry, we didn't find an article with that name. Please try again.{% endblocktrans %}</p>
    </div>
{% endif %}

{% block extra_css %}{% endblock %}
{% block js %}
    <script src="{% static "js/vanilla-notify.min.js" %}"></script>
    <script type="text/javascript">
    (function() {
        'use strict';
        document.getElementsByTagName("header")[0].classList.add('fixed-header');
        window.addEventListener('scroll', function(){
            var scrollPosition = window.scrollY,
                fixedTableHead = document.getElementById('fixed_thead'),
                generalTableBody = document.getElementById('flowing_tbody'),
                resultsWrapper = document.getElementById('content_results_table');

             if (scrollPosition > 0 && window.innerWidth > 35 ) {
                 fixedTableHead.style.display = "block";
                 resultsWrapper.style.overflowX = "hidden";
                 resultsWrapper.style.height = "100%";
                 generalTableBody.style.height = "100%";
                 generalTableBody.firstElementChild.style.visibility = "hidden";
            } else {
                fixedTableHead.style.display = "none";
                resultsWrapper.style.overflowX = "scroll";
                resultsWrapper.style.height = "100vh";
                generalTableBody.style.height = "100vh";
                generalTableBody.firstElementChild.style.visibility = "visible";
            }
        });
        //VANILLA NOTIFY
        var sortItem = document.getElementById("sortId-1");
        var sortDir;
        if (sortItem) {
          if (sortItem.classList.contains("icon-arrow-down-after")) {
              sortDir = "Ascending";
          } else if (sortItem.classList.contains("icon-arrow-up-after")) {
              sortDir = "Descending";
          }
          if (sortItem !== null) {
            vNotify.info({
                  title: "Sort Filter:",
                  text: sortItem.innerHTML + " - " + sortDir,
                  visibleDuration: 5000
              });
          }
        }
    })();
    </script>
{% endblock %}
