{% load i18n %}

<style>
  .grid *, .grid *:after, .grid *:before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .box {
    width: 12.5%;
    padding: 1em;
    float: left;
    opacity: 0.7;
    transition: all 0.5s;
  }
  .box:hover {
    opacity: 1;
    transition: all 0.5s;
  }
  .box:last-of-type {
    padding-right: 0;
  }
  .result {
    border: 1px solid #cccccc;
    border-radius: 2%;
    overflow: hidden;
    height: 300px;
  }
  .result .header {
    padding: 5px;
    background-color: #90a9b7;
    position: relative;
  }
  .result .header .checkbox {
    width: 5%;
    float: left;
    position: absolute;
    z-index: 2;
  }
  .result .header .info {
    margin-left: 10%;
    position: relative;
  }
  .headerLink {
    cursor: pointer;
    opacity: 0;
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  .header > a {
    z-index: 2;
    margin-left: 10%;
    position: relative;
  }
  .result .header a,
  .result a.tag {
    color: #ffffff;
  }
  .result .date {
    padding: 5px;
  }
  .result .tags {
    float: left;
  }
  .result .tags a.tag {
    padding: 2px 5px;
    border-radius: 2px;
    display: inline-block;
    margin: 2px;
  }
  .result .date {
    float: right;
    color: #cccccc;
  }
  .result .image img {
    width: 100%;
  }

  .grid {
    margin-right: 260px;
  }
  .grid:after {
    content: "";
    display: table;
    clear: both;
  }

  @media (max-width: 1600px) {
    .box {
      width: 25%
    }
  }

  @media (max-width: 991px) {
    .grid {
      margin-right: 220px;
    }
    .box {
      width: 50%
    }
  }

  @media (max-width: 767px) {
    .grid {
      margin-right: 0;
    }
  }

  @media (max-width: 500px) {
    .box {
      width: 100%
    }
  }

</style>


{# This is just copypasta from the parent change_list_results.html file #}
<table id="result_list">
<thead>
<tr>
{% for header in result_headers %}
<th scope="col" {{ header.class_attrib }}>
   {% if header.sortable %}
     {% if header.sort_priority > 0 %}
       <div class="sortoptions">
         <a class="sortremove" href="{{ header.url_remove }}" title="{% trans "Remove from sorting" %}"></a>
         {% if num_sorted_fields > 1 %}<span class="sortpriority" title="{% blocktrans with priority_number=header.sort_priority %}Sorting priority: {{ priority_number }}{% endblocktrans %}">{{ header.sort_priority }}</span>{% endif %}
         <a href="{{ header.url_toggle }}" class="toggle {% if header.ascending %}ascending{% else %}descending{% endif %}" title="{% trans "Toggle sorting" %}"></a>
       </div>
     {% endif %}
   {% endif %}
   <div class="text">{% if header.sortable %}<a href="{{ header.url_primary }}">{{ header.text|capfirst }}</a>{% else %}<span>{{ header.text|capfirst }}</span>{% endif %}</div>
   <div class="clear"></div>
</th>{% endfor %}
</tr>
</thead>
</table>
{# /copypasta #}


<div class="grid">
  {% for result in results %}
    {# 0: Checkbox #}
    {# 1: Title #}
    {# 2: Date #}
    {# 3: Added #}
    {# 4: Image #}
    {# 5: Correspondent #}
    {# 6: Tags #}
    {# 7: Document edit url #}
    <div class="box">
      <div class="result">
        <div class="header">
          {% comment %}
            The purpose of 'headerLink' is to make the whole header
            background clickable.
            We use an onclick handler here instead of a native link ('<a>')
            to allow selecting (and copying) the overlying doc title text
            with the mouse cursor.
            If the title link were layered upon another link ('<a>'), title text
            selection would not be possible with mouse click + drag. Instead,
            the underlying link would be dragged.
          {% endcomment %}
          <div class="headerLink" onclick="location.href='{{ result.7 }}';"></div>
          <div class="checkbox">{{ result.0 }}</div>
          <div class="info">
            {{ result.5 }}
          </div>
          {{ result.1 }}
          <div style="clear: both;"></div>
        </div>
        <div class="tags">{{ result.6 }}</div>
        <div class="date">{{ result.2 }}</div>
        <div style="clear: both;"></div>
        <div class="image">{{ result.4 }}</div>
      </div>
    </div>
  {% endfor %}
</div>


<script>
  // We need to re-build the select-all functionality as the old logic pointed
  // to a table and we're using divs now.
  django.jQuery("#action-toggle").on("change", function(){
    django.jQuery(".grid .box .result .checkbox input")
      .prop("checked", this.checked);
  });
</script>
