{% extends "layout.html" %} {{super()}} {% block body %}
<div id="app" class="container">
    <div class="grid">
        <div class="cell -6of12">
            <div class="cell -3of12">
                <form class="form" action="/submit" method="POST">
                    <fieldset class="form-group">
                        <label for="username">NAME:</label>
                        <input type="text" id="name" class="form-control">
                        <div class="help-block">The Courier</div>
                    </fieldset>
                    <fieldset class="form-group">
                        <label for="background">BACKGROUND:</label>
                        <select v-model="background" name="background" id="background" class="form-control" @change="reset_trait">
                            <option v-bind:value="bg" v-for="bg in backgrounds">[[bg.name]]</option>
                        </select>
                    </fieldset>
                    <fieldset class="form-group">
                        <label for="trait">TRAIT:</label>
                        <select v-model="trait" name="trait" id="trait" class="form-control">
                            <option v-bind:value="tr" v-for="tr in background.traits">[[tr.name]]</option>
                        </select>
                    </fieldset>
                    <fieldset class="form-group">
                        <label for="perk">PERK:</label>
                        <select v-model="perk" name="perk" id="perk" class="form-control">
                            <option v-bind:value="pk" v-for="pk in perks">[[pk.name]]</option>
                        </select>
                    </fieldset>
                </form>
            </div>
            <div class="cell -1of12">
                <div class="card">
                    <header class="card-header">You're SPECIAL</header>
                    <div class="card-content">
                        <div class="inner">
                            <button class="btn btn-info" @click="reset_stats">REROLL</button>
                            <ul>
                                <li v-for="stat in stats">
                                    [[stat.stat]]: [[stat.value]]
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cell -1of12">
              <div class="card">
                <header class="card-header">[[background.inherent.name]]</header>
                  <div class="card-content">
                    <div class="inner"><span>[[background.inherent.text]]</span></div>
                  </div>
              </div>
            </div>
            <div class="cell -1of12">
              <div class="card">
                <header class="card-header">[[background.limitation.name]]</header>
                  <div class="card-content">
                    <div class="inner"><span>[[background.limitation.text]]</span></div>
                  </div>
              </div>
            </div>
        </div>
        <div class="cell -6of12">
            <div class="card">
                <header class="card-header">[[background.name]]</header>
                <div class="card-content">
                    <div class="inner">[[background.description]]</div>
                </div>
            </div>
            <div class="card">
                <header class="card-header">[[trait.name]]</header>
                <div class="card-content">
                    <div class="inner">[[trait.text]]</div>
                </div>
            </div>
            <div class="card">
                <header class="card-header">[[perk.name]]</header>
                <div class="card-content">
                    <div class="inner">[[perk.text]]</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}