{% extends 'base.html' %}

{% block main %}
<div class="container">

  <h1 class="header">{{ stack.stack_name }}</h1>

  <p>{{ stack.stack_description }} </p>
  <p id='creator'>Created by:
{%  if stack.stack_author == None %} anon</p>
{% else %}

    {{ stack.stack_author }}
{% endif %}
  <h2>Books in this stack:</h2>

<p>

  {% for book in stack.books %}
  {% if loop.length >= 5 %}
    {% if loop.index == 6 %}
<p style='color:red;'>Your stack is getting a little too big. Are these next books really relevant?</p>
<br>
<br>
    {% endif %}
  {% endif %}

          <li>  <a href="{{url_for('show_book_by_id', id=book.id)}}">{{book.title}}</a> </li>
          <img class="no_cover" id="{{ book.title }}" src="../cover/{{ book.cover }}" width="150" onerror="if (this.src != '../cover/{{ book.cover }}') this.src = '../static/img/default_cover.gif';">
<div class='widget'>
  {%if light%}
  {%else%}
          <iframe src="../uploads/{{ book.file }}" width="50%" ></iframe>
          {%endif%}

</div>


    {% endfor %}</p>

  <br>
  <br>
  {%if light%}
  {%else%}
  <p><a href="{{url_for('show_books')}}">Add some more books</a></p>
<p><a href="{{ url_for('edit_stack_by_id', id=stack.id )}}">Edit title and/or description</a> </p>
  <p><a href="{{ url_for('remove_stack_by_id', id=stack.id )}}">Remove stack</a> </p>
  {%endif%}
<p><a href="{{url_for('show_stacks')}}">Go back to the other stacks</p>

</div>
{% endblock %}