<!DOCTYPE html>
<html>
 
<head>
    <title>D&D Characters</title>
    <link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bulma@1.0.2/css/bulma.min.css"
>
</head>
 
<body>

<nav class="navbar" role="navigation" aria-label="main navigation">
    <div class="navbar-brand">
        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
  
    <div id="navbarBasicExample" class="navbar-menu">
        <div class="navbar-start">
            <a class="navbar-item" href="/">Home</a>
            <a class="navbar-item" href="party?cache=true">Generate Adventurer Party</a>
            <a class="navbar-item" href="character">Generate Single Adventurer</a>
        </div>
    </div>
</nav>

<div class="card">
    <div class="container">
    <div class="content">
        <div class="card-content">
            <div class="content">
                <h2>Welcome to the Dungeon</h2>
                <div class="block">
                <div class="columns">
                    <div class="column" >
                        <p>How many party members?</p>
                        <div class="buttons">
                            {%for i in range(2,6)%}
                                {% if count|int() == i|int() %}
                                    <a class="button is-primary" href="{{ '/party?count={}&level={}&cache={}'.format(i,level,cache) }}">{{i}}</a>
                                {% else %}
                                    <a class="button" href="{{ '/party?count={}&level={}&cache={}'.format(i,level,cache) }}">{{i}}</a>
                                {% endif %}
                            {%endfor%}
                        </div>
                    </div>
                    <div class="column" >
                        <p>What level for the party?</p>
                        <div class="buttons">
                            {%for j in range(1,6)%}
                                {% if level|int() == j|int() %}
                                    <a class="button is-primary" href="{{ '/party?count={}&level={}&cache={}'.format(count,j,cache) }}">{{j}}</a>
                                {% else %}
                                    <a class="button" href="{{ '/party?count={}&level={}&cache={}'.format(count,j,cache) }}">{{j}}</a>
                                {% endif %}
                            {%endfor%}
                        </div>
                    </div>
                    <div class="column" >
                        <p>Preserve adventurers?</p>
                        <div class="buttons">
                            {% if cache == 'true' %}
                                <a class="button is-primary">cached</a>
                                <a class="button is-danger is-outlined" href="{{ '/party?count={}&level={}&cache=false'.format(count,level) }}">not cached</a>
                            {% else %}
                                <a class="button is-primary is-outlined" href="{{ '/party?count={}&level={}&cache=true'.format(count,level) }}">are cached</a>
                                <a class="button is-danger">not cached</a>
                            {% endif %}
                        </div>
                    </div>
                </div> 
                </div>
                <div class="block has-text-centered">
                    <div class="columns">
                        {%for character in adv_party.adventurers%}
                        <div class="column" >
                            <pre>{{character.vertical_sheet() | join("\n")}}</pre>
                            <div class="block has-text-centered">
                                <a class="button is-focused" href="{{ '/character?id={}'.format(character.identifier)}}">Select this {{character.player_class.title()}}</a>
                            </div>
                        </div>
                        {%endfor%}
                    </div>
                </div>
            </div>
        <br>
        <div class="block has-text-centered">
            <button class="button is-primary is-fillwidth">Select this adventuring party!</button>
        <div>
        </div>
    </div>
    </div>
</div>

</body>
 
</html>

