{% extends 'base.html' %}
{% import 'macros/card_list_item.html' as card_list_item %}
{% block title %}
{{ SITENAME }} - {{ article.title }}
{% endblock %}

{% block social_media_meta %}
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="{{ SITEURL }}/{{ output_file }}">
<meta property="og:title" content="DeckLock for Magic: the Gathering - {{ article.title }}">
<meta property="og:description" content="Overview of cards in {{ article.title }}, format {{ article.format }}">
<meta property="og:image" content="{{ SITEURL }}/theme/img/DeckLock_mtg.png">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ SITEURL }}/{{ output_file }}">
<meta property="twitter:title" content="DeckLock for Magic: the Gathering - {{ article.title }}">
<meta property="twitter:description" content="Overview of cards in {{ article.title }}, format {{ article.format }}">
<meta property="twitter:image" content="{{ SITEURL }}/theme/img/DeckLock_mtg.png">
{% endblock %}

{% block extra_css %}
<link href="{{ SITEURL }}/theme/css/mana-cost.css" rel="stylesheet" />
{% 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 }}/mtg.html">Magic: the Gathering</a></li>
      <li class="breadcrumb-item active">{{ article.title }}</li>
    </ol>

<h1>{{ article.title }} <small class="text-muted">({{ article.format }})</small></h1>
{% if article.description|length > 0 %}
    <div class="row">
        <div class="col-md-8 top15">
            {{ article.description | md }}
        </div>
    </div>
{% endif %}

{% set ns = namespace(landcount=0, lands=[],
                      creaturecount=0, creatures=[],
                      iscount=0, is=[],
                      othercount=0, other=[],
                      cardcount=0, sbcount=0) %}
{% for card in article.deck.main|sort(attribute='name') -%}
    {% set ns.cardcount = ns.cardcount + card.count|int -%}
    {% if card.card_type == "land" -%}
        {% set ns.landcount = ns.landcount + card.count|int -%}
        {% set ns.lands = ns.lands + [card] %}
    {% elif card.card_type == "creature" %}
        {% set ns.creaturecount = ns.creaturecount + card.count|int -%}
        {% set ns.creatures = ns.creatures + [card] %}
    {% elif card.card_type == "instant" or card.card_type == "sorcery" %}
        {% set ns.iscount = ns.iscount + card.count|int -%}
        {% set ns.is = ns.is + [card] %}
    {% else %}
        {% set ns.othercount = ns.othercount + card.count|int -%}
        {% set ns.other = ns.other + [card] %}
    {% endif %}
{% endfor %}
{% for card in article.deck.sideboard|sort(attribute='name') %}
    {% set ns.sbcount = ns.sbcount + card.count|int -%}
{% endfor %}

<div class="row">
    <div class="col-md-8 top15">
        <div class="card h-100">
            <div class="card-header"><h3>Main Deck <small class="text-muted">({{ ns.cardcount }})</small></h3></div>
            <div class="card-body">
                <div class="row">
                    <div class="col-lg">

                    {% if ns.landcount > 0 %}
                    <h4>Lands <small class="text-muted">({{ ns.landcount }})</small></h4>
                    <ul class="card_list">
                        {% for card in ns.lands %}
                            {{ card_list_item.print(card, USE_EXTERNAL_LINKS) }}
                        {% endfor %}
                    </ul>
                    {% endif %}

                    {% if ns.creaturecount > 0 %}
                    <h4>Creatures <small class="text-muted">({{ ns.creaturecount }})</small></h4>
                    <ul class="card_list">
                        {% for card in ns.creatures %}
                             {{ card_list_item.print(card, USE_EXTERNAL_LINKS) }}
                        {% endfor %}
                    </ul>
                     {% endif %}
                    </div>
                    <div class="col-lg">
                    {% if ns.iscount > 0 %}
                    <h4>Instants and Sorceries <small class="text-muted">({{ ns.iscount }})</small></h4>
                    <ul class="card_list">
                        {% for card in ns.is %}
                            {{ card_list_item.print(card, USE_EXTERNAL_LINKS) }}
                        {% endfor %}
                    </ul>
                    {% endif %}
                    {% if ns.othercount > 0 %}
                    <h4>Other Spells <small class="text-muted">({{ ns.othercount }})</small></h4>
                    <ul class="card_list">
                        {% for card in ns.other %}
                                {{ card_list_item.print(card, USE_EXTERNAL_LINKS) }}
                        {% endfor %}
                    </ul>
                    {% endif %}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-4 top15">
        <div class="card h-100">
            <div class="card-header"><h3>Sideboard <small class="text-muted">({{ ns.sbcount }})</small></h3></div>
            <div class="card-body">
                <ul class="card_list">
                    {% for card in article.deck.sideboard|sort(attribute='name') %}
                        {{ card_list_item.print(card, USE_EXTERNAL_LINKS) }}
                    {% endfor %}
                </ul>
            </div>
        </div>
    </div>
</div>
<div class="row">
    <div class="col-sm-12 col-md-6 col-lg-4 top15">
        <div class="card plot">
        <canvas id="cmcStats" width="400" height="400"></canvas>
        </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>
                    {% for stack in article.deck.main_stacks %}
                        <div class="card-stack" style="height:{{330 + (stack|length * 40) }}px">
                            {% for item in stack %}
                            {{ card_list_item.card_image(article.deck.main[item], USE_EXTERNAL_LINKS, "mtg-overview-position-" + loop.index|string) }}
                            {% endfor %}
                        </div>
                    {% endfor %}
                </div>
                <div style="clear:both">
                    <h4>Sideboard</h4>
                    {% for stack in article.deck.sideboard_stacks %}
                        <div class="card-stack" style="height:{{330 + (stack|length * 40) }}px">
                            {% for item in stack %}
                            {{ card_list_item.card_image(article.deck.sideboard[item], USE_EXTERNAL_LINKS, "mtg-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>
<script>
var ctx = document.getElementById('cmcStats').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "10+"],
        datasets: [{% for color, data in article.deck.cmc_distribution.items() %}
        {
            label: '{{ color }}',
            data: [{{ data|join(', ') }}],
                    borderColor: '{{ article.deck.cmc_distribution_colors[color][0] }}',
                    backgroundColor: '{{ article.deck.cmc_distribution_colors[color][1] }}'
        },
        {% endfor %}]
    },
    options: {
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            x: {
                stacked: true,
                ticks: {
                    display: true
                }
            },
            y: {
                stacked: true
            }
        }
    }
});
</script>
{% endblock %}