<div class="skills-tab border scroll-y grid-container" style="grid-template-columns: 1fr 1fr; border-top: none;">
    <div class="skills border">
        <h1 style="margin-bottom: 0; grid-column: 1/4;">{{localize "SKILL.BASE"}}</h1>
        <ul class="items">
            <ul class="items-list">
                {{#each actor.skills as |skill key|}}
                {{#if skill.hasBase}}
                <li class="item-skill flexrow" data-item-id="{{skill._id}}">
                    <div class="item-name roll-skill rollable" style="flex-grow: 8;">{{skill.name}}</div>
                    <div class="item-value" style="flex: none;"><input class="skill-value" type="number" value="{{skill.data.value}}" min="0" data-item-id="{{skill._id}}" data-dtype="Number" /></div>
                    <div style="align-self: flex-end; margin-top: auto; margin-bottom: auto;">
                        <a style="margin: auto;" class="click-skill {{#if skill.data.used}}active{{/if}}" data-item-id="{{skill._id}}">
                            <i class="far {{#if skill.data.used}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                    </div>
                </li>
                {{/if}}
                {{/each}}
            </ul>
        </ul>
    </div>
    <div class="skills border" style="grid-column: 2; grid-row: 1/5;">
        <h1 style="margin-bottom: 0; grid-column: 1/4;">{{localize "SKILL.ADVENTURE"}}</h1>
        <ul class="items">
            <ul class="items-list">
                {{#each actor.skills as |skill key|}}
                {{#if skill.hasAdventure}}
                <li class="item-skill flexrow" data-item-id="{{skill._id}}">
                    <div class="item-name roll-skill rollable" style="flex-grow: 8;">{{skill.name}}</div>
                    <div class="item-value" style="flex: none;"><input class="skill-value" type="number" value="{{skill.data.value}}" min="0" data-item-id="{{skill._id}}" data-dtype="Number" /></div>
                    <div style="align-self: flex-end; margin-top: auto; margin-bottom: auto;">
                        <a style="margin: auto;" class="click-skill {{#if skill.data.used}}active{{/if}}" data-item-id="{{skill._id}}">
                            <i class="far {{#if skill.data.used}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                    </div>
                </li>
                {{/if}}
                {{/each}}
            </ul>
        </ul>
    </div>
    <div class="skills border">
        <h1 style="margin-bottom: 0; grid-column: 1/4;">{{localize "SKILL.COMBAT"}}</h1>
        <ul class="items">
            <ul class="items-list">
                {{#each actor.skills as |skill key|}}
                {{#if skill.hasCombat}}
                <li class="item-skill flexrow" data-item-id="{{skill._id}}">
                    <div class="item-name roll-skill rollable" style="flex-grow: 8;">{{skill.name}}</div>
                    <div class="item-value" style="flex: none;"><input class="skill-value" type="number" value="{{skill.data.value}}" min="0" data-item-id="{{skill._id}}" data-dtype="Number" /></div>
                    <div style="align-self: flex-end; margin-top: auto; margin-bottom: auto;">
                        <a style="margin: auto;" class="click-skill {{#if skill.data.used}}active{{/if}}" data-item-id="{{skill._id}}">
                            <i class="far {{#if skill.data.used}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                    </div>
                </li>
                {{/if}}
                {{/each}}
            </ul>
        </ul>
    </div>
    <div class="skills border grid-container" style="grid-column-gap: 5px; grid-template-columns: 1fr;">
        <h1 style="grid-column: unset;">{{localize data.data.languages.label}}</h1>
        <input name="data.languages.value" type="text" value="{{data.data.languages.value}}" />
    </div>
</div>