{% extends 'base.html' %}

{% block title %}
{{ SITENAME }} - Fab Overview
{% endblock %}

{% block extra_css %}
{% endblock extra_css %}

{% block container %}

    <ol class="breadcrumb top15">
      <li class="breadcrumb-item"><a href="{{ SITEURL }}/index.html">DeckLock</a></li>
      <li class="breadcrumb-item active">Flesh and Blood</li>
    </ol>

    <h1>Flesh and Blood Decks</h1>

    <div style="max-width:100%;overflow-x:auto">
    <table id="deck_overview" class="table table-striped">
        <thead>
        <tr>
            <th scope="col" data-sort="string-ins">Deck</th>
            <th scope="col" data-sort="string-ins">Hero</th>
            <th scope="col" data-sort="string-ins">Class</th>
            <th scope="col" data-sort="string-ins">Format</th>
        </tr>
        </thead>
        <tbody>
        {% for a in articles|sort(attribute='name') %}
            {% if a.category == "FaB_Deck" %}
            <tr>
                <td><a href="{{ SITEURL }}/{{ a.url }}">{{ a.name }}</a></td>
                <td>{{ a.hero.name }}</td>
                <td>{{ a.hero.class }}</td>
                <td>{{ a.format }}</td>
            </tr>
            {% endif %}
        {% endfor %}
        </tbody>
    </table>
    </div>
{% endblock %}

{% block extra_js %}
<script src="{{ SITEURL }}/theme/js/stupidtable.min.js"></script>
<script>
$(function(){
  $("#deck_overview").stupidtable();
 });
</script>
{% endblock %}