{% extends 'base.html' %}

{% block main %}
<h1 class="header">Annotations of XPPL</h1>
<a href="{{ url_for('annotations_pdf') }}" style="color:#ff3300;">Get as PDF</a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="/search_annot" style="color:#ff3300;"> Search</a><br><br><br><br><br><br><br><br>



{% for row in annot.rows %}
  {% if 'selector' in row.target[0] %}
    {%for book in books%}
      {%if book.file == row.uri%}
      <p align="right" style="font-family:archivo narrow;font-size:10px;">Book</p>
      <a href="books/{{book.id}}"><p align="right" style="font-family:archivo narrow;font-size:18px;">{{book.title}}</p></a><br>
      {% endif %}
    {% endfor %}

    {% if row.target[0].selector|length > 2%}
    <p style="font-family:archivo narrow;font-size:10px;">Extract</p>
      <div style="font-family:archivo narrow;font-size:18px;"><i>"{{row.target[0].selector[2].exact}}"</i></div><br>
      <p style="font-family:archivo narrow;font-size:10px;color:#ff3300;">Annotation</p>
        {%if 'https://www.youtube.com' in row.text %}
          <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
        {%elif '.jpg' in row.text%}
          <img src="{{row.text}}" alt="{{row.document.title}}"  width="400">
        {%elif '.mp3' in row.text %}
          <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
        {%else%}
          <div style="font-family:archivo narrow;font-size:18px;color:#ff3300;">{{row.text}}</div><br>
        {% endif %}
      <hr>

    {%else%}
    <p style="font-family:archivo narrow;font-size:10px;">Extract</p>
      <div style="font-family:archivo narrow;font-size:18px;">
      <i>"{{row.target[0].selector[1].exact}}"</i></div><br>
       <p style="font-family:archivo narrow;font-size:10px;color:#ff3300;">Annotation</p>
        {%if 'https://www.youtube.com'in row.text %}
          <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
        {%elif '.jpg' in row.text%}
          <img src="{{row.text}}" alt="{{row.document.title}}" width="400">
          {%elif '.mp3' in row.text %}
          <a style="font-family:archivo narrow;font-size:18px;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
        {%else%}
          <div style="font-family:archivo narrow;font-size:18px;color:#ff3300;">{{row.text}}</div><br>
        {% endif %}
      <hr>
    {% endif %}
  {%else%}
    <p style="font-family:archivo narrow;font-size:18px;color:#ff3300;">{{row.text}}</p><br>
    <hr><br>
  {% endif %}
{% endfor %}

<!-- dump of the API json annotations -->
<!-- dump:
<pre>
{{dump}}
</pre> -->



{% endblock %}