{% block main %}
<h1 class="header">Annotations</h1>
<!-- create pdf from the html annotations -->
<!-- <link rel=stylesheet href="{{ url_for('static', filename='style.css') }}" /> -->
<nav><a href="{{ url_for('annotations_pdf') }}">Get as PDF</a></nav><br><br>


<!-- <iframe src="/static/viewer/web/viewer.html?file=%2Fuploads%2FParatexts__Thresholds_of_Interpretation_-_Gerard_Genette.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>

 -->



<!-- annotations and extracts from API -->

{% for row in annot.rows %}
  {% if 'selector' in row.target[0] %}
    {% if row.target[0].selector|length > 2%}
      <a href="{{row.uri}}"><p align="right" style="font-family:archivo narrow;font-size:12;">{{row.document.title}}</p></a><br>

      <div style="font-family:archivo narrow;font-size:18;">
      <i>"{{row.target[0].selector[2].exact}}"</i></div><br>

        {%if 'https://www.youtube.com'in row.text %}
          <!-- <embed src="{{row.text}}" width="50%"></embed> -->
          <a style="font-family:archivo narrow;font-size:18;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
        {%elif '.jpg' in row.text%}
          <img src="{{row.text}}" alt="{{row.document.title}}"  width="400">
        {%else%}
          <div style="font-family:archivo narrow;font-size:18;color:#ff3300;">{{row.text}}</div><br>
        {% endif %}
      <hr>

    {%else%}
      <a href="{{row.uri}}"><p align="right" style="font-family:archivo narrow;font-size:12;">{{row.document.title}}</p></a><br>

      <div style="font-family:archivo narrow;font-size:18;">
      <i>"{{row.target[0].selector[1].exact}}"</i></div><br>

        {%if 'https://www.youtube.com'in row.text %}
          <!-- <embed src="{{row.text}}" width="50%"></embed> -->
          
          <a style="font-family:archivo narrow;font-size:18;color:#ff3300;" href="{{row.text}}">{{row.text}}</a><br>
        {%elif '.jpg' in row.text%}
          <img src="{{row.text}}" alt="{{row.document.title}}" width="400">
        {%else%}
          <div style="font-family:archivo narrow;font-size:18;color:#ff3300;">{{row.text}}</div><br>
        {% endif %}

      <hr>
    {% endif %}
  {%else%}
    <a href="{{row.uri}}"style="font-family:archivo narrow;font-size:12;">{{row.document.title}}</a><br>
    <p style="font-family:archivo narrow;font-size:18;color:#ff3300;">{{row.text}}</p><br>
    <hr><br>
  {% endif %}
{% endfor %}

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

<!-- <script type="application/json" class="js-hypothesis-config">
  {
    "openSidebar": true,
    "branding": {"appBackgroundColor": "yellow"},
    "enableExperimentalNewNoteButton": true

  }
</script> -->


<!-- <script type="text/javascript">
  window.hypothesisConfig = function () {
  return {
    openSidebar: true,
    showHighlights: true,
    usernameUrl: 'localhost:8080/annotations',
    branding: {
      appBackgroundColor: 'yellow',
      ctaBackgroundColor: 'rgba(227, 38, 54, 1)',
      ctaTextColor: '#eee',
      selectionFontFamily: 'archivo narrow',
      annotationFontFamily: 'archivo narrow',
      accentColor: 'red'
    },
    services: {
      apiUrl: 'http://localhost:5000/api/',
      onProfileRequest: 'http://localhost:8080/',
      onHelpRequest: 'http://localhost:8080/',
      authority: 'http://localhost:5000/',
      grantToken: '6879-rwfbfodYqhBn2OK2ODnNGkzlWUa4bPCoJi2U8pgTYHg',
      icon: 'https://pzwiki.wdka.nl/mw-mediadesign/images/9/9c/Xppl-logo.svg'
    },
      onLayoutChange: {
        width:200
    },
    // sidebarAppUrl: 'http://localhost:5000/app.html'
  };
};
</script>

<script async id="location" src="http://localhost:5000/embed.js"></script> -->

<!-- <script async type="text/javascript" document.getElementById("location").src = window.location.hostname + ":5000/embed.js";></script> -->

<!-- <script  async id="location" src= "//localhost:5000/embed.js"></script> -->
<!-- <p id="location"></p> -->

<!-- <script >
  document.getElementById("#location").src = window.location.hostname + ":5000/embed.js";
</script>
 -->

<!-- <script async src="http://localhost:5000/embed.js"></script> -->




{% endblock %}