{% extends 'base.html' %}

{% block title %}
{{ SITENAME }} - {{ keyforge_data.vault_data.data.name }}
{% 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 - {{ keyforge_data.vault_data.data.name }}">
<meta property="og:description" content="Overview of cards in {{ keyforge_data.vault_data.data.name }}">
<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 - {{ keyforge_data.vault_data.data.name }}">
<meta property="twitter:description" content="Overview of cards in {{ keyforge_data.vault_data.data.name }}">
<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"><a href="{{ SITEURL }}/keyforge.html">KeyForge</a></li>
      <li class="breadcrumb-item active">{{ keyforge_data.vault_data.data.name }}</li>
    </ol>

    <h1>{{ keyforge_data.vault_data.data.name }}</h1>
    <div class="row top5">
        <div class="col text-right"><span>View deck on <a href="https://decksofkeyforge.com/decks/{{ keyforge_data.user_data.deck_id }}">Decks of KeyForge</a> or <a href="https://www.keyforgegame.com/deck-details/{{ keyforge_data.user_data.deck_id }}">The Master Vault</a></span></div>
    </div>
    {% if keyforge_data.dok_data.deck %}
    <div class="card top15">
      <div class="card-body">
          <div class="row">
              <div class="col text-center"><h3>{{ keyforge_data.dok_data.deck.sasRating }}<br /><small class="text-muted">SAS</small></h3></div>
              <div class="col text-center"><h3>{{ keyforge_data.dok_data.deck.aercScore }}<br /><small class="text-muted">AERC</small></h3></div>
              <div class="col text-center"><h3>{{ "%.1f"|format(keyforge_data.dok_data.deck.sasPercentile) }} %<br /><small class="text-muted">Percentile</small></h3></div>
          </div>
      </div>
    </div>
    {% endif %}

    <div class="row">
    {% for house in keyforge_data.vault_data._linked.houses %}
        <div class="col-md-4 top15">
            <div class="card">
                <div class="card-header house-{{house.name|lower|replace(" ", "_")}}">
                    <h3>{{ house.name }} {% if USE_EXTERNAL_LINKS %}<img src="{{ house.image }}" alt="{{ house.name }}" class="keyforge-house-logo-xl"/>{% else %}<img src="{{ SITEURL }}/{{ house.image_path }}" alt="{{ house.name }}" class="keyforge-house-logo-xl"/>{% endif %}</h3>
                </div>
                <div class="card-body">
                <ul class="card_list">
                    {% for card in keyforge_data.vault_data._linked.cards|sort(attribute='card_title') %}
                        {% if card.house == house.name %}
                            {% for n in range(card.count)  %}
                                {% if USE_EXTERNAL_LINKS %}
                                    <li class="keyforge-card rarity-{{card.rarity|lower}}"><span class="rarity small {{card.rarity|lower}}"></span> <span {% if card.is_enhanced -%} class="is_enhanced" {%- endif %} data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<img class='popup-card-image' src='{{ card.front_image }}' />">{{ card.card_title }}</span></li>
                                {% else %}
                                    <li class="keyforge-card rarity-{{card.rarity|lower}}"><span class="rarity small {{card.rarity|lower}}"></span> <span {% if card.is_enhanced -%} class="is_enhanced" {%- endif %} data-toggle="popover" data-placement="top" data-trigger="hover" data-content="<img class='popup-card-image' src='{{ SITEURL }}/{{ card.image_path }}' />">{{ card.card_title }}</span></li>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                    {% endfor %}
                </ul>
                </div>
            </div>
        </div>
    {% endfor %}
    </div>
    <div class="row">
        <div class="col-sm-12 col-md-6 col-lg-4 top15">
            <div class="card plot">
            <canvas id="radarStats" width="400" height="400"></canvas>
            </div>
        </div>
        <div class="col-sm-12 col-md-6 col-lg-4 top15">
            <div class="card">
                <div class="card-header">
                    <h3>KeyForge Adventures</h3>
                </div>
                <div class="card-body">
                    <p>
                    {% if keyforge_data.adventure_data.defeated_keyraken %}
                    {{ keyforge_data.vault_data.data.name }} has defeated The Keyraken (difficulty: <em>{{keyforge_data.adventure_data.keyraken_difficulty}}</em>).
                    {% else %}
                        {{ keyforge_data.vault_data.data.name }} has not defeated The Keyraken.
                    {% endif %}
                    </p><p>
                    {% if keyforge_data.adventure_data.defeated_conspiracy %}
                    {{ keyforge_data.vault_data.data.name }} has defeated The Abyssal Conspiracy (difficulty: <em>{{keyforge_data.adventure_data.conspiracy_difficulty}}</em>).
                    {% else %}
                        {{ keyforge_data.vault_data.data.name }} has not defeated The Abyssal Conspiracy.
                    {% endif %}
                    </p>
                </div>
        </div>
    </div>
{% endblock %}

{% block extra_js %}
<script>
$(function () {
  $('[data-toggle="popover"]').popover({html: true})
})
</script>
<script>
var ctx = document.getElementById('radarStats').getContext('2d');
var myChart = new Chart(ctx, {
    type: 'radar',
    data: {
        labels: ["Expected Amber", "Amber Control", "Artifact Control", "Creature Control", "Effective Power", "Creature Protection", "Disruption", "Efficiency", "Recursion"],
        datasets: [{
            label: 'Deck Stats',
            data: [{{ keyforge_data.dok_stats.expectedAmber|round }},
                   {{ keyforge_data.dok_stats.amberControl|round }},
                   {{ keyforge_data.dok_stats.artifactControl|round }},
                   {{ keyforge_data.dok_stats.creatureControl|round }},
                   {{ keyforge_data.dok_stats.effectivePower|round }},
                   {{ keyforge_data.dok_stats.creatureProtection|round }},
                   {{ keyforge_data.dok_stats.disruption|round }},
                   {{ keyforge_data.dok_stats.efficiency|round }},
                   {{ keyforge_data.dok_stats.recursion|round }}],
            borderColor: 'rgba(0, 188, 140, 0.8)',
            backgroundColor: 'rgba(0, 188, 140, 0.3)'
        }]
    },
    options: {
        scales: {
            r: {
                angleLines: {
                    display: false
                },
                ticks: {
                    display: false,
                    beginAtZero: true,
                    max: 100,
                    min: 0,
                    stepSize: 20
                }
            }
        },
        plugins: {
            legend: {
                display: false,
            }
        }
    }
});
</script>
{% endblock %}