{% extends "base.html" %}
{% set active_page = "treasure" %}

{% set treasure_letters = [
    ("A", "Incidental 275gp"),
    ("B", "Hoarder 500gp"),
    ("C", "Incidental 700gp"),
    ("D", "Hoarder 1,000gp"),
    ("E", "Raider 1,250gp"),
    ("F", "Incidental 1,500gp"),
    ("G", "Raider 2,000gp"),
    ("H", "Hoarder 2,500gp"),
    ("I", "Incidental 3,250gp"),
    ("J", "Raider 4,000gp"),
    ("K", "Incidental 5,000gp"),
    ("L", "Raider 6,000gp"),
    ("M", "Incidental 8,000gp"),
    ("N", "Hoarder 9,000gp"),
    ("O", "Raider 12,000gp"),
    ("P", "Incidental 17,000gp"),
    ("Q", "Hoarder 22,000gp"),
    ("R", "Hoarder 45,000gp"),
] %}

{% block title %}ACKS Treasure Generator{% endblock %}
{% block content %}
<div class="uk-flex uk-flex-center uk-margin-bottom uk-margin-top">
    <h1 class="uk-text-center"><strong>Adventurer Conqueror King</strong>Treasure Generator</h1>
</div>
<div id="frame-container">
    <iframe id="treasure-frame" src="http://autarch.co/treasure"/>
</div>
<!--
<div class="uk-flex uk-flex-bottom uk-flex-center uk-margin-large-bottom">
    <div>
        <label for="treasure-type" class="uk-form-label">Select Treasure Type</label>
        <select id="treasure-type" class="uk-select">
            <option value="">Please select one</option>
            {% for v, l in treasure_letters %}
            <option value="{{ v }}" {% if treasure_type == v %} selected="true" {% endif %}>{{ v }} ({{ l }})</option>
            {% endfor %}
        </select>
    </div>
    <div class="uk-margin-left">
        <button class="uk-button uk-button-primary" onclick="generateTreasure();">Generate</button>
    </div>
</div>
{% if generated_treasure %}
<div class="uk-flex uk-flex-bottom uk-flex-center uk-margin-large-bottom">
	<div id="treasure-content">
        {{ generated_treasure|safe }}
	</div>
</div>
{% endif %}
-->
{% endblock %}

{% block head %}
<style>
#frame-container {
    display: flex;
    width: 100%;
    height: 85vh;
    flex-direction: column:
}
#treasure-frame {
    flex-grow: 1;
    border: none;
    margin: 0;
    padding: 0;
}
h1 strong {
    display: block;
    font-size: 50%;
    opacity: 0.65;
}
</style>

<script>
	function generateTreasure() {
		var treasure_type = document.querySelector("select#treasure-type").value;
        window.location = "/treasure/" + treasure_type.toString();
    }
</script>
{% endblock %}