{%extends 'base.html'%}
{%load static%}
{%block extracss%}
<link rel="stylesheet" href="{% static 'DetectionApp/css/history.css' %}">
{%endblock extracss%}
{%block content%}
<div class="history_list">
<h2>History</h2>
<div id="container" class="rounded">
{% if page_obj%}
{% for detection in page_obj %}
        <div class="history_details">
            <a href="{%url 'detection-details' pk=detection.id %}">
            <div class="history_details" id="histroy_det">
            <img src="{{detection.images.first.image.url}}" alt="upload_image" style="width:125px; height:125px;">
            <div class="date_author" id="date_auth">
            <p class="date">{{detection.date_predicted}}</p>
            <p class="author">{{detection.owner}}</p>
            <p class="num_images">Images uploaded: {{detection.images.all.count}}</p>
            </div>
            </div>
            </a>
            </div>
        {% endfor %}
{%else%}
<p class="none_info">Nothing here yet ...</p>
{%endif%}
</div>
<div class="pagination">
    <span class="step-links">
        {% if page_obj.has_previous %}
            <a href="?page=1">&laquo; first</a>
            <a href="?page={{ page_obj.previous_page_number }}">previous</a>
        {% endif %}

        <span class="current">
            Page {{ page_obj.number }} of {{ page_obj.paginator.num_pages }}.
        </span>

        {% if page_obj.has_next %}
            <a href="?page={{ page_obj.next_page_number }}">next</a>
            <a href="?page={{ page_obj.paginator.num_pages }}">last &raquo;</a>
        {% endif %}
    </span>
</div>
</div>
<script>
window.addEventListener('resize', function() {
      var historyElement = document.querySelectorAll('.history_details');
      var date = document.querySelectorAll('.date_author')
      var windowWidth = window.innerWidth;

      if (windowWidth <= 700) {
        historyElement.forEach(history =>{
            history.style.cssText = 'flex-wrap: wrap !important';
        })
        date.forEach(date_spec =>{
            date_spec.style.cssText = 'align-items: center !important';
        })
      }
      else{
        historyElement.forEach(history =>{
            history.style.cssText = 'flex-wrap: nowrap !important';
      })
        date.forEach(date_spec =>{
            date_spec.style.cssText = 'align-items: flex-end !important';
        })
}
})
</script>
{%endblock content%}