{% extends "base.html" %}

{% block title %}{{ label }} ({{qid }}){% 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>

        <div class="alert alert-primary" role="alert">
        Thanks for contributing. Your edits have been saved to the artwork on Wikidata. Use the links below to find other similar artworks to catalog.
        </div>

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

  {% if session.no_find_more %}
    <p>find more disabled</p>
  {% else %}
  {% raw %}

  <div id="app">
    <div v-for="prop in other_props">
        <h3>{{ prop['label'] }} ({{ prop['pid'] }})</h3>
        <span v-for="value in prop['values']">
          <a :href="value['href']">{{ value['label'] }}</a> ({{ value['qid'] }})
        </span>

        <div>
          <span v-for="image in prop.images">
            <a :href="image.href"><img :src="image.image.thumburl" /></a>
          </span>
        </div>
    </div>

  </div>
  {% endraw %}
  {% endif %}

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

{% block script %}
{% if not session.no_find_more %}
<script>
  var other_props = {{ other_props | tojson }};
</script>
<script src="{{ url_for('static', filename='vue/vue.js') }}"></script>
<script src="{{ url_for('static', filename='js/next.js') }}"></script>
{% endif %}
{% endblock %}