{% from "macro.html" import render_pagination %}
{% extends "base.html" %}

{% block title %}{{ label }}{% endblock %}

{% block style %}
<style>
.card-columns { column-count: 6; }
</style>
{% endblock %}

{% block content %}
<div class="m-3">
  <h1>{{ self.title() }}</h1>

  {#
  {% for key, label in property_labels.items() %}
    <h4>{{ label }} ({{ key }})</h4>
    <pre>{{ item_entity['claims'][key] | pprint }}</pre>
  {% endfor %}
  #}

  <p>
    <a href="{{ url_for('browse_page') }}">browse index</a>
    {% for pid, qid in params %}
      | <a href="{{ url_for('property_query_page', property_id=pid[1:]) }}">browse {{ labels[pid] }} list</a>
    {% endfor %}
  </p>

  <p>{{ '{:,d}'.format(total) }} paintings found</p>

<p class="mb-3">
  <a href="#" id="toggle-filters" class="btn btn-primary">toggle filters</a>
  <a href="{{ catalog_url }}" class="btn btn-primary">catalog artwork</a>
</p>

  <div id="filters">
  {% for key, values in facets.items() %}
    <p>{{ prop_labels[key] }}:
      {% for v in values %}
        <a href="{{ set_url_args(**{key: v.qid}) }}">{{ v.label }}</a> ({{ v.count }})
        {% if not loop.last %}|{% endif %}
      {% endfor %}
    </p>
  {% endfor %}
  </div>

<div class="card-columns">
  {% for item in items %}
  {% set image = item.image %}
  <div class="card">
    <a href="{{ item.url }}">
      {# <img src="{{ image.thumburl }}" height="{{ image.thumbheight }}" width="{{ image.thumbwidth }}" class="card-img-top"></a> #}
      <img src="{{ image.thumburl }}" class="card-img-top"></a>
    <div class="card-body">
      <h5 class="card-title">{{ item.label }}</h5>
      <p class="card-text">by {{ item.artist_name }}
      {% if item.date %}({{ item.date }}){% endif %}
      </p>
    </div>
  </div>
  {% endfor %}
</div>

{{ render_pagination(pager) }}

</div>
{% endblock %}

{% block script %}
<script>
  $('#filters').hide();

  $('#toggle-filters').click((event) => {
    event.preventDefault();
    $('#filters').toggle()
  });

</script>
{% endblock %}