<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Sentences</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/styles.css') }}" />
    <style>
      p {
          font-style: italic;
      }
    </style>

    <script>
      function open_sentence_text(textid) {
        window.open(`/read/${textid}`, '_blank');
      }
    </script>

  </head>

  <body>

    {% for k, dtos in references.items() %}
    {% if dtos|length > 0 %}
    <p>{{ k }}</p>
    <ul class="sentencelist">
      {% for dto in dtos %}
      <li style="margin-top: 4px;">
        {{ dto.sentence | safe }}
        <br/>
        <a onclick="open_sentence_text({{ dto.book_id }}, {{ dto.page_number }});" style="cursor: pointer; font-size: 0.9em; font-style: italic;">{{ dto.title }}</a>
      </li>
      {% endfor %}
    </ul>
    {% endif %}
    {% endfor %}

  </body>

</html>

