{% extends "base.html" %}

{% block title %}{{ label }} ({{qid }}){% endblock %}

{% block style %}
<style>
.description { margin-left: 2em; color: rgb(96, 96, 96); }
</style>
{% endblock %}

{% block content %}
<div>
  <div class="d-flex">
      <div class="p-2 flex-fill">
        <h1>{{ self.title() }}</h1>

  <p>
  <a href="https://www.wikidata.org/wiki/{{ qid }}">view this painting on Wikidata</a>
  |
  <a href="{{ url_for('random_painting') }}">switch to another painting</a>
  |
  <a href="{{ url_for('browse_page') }}">browse paintings</a>
  </p>





      <div>
      {% for hit in hits %}
        <p>
        url: {{ hit.url }}<br>
        label: {{ hit.label }}<br>
        qid: {{ hit.qid }}<br>
        sources: {{ hit.sources() }}<br>
        </p>
      {% endfor %}

      <div>
      {% for key, prop_label in labels.items() %}
        {% set claims = entity['claims'][key] %}
        {% if claims %}
          <div>
          <strong>{{ prop_label }}</strong>:
          {% for claim in claims %}
            {% 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 }})
          {% endfor %}
          </div>
        {% endif %}
      {% endfor %}
      {% if catalog_detail %}
        {% for detail in catalog_detail %}
          <div>
          <strong>{{ detail.label }}</strong>:
          <a href="{{ detail.url }}">{{ detail.value }}</a>
          </div>
        {% endfor %}
      {% endif %}


      {% if catalog_url %}
        <p>
          <strong>catalog URL</strong>:
          <a href="{{ catalog_url }}">{{ catalog_url }}</a>
        </p>
      {% endif %}

      {% if catalog %}
        <div class="mt-2">
          <h4>information from the {{ catalog.institution }} catalog</h4>
          {% if catalog.description %}
            <div><strong>description</strong>: {{ catalog.description }}</div>
          {% endif %}
          {% if catalog.keywords %}
            <div><strong>keywords</strong>
              <ul>
                {% for keyword in catalog.keywords %}
                  <li>{{ keyword }}</li>
                {% endfor %}
              </ul>
            </div>
          {% endif %}
        </div>
      {% endif %}
      </div>
      </div>

      {% raw %}
      <div id="app" class="mt-2">
        <h3>what can you see in this painting?</h3>

        <div v-for="(hit, index) in new_depicts">
          <div>
            {{ hit.label }}
            <span v-if="hit.alt_label">({{ hit.alt_label }})</span>
            <a href="#" @click.prevent="remove(index)" >remove</a>
            &mdash; {{ hit.count }} existing paintings
            ({{ 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>

        <input class="form-control-lg mt-2 w-100" autofocus autocomplete="off" v-model.trim="searchTerms" @input="search" />
        <div id="item-list">
          <div v-for="hit in hits">
            <div>
              <a href="#" @click.prevent="add_depicts(hit)">{{ hit.label }}</a>
              <span v-if="hit.alt_label">({{ hit.alt_label }})</span>
              &mdash; {{ hit.count }} existing paintings
              ({{ 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>
        </div>
      </div>
      {% endraw %}
    </div>
    <div class="flex-shrink-1 vh-100">
      <img src="{{ image.thumburl }}" />
    </div>
  </div>

</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/app.js') }}"></script>
{% endblock %}