depicts/templates/next.html

{% extends "base.html" %}

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

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

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

  <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>

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

  </div>

  <div class="flex-shrink-1 vh-100">
    <img src="{{ image.thumburl }}">
  </div>
</div>
{% endblock %}

{% block script %}
<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>
{% endblock %}