{% extends 'base.html' %}
{% import 'macros/gwent_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 Gwent - {{ article.title }}">
<meta property="og:description" content="Overview of cards in {{ article.title }}, {{ article.faction }}, Gwent version {{ article.gwent_version }}">
<meta property="og:image" content="{{ SITEURL }}/theme/img/DeckLock_gwent.jpg">

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{{ SITEURL }}/{{ output_file }}">
<meta property="twitter:title" content="DeckLock for Gwent - {{ article.title }}">
<meta property="twitter:description" content="Overview of cards in {{ article.title }}, {{ article.faction }}, Gwent version {{ article.gwent_version }}">
<meta property="twitter:image" content="{{ SITEURL }}/theme/img/DeckLock_gwent.jpg">
{% endblock %}

{% block extra_css %}
<link href="{{ SITEURL }}/theme/css/gwent.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 }}/gwent.html">Gwent</a></li>
      <li class="breadcrumb-item active">{{ article.title }}</li>
    </ol>

<h1>{{ article.title }} <small>{{ article.faction }} ({{ article.gwent_version }})</small></h1>
<div class="row">
    <div class="col-sm-6 col-md-3"><img src="{{ SITEURL }}/theme/img/gwent/scraps-icon.png" /> {{ article.scraps }}</div>
    <div class="col-sm-6 col-md-3"><img src="{{ SITEURL }}/theme/img/gwent/cards-icon.png" /> {{ article.cards }}</div>
    <div class="col-sm-6 col-md-3"><img src="{{ SITEURL }}/theme/img/gwent/helmet-icon.png" /> {{ article.units }}</div>
    <div class="col-sm-6 col-md-3"><img src="{{ SITEURL }}/theme/img/gwent/provision-icon-full.png" /> {{ article.provisions }}</div>
</div>
<div class="row">
    <div class="col-md-8 top15">
        <div class="card h-100">
            <div class="card-header"><h3>Main Deck</h3></div>
            <div>
                <table  class="table table-striped gwent-cards-table">
                    <thead>
                    <tr>
                        <th></th>
                        <th>Type</th>
                        <th>Name</th>
                        <th>Provisions</th>
                    </tr>
                    </thead>
                    <tbody>
                        {{ card_list_item.print(article.leader, USE_EXTERNAL_LINKS, SITEURL) }}
                        {{ card_list_item.print(article.stratagem, USE_EXTERNAL_LINKS, SITEURL) }}
                        {% for card in article.deck|sort(attribute='name')|sort(attribute='data.provision', reverse = True) %}
                                {{ card_list_item.print(card, USE_EXTERNAL_LINKS, SITEURL) }}
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    <div class="col-md-4 top15">
                <div class="card h-100">
            <div class="card-header"><h3>Description</h3></div>
            <div class="card-body">
                {{ article.description | md }}
            </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="provisionsStats" width="400" height="400"></canvas>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(function () {
  $('[data-toggle="popover"]').popover({html: true})
})
</script>
<script>
var ctx = document.getElementById('provisionsStats').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ["{{ article.stats.labels|join('", "') }}"],
        datasets: [{
            data: [{{ article.stats.provisions|join(', ') }}],
            borderColor: 'rgba(0, 188, 140, 0.8)',
            backgroundColor: 'rgba(0, 188, 140, 0.3)'
        }]
    },
    options: {
        plugins: {
            legend: {
                display: false
            }
        },
        scales: {
            y: {
                ticks: {
                    suggestedMin: 0,
                    suggestedMax: 15
                }
            },
            x: {
                ticks: {
                    display: false
                }
            }
        }
    }
});
</script>
{% endblock %}