<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="index.css">

<body>
<!-- v-on:recompute-priorities=RecomputeAttributePriorities -->
<main 
    id="app_form"
    >
    <h1>CharGen</h1>
    <!--aside id="PrioritiesDiv">
        <table>
            <tr><th>Priority</th><th>Available points</th><th>Assigned to</th></tr>
            <tr is="priority-item"
                v-for="item in Priorities"
                v-bind:priority="item"
                v-bind:key="item.id"
            ></tr>
        </table>
    </aside-->
    <div id="Info">
        <h2>Info</h2>
        <div is="info-category"
	     v-for="(item, index) in form_data.info"
             v-bind:group_id="'info'"
             v-bind:category="item"
             v-bind:category_index="index"
	></div>    
    </div>

    <div id="Attributes">
        <h2>Attributes</h2>
        <div is="attribute-category"
	     v-for="(item, index) in form_data.attributes"
             v-bind:group_id="'attributes'"
             v-bind:category="item"
             v-bind:category_index="index"
	></div>    
<!--             v-bind:key="item.id"-->

    </div>

    <div id="skills">
        <h2>Skills</h2>
        <div is="skill-spell-category"
	     v-for="(item, index) in form_data.skills"
             v-bind:group_id="'skills'"
             v-bind:category="item"
             v-bind:category_index="index"
	></div>    

    </div>

    <div id="spells">
        <h2>Spells</h2>
        <div is="skill-spell-category"
	     v-for="(item, index) in form_data.spells"
             v-bind:group_id="'spells'"
             v-bind:category="item"
             v-bind:category_index="index"
	></div>    

    </div>

</main>
<!--              v-bind:attributes="Attributes"
-->
<!-- development version, includes helpful console warnings -->
<!--script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script-->
<script src="vue.min.js"></script>
<script src="app-data.js"></script>
<script src="app-js.js"></script>
</body>
</html>