{% extends "base.html" %}

{% macro item_detail(entity) %}
  {% for key, prop_label in labels.items() %}
    {% set claims = entity.claims[key] %}
    {% if claims %}
      <div>
      <strong>{{ prop_label }}</strong>:
      {% for claim in claims %}
        {% if 'datavalue' in claim.mainsnak %}
          {% set claim_qid = claim.mainsnak.datavalue.value.id %}
          <a href="https://www.wikidata.org/wiki/{{ claim_qid }}">{{ other[claim_qid] or '[ label missing ]' }}</a> ({{ claim_qid }})
        {% else %}
          <i>no value</i>
        {% endif %}
      {% endfor %}
      </div>
    {% endif %}
  {% endfor %}
{% endmacro %}

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

{% block style %}
<style>
.autocomplete {
  /*the container must be positioned relative:*/
  position: relative;
  display: inline-block;
}

.autocomplete-items {
  position: absolute;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}
.autocomplete-items div {
  cursor: pointer;
  background-color: #fff;
}



</style>
{% endblock %}

{% block content %}
  <div class="p-2" id="app">
    <h1>{{ self.title() }}</h1>
    {% for item in items %}
    <div class="card mb-3">
      <div class="row no-gutters">
        <div class="col-md-3">
          <img src="{{ item.image.thumburl }}" class="card-img">
        </div>
        <div class="col-md-9">
          <div class="card-body">
            <h5 class="card-title">{{ item.label }}</h5>

              <p>
              <a href="https://www.wikidata.org/wiki/{{ item.qid }}" class="btn btn-primary">view on Wikidata</a>
              </p>

              {{ item_detail(item.entity) }}

              <div class="autocomplete w-100">
                <input class="form-control-lg my-2 search" data-qid="{{item.qid}}" autocomplete="off" @input="search" v-model.trim="searchTerms['{{ item.qid}}']" />

                <div v-if="hits.{{item.qid}} && hits.{{item.qid}}.length" id="item-list" class="autocomplete-items">
                  <div v-for="hit in hits.{{item.qid}}">
                    <div>
                      <a href="#">${ hit.label }</a>
                      <span v-if="hit.alt_label">(${ hit.alt_label })</span>
                      &mdash; ${ hit.count } existing artworks
                      (${ hit.qid })
                      <a :href="'https://www.wikidata.org/wiki/' + hit.qid">view on Wikidata</a>
                    </div>
                    <div v-if="hit.description">
                      <div class="description">${ hit.description }</div>
                    </div>
                  </div> <! -- end for -->
                </div>
              </div>
          </div>
        </div>
      </div>
    </div>
    {% endfor %}
  </div>

{% endblock %}

{% block script %}
<script>
  var lookup_url = {{ url_for('depicts_lookup') | tojson }};
</script>
<script src="{{ url_for('static', filename='vue/vue.js') }}"></script>
<script src="{{ url_for('static', filename='js/catalog.js') }}"></script>
{% endblock %}