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

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

     #attributes {
         padding: 4px;
         border-collapse: collapse;
     }

     #attributes .attributes-section {
         border: 1px solid gray;
         border-collapse: collapse;
         display: table-cell;
     }

     .attribute {
         margin: 0;
         padding: 0;
         display: flex;
     }

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

     .attribute div.value {
         min-width: 1.5em;
         max-width: 4em;
         text-align: center;
         display: inline-block;
         float: left;
         padding: 8px;
         border: none;
         background-color: lightgray;
         margin: 0;
     }

     #skills {
         padding: 4px;
         border-collapse: collapse;
     }

     #skills .skills-section {
         border: 1px solid gray;
         border-collapse: collapse;
         display: table-cell;
     }

     .skill {
         margin: 0;
         padding: 0;
         display: flex;
     }

     .skill label {
         display: inline-block;
         float: left;
         clear: left;
         width: 10em;
         text-align: right;
         vertical-align: text-bottom;
         padding: 8px;
         margin: 0;
     }

     .skill div.value {
         min-width: 1.5em;
         max-width: 4em;
         display: inline-block;
         text-align: center;
         float: left;
         padding: 8px;
         border: none;
         background-color: lightgray;
         margin: 0;
     }
    </style>

    <h1>Core Sheet</h1>
    <div>
        <h1>Character {{name}}</h1>
        <h3>User: {{username}}</h3>
        <p>System: {{data_type}}</h3>
    </div>

    <div>
        <h1>Core Sheet</h1>
        <div>
            <h1>Name: <input type="text" value="{{name}}" /></h1>
            <p>System: {{data_type}}</p>
            <div id="attributes">
                <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 id="skills">
                <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>
            <a href="/characters/{{username}}/{{id}}/edit">Edit Character</a>
        </div>
{% endblock content %}