{% extends 'base.html' %}

{% block main %}
<div class="container">
  <h1 class="header">{{ book.title }}</h1>
<div style="float:right; padding-right: 140px;">
 <img class="no_cover" id="{{ book.title }}" src="../uploads/cover/{{ book.cover }}" width="280px" onerror="if (this.src != '../uploads/cover/{{ book.cover }}') this.src = '../static/img/default_cover.gif';"></div>

  <table class="library_table" id="table" style="width:50%; padding-bottom: 80px;">
<thead>
  <tr id="header">
    <th style="width: 150px;"></th>
    <th style="width: 300px;"></th>
  </tr>
</thead>
  <tbody>
    <tr>
      <td>Year published: </td>
      <td>{{ book.year_published or '––'}}</td>
    </tr>
    <tr>
      <td> Author(s): </td>
      <td>{% for author in book.authors %}
        <a href="{{url_for('show_author_by_id', id=author.id)}}">{{ author.author_name }}</a><br>
      {% endfor %}</td>
    </tr>
    <tr>
      <td>Category: </td>
      <td>{{ book.category }}</td>
    </tr>
    <tr>
      <td>Included in stack(s): </td>
      <td>{% for stack in book.stacks %}
          <li><a href="{{url_for('show_stack_by_id', id=stack.id)}}">{{ stack.stack_name }}</a>
            <p style="font-size: 10px;"><a href="{{url_for('remove_from_stack', stackid=stack.id, bookid=book.id)}}"> – Remove from stack</a>{% endfor %}</td>
    </tr>
       <tr>
      <td></td>
      <td></td>
    </tr>
   <tr>
      <td style="font-style: italic;">Notes from uploader</td>
      <td></td>
    </tr>
    <tr>
      <td>How different is this item to the rest of the collection?<br></td>
      <td>{{ book.sameness or '?'}} % different</td>
    </tr>
    <tr>
      <td>How diverse are the references in this book?<br></td>
      <td>{{ book.diversity or '?' }} % diverse </td>
    </tr>
    <tr>
      <td>Who is speaking?<br></td>
      <td>{{ book.gender or '?' }} % female </td>
    </tr>
    <tr>
      <td>Who is uploading<br></td>
      <td>{{ book.who or '?' }} </td>
    </tr>
    <tr>
      <td>How much time has been spent with this item?<br></td>
      <td>{{ book.time or '?' }} </td>
    </tr>

</tbody>
  </table>

  <br>
  <br>
  <p>Instances:</p>
  {% set got = {} %}
  {% set all = 1 %}
  {% for instance in book.instances %}

  {% if instance.name in got %}
  {% set x=got.__setitem__(instance.name, got[instance.name]+1) %}
  {% else %}
  {% set x=got.__setitem__(instance.name, 1) %}
  {% endif %}
  {% set all = loop.index %}
  {% endfor %}

  {% for instance, value in got.items() %}
    {% set result = value/(book.instances|length) %}
    {{ instance }}: {{ (result*100)|round|int }}%<br>
  {% endfor %}
  <br>


    {% if book.file %}
    <button id="myBtn" style= "width: 180px; font-size: 10pt;"><a> Download this {{ book.fileformat }}</a></button>
    <div id="myModal" class="modal">
      <div class="modal-content">
        <span class="close">&times;</span>
        <h3>A message from the uploading librarian:</h3>
        <span style="font-style: italic;">"{{book.message or 'Happy reading.'}}" </span><br>
        <h4><a href="/viewpdf/{{ book.file }}"> >>>> Link to file <<<<</h4></a></div>
      </div>
    {% else %}
    {% endif %}


  <button style= "font-size: 10pt;"> <a href="{{ url_for('edit_book_by_id', id=book.id )}}">edit</a></button>
  <button style= "font-size: 10pt;"> <a href="{{ url_for('remove_book_by_id', id=book.id)}}">delete</a></button>
<br><br>

<hr>
{% if previousbook %}
<a href="{{ url_for('show_book_by_id', id=previousbook.id )}}" style="font-size: 9pt;"> < see the previous book added to XPPL: &nbsp;<i>{{ previousbook.title |truncate(40,True,'...') }} </i></a> {% endif %}
{% if nextbook %}
<a href="{{ url_for('show_book_by_id', id=nextbook.id )}}" style="float:right; font-size: 9pt;"> see the next book added to XPPL: &nbsp;<i>{{ nextbook.title|truncate(40,True,'...')}} </i>> </a>{% endif %}
</div>



{% for row in bannot %}
    {%for book in books%}
      {%if book.file == row.uri%}
      <a href="books/{{book.id}}"><p align="right" style="font-family:archivo narrow;font-size:12px;">{{book.title}}</p></a><br>
      {% endif %}
    {% endfor %}

<p align="right" style="font-family:archivo narrow;font-size:14px;">{{row.title}}</p><br>

<p style="font-family:archivo narrow;font-size:8px;">Extracts:</p>
    <div style="font-family:archivo narrow;font-family:archivo narrow;font-size:18px;">
      <i>"{{ row.extract }}"</i></div><br>

<p style="font-family:archivo narrow;font-size:8px;color:#ff3300;">Annotations:</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>
          <hr>
  {%elif '.jpg' in row.text%}
          <img src="{{row.text}}" alt="" width="400">
          <hr>
  {%else%}
          <div style="font-family:archivo narrow;font-size:18px;color:#ff3300;">{{row.text}}</div><br>
          <hr>
  {% endif %}
  {%endfor%}

{% endblock %}