{% extends 'base.html' %}

{% block title %}
{{ SITENAME }} - KeyForge 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 KeyForge - Overview">
<meta property="og:description" content="Overview of {{ KEYFORGE_DECK_COUNT }} KeyForge decks">
<meta property="og:image" content="{{ SITEURL }}/theme/img/DeckLock_kf_bg.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 KeyForge - Overview">
<meta property="twitter:description" content="Overview of {{ KEYFORGE_DECK_COUNT }} KeyForge decks">
<meta property="twitter:image" content="{{ SITEURL }}/theme/img/DeckLock_kf_bg.png">
{% endblock %}

{% block extra_css %}
<link href="{{ SITEURL }}/theme/css/keyforge.css" rel="stylesheet" />
<link href="{{ SITEURL }}/theme/css/keyforge-rarity.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">KeyForge</li>
    </ol>

    <h1>KeyForge 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">Houses</th>
            <th scope="col" data-sort="int">SAS</th>
            <th scope="col" data-sort="int">EARC</th>
            <th scope="col" data-sort="float">%</th>
            <th scope="col" class="text-center"><span class="trophy medium cup"></span></th>
        </tr>
        </thead>
        <tbody>
         {% for k,v in keyforge_data.items() %}
            <tr>
                <td data-label="Deck"><a href="{{ SITEURL }}/{{v.path}}">{{ v.vault_data.data.name }}</a></td>
                <td data-label="Houses">
                    {% for house in v.vault_data._linked.houses %}
                        {% if USE_EXTERNAL_LINKS %}
                            <img src="{{ house.image }}" alt="{{ house.name }}" class="keyforge-house-logo"/>
                        {% else %}
                            <img src="{{ SITEURL }}/{{ house.image_path }}" alt="{{ house.name }}" class="keyforge-house-logo"/>
                        {% endif %}
                    {% endfor %}
                </td>
                {% if v.dok_data.deck %}
                    <td data-label="SAS">{{ v.dok_data.deck.sasRating }}</td>
                    <td data-label="AERC">{{ (v.dok_data.deck.aercScore)|int }}</td>
                    <td data-label="%">{{ "%.1f"|format(v.dok_data.deck.sasPercentile) }}</td>
                {% else %}
                    <td data-label="SAS" data-sort-value="0">-</td>
                    <td data-label="AERC" data-sort-value="0">-</td>
                    <td data-label="%" data-sort-value="0">-</td>
                {% endif %}
                <td data-label="Adventures" class="text-center">
                    {% if v.adventure_data.defeated_keyraken -%}<span class="trophy medium keyraken"></span>{%- endif %}
                    {% if v.adventure_data.defeated_conspiracy -%}<span class="trophy medium conspiracy"></span>{%- endif %}
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
{% endblock %}

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