{% extends "base.html" %}
{% block title %}NPC Party Generation{% endblock %}
{% block content %}
<div>
    <label for="base_level">Base level of party to generate: </label>
    <input type="number" name="base_level" id="base_level" default="1">
</div>
<div>
    <button onclick="generateParty();">Generate</button>
</div>

<br>

{% if party %}
<h3>NPC Party of Size {{ party | length }}</h3>

<div class="uk-grid-medium uk-grid-match" uk-grid>
    {% for npc in party %}
    <div class="acks-npc-card">
        <div class="uk-card uk-card-body uk-card-default">
            <h4 class="uk-card-title">{{ npc.guild }}</h4>
            <div class="uk-card-badge uk-label">Level {{ npc.level }}</div>
            <div class="uk-flex uk-flex-around uk-text-center uk-margin-bottom">
                <div>
                    <div>{{ npc.hp }}</div>
                    <div>HP</div>
                </div>
                <div>
                    <div>{{ npc.armour[2] }}</div>
                    <div>AC</div>
                </div>
            </div>
            <div class="uk-flex uk-flex-around stat-block">
                <div>
                    <div>{{ npc.str }}</div>
                    <div>Str</div>
                </div>
                <div>
                    <div>{{ npc.int }}</div>
                    <div>Int</div>
                </div>
                <div>
                    <div>{{ npc.wis }}</div>
                    <div>Wis</div>
                </div>
                <div>
                    <div>{{ npc.dex }}</div>
                    <div>Dex</div>
                </div>
                <div>
                    <div>{{ npc.con }}</div>
                    <div>Con</div>
                </div>
                <div>
                    <div>{{ npc.chr }}</div>
                    <div>Chr</div>
                </div>
            </div>
            <table class="uk-table uk-table-hover uk-table-small item-table">
                <thead>
                    <tr> <th>Name</th><th>Worth</th><th>Thr</th><th>Dmg</th> </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>{{ npc.melee[0] }}</td>
                        <td>{{ npc.melee[1] }}gp</td>
                        <td>0</td>
                        <td>{{ npc.melee[2] }}</td>
                    </tr>
                    {% if npc.ranged %}
                    <tr>
                        <td>{{ npc.ranged[0] }}</td>
                        <td>{{ npc.ranged[1] }}gp</td>
                        <td>0</td>
                        <td>{{ npc.ranged[2] }}</td>
                    </tr>
                    {% endif %}
                    <tr>
                        <td>{{ npc.armour[0] }}</td>
                        <td>{{ npc.armour[1] }}gp</td>
                        <td></td>
                        <td></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    {% endfor %}
</div>
{% endif %}

<br>

<style>
table.item-table, table.item-table th {
    font-size: 12px;
}
div.stat-block > div {
    text-align: center;
    padding: 3px;
    width: 26px;
}
div.stat-block > div > div:first-child {
    font-weight: bold;
    color: green;
}
div.stat-block > div > div:last-child {
    font-weight: bold;
    font-size: 12px;
    color: #888;
}
div.acks-npc-card {
    width: 370px;
}
</style>
<script type="text/javascript">
    function generateParty() {
        let bl = document.querySelector('#base_level').value;
        window.location = "/npc/party/" + bl.toString();
    }
</script>
{% endblock %}