{% extends 'base.html' %}

{% block main %}
<div class="container">
  <h1 class="page-header">Stacks</h1>
<p>These are all the stacks that have been built so far.</p>

<table style="width:100%">

<!--
<td>  {% for stack in stacks %}

      <li><a href="{{url_for('show_stack_by_id', id=stack.id)}}">{{ stack.stack_name }}</a>  </li>

      {% endfor %}
</td>


</table>
-->


<div id="tabs">
  <ul>
{% for stack in stacks %}

    <li><a href="#tabs-1">{{ stack.stack_name }}</a></li>

  {% endfor %}
  </ul>
  <div id="tabs-1">
    <h2>Stack description</h2>
    <p>This stack is nice.</p>
  </div>

</div>

<h1 class="page-header">Build a stack</h1>

<div id="draggable" class="ui-widget-content">
  <p>List of books</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Stack</p>
</div>

</div>

{% endblock %}