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

#artwork {
    position: fixed;   /* This keeps the map in place when the page is scrolled */
    top: 56px;
    left: 0;          /* Positioned on the right side */
    width: 50%;        /* Half the screen width */
    bottom: 0px;
    z-index: -1;
}

#artwork img {
  object-fit: contain; /* The image will be scaled to maintain its aspect ratio */
  width: 100%;
  height: 100%;
}


#main {
  float: right;       /* Floats the main content to the right */
  width: 48%;         /* Adjusted width of the main content */
  height: auto;       /* Height is set to auto, allowing it to expand naturally */
  margin-right: 1%;
}

</style>
{% endblock %}

{% block content %}
    <div id="artwork">
      <div class="w-100 h-100">
        <img src="{{ image.thumburl }}" />
      </div>
    </div>
    <div id="main">
        <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 %}
      {% 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.description or catalog.keywords %}
        <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>
              {% for keyword in catalog.keywords %}
                <span class="badge badge-primary">{{ keyword }}</span>
              {% endfor %}
            </div>
          {% endif %}
        </div>
      {% endif %}
      </div>
      </div>

      {% if not username %}
      <div class="alert alert-info mt-4" role="alert">
        This tool must be connected with Wikidata to work.
      </div>
        <p><a href="{{ url_for('start_oauth', next=current_url()) }}" class="btn btn-primary btn-lg">Connect with Wikidata</a>
      {% endif %}

      {% if username %}
      <form method="POST" action="{{ url_for('save', item_id=item_id) }}">
      {% raw %}
      <div id="app" class="mt-2">
        <div v-if="existing_depicts.length">
          <div>this artwork has {{ existing_depicts.length }} existing depicts statement</div>
        </div>

        <div class="mb-2" v-for="(hit, index) in existing_depicts">
          <div>
            <a :href="'https://www.wikidata.org/wiki/' + hit.qid">{{ hit.label }}</a>
            ({{ hit.qid }})
            &nbsp;
            <span v-if="hit.description" class="description">{{ hit.description }}</span>
            &mdash; {{ hit.count }} artworks
          </div>
        </div>

        <h3>what can you see in this artwork?</h3>

        <div v-if="people.length">
          <div>These people were born and died in the same years as appears in the title of the artwork.</div>
          <div v-for="person in people">
            <a href="#" @click.prevent="add_person(person)">{{ person.label || '[name missing]' }}</a>,
            {{ person.year_of_birth }}-{{ person.year_of_death}} ({{ person.qid }})
            <span v-if="person.description" class="description">{{ person.description }}</span>
            <a :href="'https://www.wikidata.org/wiki/' + person.qid">[wikidata]</a>
          </div>
        </div>

        <div v-if="new_depicts.length">
          <div>{{ new_depicts.length }} new items to add to artwork depicts statement</div>
        </div>

        <div v-for="(hit, index) in new_depicts">
          <input type="hidden" name="depicts" :value="hit.qid">
          <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 artworks
            ({{ hit.qid }})
            <a :href="'https://www.wikidata.org/wiki/' + hit.qid">[wikidata]</a>
          </div>
          <div v-if="hit.description">
            <div class="description">{{ hit.description }}</div>
          </div>
        </div>

        <button type="submit" v-if="new_depicts.length" class="btn btn-primary">add these to artwork on Wikidata</button>

        <input class="form-control-lg my-2 w-100" autocomplete="off" v-model.trim="searchTerms" ref="search" @input="search" />

        <div v-if="hits.length" 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 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 v-else-if="searchTerms.length >= 3">
          no matching depicts found
        </div>
      </div>
      {% endraw %}
      </form>
      {% endif %}
    </div>
{% endblock %}

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