{% extends 'base.html' %}
{% import 'macros/fab_card_list_item.html' as card_list_item %}
{% block title %}
{{ SITENAME }} - {{ article.title }}
{% 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"><a href="{{ SITEURL }}/fab.html">Flesh and Blood</a></li>
      <li class="breadcrumb-item active">{{ article.title }}</li>
    </ol>

<h1>{{ article.title }} <small class="text-muted">({{ article.format }})</small></h1>
{% if article.fabdb_url %}
    <div class="row top5">
        <div class="col text-right"><span>View deck on <a href="{{ article.fabdb_url }}">FaBDB.net</a></span></div>
    </div>
{% endif %}
<div class="row">
    <div class="col-md-12 top15">
        <div class="card h-100">
            <div class="card-header"><h3>Main Deck</h3></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg-6 col-md-6 col-sm-12">
                    <h4>Hero</h4>
                        <ul class="card_list">
                        {{ card_list_item.print(article.hero, USE_EXTERNAL_LINKS) }}
                        </ul>
                    <h4>Weapons <small class="text-muted">({{ article.weapons|length }})</small></h4>
                    <ul class="card_list">
                        {% for card in article.weapons %}
                        {{ card_list_item.print(card, USE_EXTERNAL_LINKS) }}
                        {% endfor %}
                    </ul>

                    <h4>Equipment <small class="text-muted">({{ article.equipment|length }})</small></h4>
                    <ul class="card_list">
                        {% for card in article.equipment %}
                        {{ card_list_item.print(card, USE_EXTERNAL_LINKS) }}
                        {% endfor %}
                    </ul>
                    </div>
                    {% set ns = namespace(redpitch=0, yellowpitch=0, bluepitch=0, nopitch=0, cardcount=0) %}
                    {% for card in article.cards -%}
                        {% set ns.cardcount = ns.cardcount + card.count|int -%}
                        {% if card.stats.resource|string == "1" -%}
                            {% set ns.redpitch = ns.redpitch + card.count|int -%}
                        {% elif card.stats.resource|string == "2" -%}
                            {% set ns.yellowpitch = ns.yellowpitch + card.count|int -%}
                        {% elif card.stats.resource|string == "3" -%}
                            {% set ns.bluepitch = ns.bluepitch + card.count|int -%}
                        {% else  -%}
                            {% set ns.nopitch = ns.nopitch + card.count|int -%}
                        {% endif %}
                    {% endfor %}
                    <div class="col-lg-6 col-md-6 col-sm-12">
                        <h4>Other Cards <small class="text-muted">({{ ns.cardcount }})</small></h4>
                        <p><span class="fab-dot fab-dot-red"></span>{{ ns.redpitch }}&nbsp;&nbsp;&nbsp;&nbsp;<span class="fab-dot fab-dot-yellow"></span>{{ ns.yellowpitch }}&nbsp;&nbsp;&nbsp;&nbsp;<span class="fab-dot fab-dot-blue"></span>{{ ns.bluepitch }}&nbsp;&nbsp;&nbsp;&nbsp;<span class="fab-dot"></span>{{ ns.nopitch }}
                        </p>
                        <ul class="card_list">
                        {% for card in article.cards %}
                        {{ card_list_item.print(card, USE_EXTERNAL_LINKS) }}
                        {% endfor %}
                    </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

</div>
<div class="row">
    <div class="col-md-12 top15">
        <div class="card h-100">
            <div class="card-header"><h3>Visual</h3></div>
            <div class="card-body">
                <div>
                        <div class="card-stack" style="height:370px">
                        {{ card_list_item.card_image(article.hero, USE_EXTERNAL_LINKS, '') }}
                        </div>
                        <div class="card-stack" style="height:{{330 + (article.weapons|length * 40) }}px">
                        {% for card in article.weapons|sort(attribute='name') %}
                        {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "fab-overview-position-" + loop.index|string) }}
                        {% endfor %}
                        </div>
                        <div class="card-stack" style="height:{{330 + (article.equipment|length * 40) }}px">
                        {% for card in article.equipment|sort(attribute='name') %}
                        {{ card_list_item.card_image(card, USE_EXTERNAL_LINKS, "fab-overview-position-" + loop.index|string) }}
                        {% endfor %}
                        </div>
                        {% for stack in article.stacks %}
                        <div class="card-stack" style="height:{{330 + (stack|length * 40) }}px">
                            {% for item in stack %}
                            {{ card_list_item.card_image(article.cards[item], USE_EXTERNAL_LINKS, "fab-overview-position-" + loop.index|string) }}
                            {% endfor %}
                        </div>
                        {% endfor %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(function () {
  $('[data-toggle="popover"]').popover({html: true})
})
</script>
{% endblock %}