{% extends 'base.html' %}
{% import 'macros/casting_cost.html' as casting_cost %}

{% block title %}
{{ SITENAME }} - M:tG Overview
{% 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 - Overview">
<meta property="og:description" content="Overview of {{ articles|selectattr("category", "equalto", "MTG_Deck")|list|length  }} M:tG Decks">
<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 - Overview">
<meta property="twitter:description" content="Overview of {{ articles|selectattr("category", "equalto", "MTG_Deck")|list|length  }} M:tG Decks">
<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 active">Magic: The Gathering</li>
    </ol>

    <h1>Magic: The Gathering 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">Format</th>
            <th scope="col" class="text-right">Colors</th>
        </tr>
        </thead>
        <tbody>
        {% for a in articles|rejectattr('format', 'undefined')|sort(attribute='name')|sort(attribute='format') %}
            {% if a.category == "MTG_Deck" %}
            <tr>
                <td><a href="{{ SITEURL }}/{{ a.url }}">{{ a.name }}</a></td>
                <td>{{ a.format }}</td>
                <td>{{ casting_cost.parse(a.deck.colors_string) }}</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 %}