{% import "characters/edit_character_macros" as macros %}
{% extends "base" %}

{% block content %}
    <style type="text/css">
     body {
         font-family: Liberation Sans, Arial;
     }

     #basics .flex-container {
         display: flex;
         flex-flow: row wrap;
     }

     .basics-row {
         display: block;
     }

     .basics-entry {
         display: flex;
         border: 1px solid gray;
         margin-left: -1px;
         margin-top: -1px;
     }

     .basics-entry label {
         display: inline;
         width: 5em;
         text-align: right;
         vertical-align: text-bottom;
         padding: 8px;
         margin: 0;
     }

     .basics-entry input {
         display: inline;
         padding: 8px;
         border: none;
         background-color: lightgray;
         margin: 0;
     }

     #attributes .flex-container {
         display: flex;
         flex-flow: row wrap;
     }

     #attributes .attributes-section {
         border: 1px solid gray;
         margin-left: -1px;
         margin-top: -1px;
     }

     .attribute {
         display: flex;
     }

     .attribute label {
         width: 10em;
         display: inline;
         text-align: right;
         vertical-align: text-bottom;
         padding: 8px;
         margin: 0;
     }

     .attribute input {
         max-width: 4em;
         display: inline;
         padding: 8px;
         border: none;
         background-color: lightgray;
         margin: 0;
     }

     #skills {

     }

     #skills .flex-container {
         display: flex;
         flex-flow: row wrap;
     }

     #skills .skills-section {
         border: 1px solid gray;
         margin-top: -1px;
         margin-left: -1px;
     }

     .skill {
         display: flex;
     }

     .skill label {
         width: 10em;
         text-align: right;
         vertical-align: text-bottom;
         padding: 8px;
         margin: 0;
     }

     .skill input {
         max-width: 4em;
         padding: 8px;
         border: none;
         background-color: lightgray;
         margin: 0;
     }

     #merits, #items {
         padding: 4px;
         display: inline-flex;
         flex-direction: column;
     }

     #merit-list, #item-list {
         display: inline-flex;
         flex-direction: column;
     }

     .merit, .item {
         margin: 0;
         padding: 0;
         display: inline-flex;
         border: 1px solid gray;
         margin-top: -1px;
     }

     .merit .merit-name, .item .item-name {
         width: 10em;
         vertical-align: text-bottom;
         padding: 0;
         margin: 8px;
         border: none;
         border: 0px solid gray;
         border-bottom-width: 1px;
     }

     .merit .merit-dots {
         max-width: 4em;
         padding: 8px;
         border: none;
         background-color: lightgray;
         margin: 0;
     }

     .merit span {
         width: 3em;
         text-align: left;
         vertical-align: text-bottom;
         padding: 8px;
         margin: 0;
     }

     .merit .remove-merit, .item .remove-item {
         max-width: 4em;
         padding: 0;
         padding: 3px;
         padding-left: 6px;
         padding-right:6px;
         margin: 3px;
         background-color: lightgray;
     }
    </style>

    {# Webpack Templating for API script #}
    <%= htmlWebpackPlugin.tags.bodyTags %>

    <div>
        <div id="basics">
            <h1>
                <label for="characterName">Name</label>
                <input type="text" id="characterName" name="characterName" value="{{name}}" />
            </h1>

            <div class="links">
                <a href="/">Home</a> |
                <a href="/characters/{{username}}/{{id}}">Save Changes</a> |
                <a href="/characters/{{username}}/{{id}}/delete">Delete Character</a>
            </div>

            <h2>Basics</h2>
            <div>System: {{data_type}}</div>

            <div class="flex-container">
                <div class="basics-row">
                    <div class="basics-entry">
                        <label for="gender">Gender:</label>
                        <input type="text" id="gender" name="gender" value="{{sheet.gender}}" />
                    </div>

                    <div class="basics-entry">
                        <label for="age">Age:</label>
                        <input type="number" id="age" name="age" min="0" value="{{sheet.age}}" />
                    </div>
                </div>

                <div class="basics-row">
                    <div class="basics-entry">
                        <label for="concept">Concept:</label>
                        <input type="text" id="concept" name="concept" value="{{sheet.concept}}" />
                    </div>

                    <div class="basics-entry">
                        <label for="chronicle">Chronicle:</label>
                        <input type="text" id="chronicle" name="chronicle" value="{{sheet.chronicle}}" />
                    </div>
                </div>
            </div>
        </div>

        <div id="attributes">
            <h2>Attributes</h2>
            <div class="flex-container">
                <div class="attributes-section" id="mentalAttributes">
                    {{ macros::attribute(name="Intelligence", value=sheet.intelligence) }}
                    {{ macros::attribute(name="Wits", value=sheet.wits) }}
                    {{ macros::attribute(name="Resolve", value=sheet.resolve) }}
                </div>

                <div class="attributes-section" id="physicalAttributes">
                    {{ macros::attribute(name="Strength", value=sheet.strength) }}
                    {{ macros::attribute(name="Dexterity", value=sheet.dexterity) }}
                    {{ macros::attribute(name="Stamina", value=sheet.stamina) }}
                </div>

                <div class="attributes-section" id="socicalAttributes">
                    {{ macros::attribute(name="Presence", value=sheet.presence) }}
                    {{ macros::attribute(name="Manipulation", value=sheet.manipulation) }}
                    {{ macros::attribute(name="Composure", value=sheet.composure) }}
                </div>
            </div>
        </div>

        <div id="skills">
            <h2>Skills</h2>

            <div class="flex-container">
                <div class="skills-section" id="mentalSkills">
                    {% for skill_name, skill in sheet.mentalSkills %}
                        {{ macros::skill(name=skill_name, value=skill.dots) }}
                    {% endfor %}
                </div>

                <div class="skills-section" id="physicalSkills">
                    {% for skill_name, skill in sheet.physicalSkills %}
                        {{ macros::skill(name=skill_name, value=skill.dots) }}
                    {% endfor %}
                </div>

                <div class="skills-section" id="socialSkills">
                    {% for skill_name, skill in sheet.socialSkills %}
                        {{ macros::skill(name=skill_name, value=skill.dots) }}
                    {% endfor %}
                </div>
            </div>
        </div>

        <div id="merits">
            <h2>Merits</h2>
            <div id="merit-list">
                {% for merit in sheet.merits %}
                    {{ macros::merit(name=merit.name, value=merit.dots) }}
                {% endfor %}
            </div>

            <div id="merit-controls">
                <button data-event-type="add-merit">Add Merit</button>
            </div>
        </div>

        <div id="items">
            <h2>Inventory</h2>

            <div id="item-list">
                {% for item in sheet.items %}
                    {{ macros::item(name=item.name) }}
                {% endfor %}
            </div>
            <div id="item-controls">
                <button data-event-type="add-item">Add Item</button>
            </div>
        </div>
{% endblock content %}