{% extends "base.html" %}

{% block title %}{{ label or 'no label' }} ({{qid }}){% endblock %}

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

{% block content %}
<div class="container-fluid mt-2">
  <div class="row">
    <div class="col-md">
      <img src="{{ image.thumburl }}" class="w-100" />
    </div>
      <div class="col-md">
        <h1>{{ self.title() }}</h1>
        {% if label_languages %}
        <p>Label from:
        {% for lang in label_languages %}
          {{ lang.label }} ({{ lang.code }})
          {% if show_translation_links %}
            <a href="https://translate.google.com/#view=home&op=translate&sl={{lang.code}}&tl=en&text={{label}}" target="translation">[translate]</a>
          {% endif %}
        {% endfor %}
        </p>
        {% endif %}

  <div class="m-2">
  <a href="https://www.wikidata.org/wiki/{{ qid }}" class="btn btn-primary">view on Wikidata</a>
  <a href="{{ url_for('random_artwork') }}" class="btn btn-primary">skip this artwork</a>
  <a href="{{ url_for('browse_page') }}" class="btn btn-primary">browse artworks</a>
  </div>


      <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 %}
            {% 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 %}

      </div>
      </div>

      <div class="alert alert-info mt-4" role="alert">
        This item is not a work of art.
      </div>

    </div>
  </div>
</div>
{% endblock %}