kopparhavet/templates/parts/actor/ht-main.html

<div class="bio-tab border scroll-y" style="height: 100%; border-top: none;">
    <div class="grid-container" style="height: fit-content; border-top: none; grid-template-rows: 1fr auto auto; grid-template-columns: 1fr 1fr;">
        <div class="border grid-container" style="height: 100%; grid-row: 1/4; grid-template-rows: auto 1fr; height: fit-content; min-height: 200px;">
            <h2 style="margin-bottom: 0;">{{localize data.data.bio.appearance.label}}</h2>
            <div class="description">
                {{editor content=data.data.bio.appearance.value target="data.bio.appearance.value" button=true owner=owner editable=editable}}
            </div>
        </div>
        <div class="border grid-container" style="grid-column-gap: 5px; grid-template-columns: 1fr auto; max-height: 163px;">
            <h2 style="margin-bottom: 0; grid-column: 1/3;">{{localize "HT.FEATURES.TITLE"}}</h2>

            <input name="data.feature.one.label" class="roll-feature" type="text" value="{{data.data.feature.one.label}}" />
            <a style="margin: auto;" class="feature {{#if data.data.feature.one.value}}active{{/if}}" data-feature="one">
                <i class="far {{#if data.data.feature.one.value}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
            </a>

            <input name="data.feature.two.label" class="roll-feature" type="text" value="{{data.data.feature.two.label}}" />
            <a style="margin: auto;" class="feature {{#if data.data.feature.two.value}}active{{/if}}" data-feature="two">
                <i class="far {{#if data.data.feature.two.value}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
            </a>

            <input name="data.feature.three.label" class="roll-feature" type="text" value="{{data.data.feature.three.label}}" />
            <a style="margin: auto;" class="feature {{#if data.data.feature.three.value}}active{{/if}}" data-feature="three">
                <i class="far {{#if data.data.feature.three.value}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
            </a>

            <input name="data.feature.four.label" class="roll-feature" type="text" value="{{data.data.feature.four.label}}" />
            <a style="margin: auto;" class="feature {{#if data.data.feature.four.value}}active{{/if}}" data-feature="four">
                <i class="far {{#if data.data.feature.four.value}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
            </a>
        </div>
        <div class="border">
            <header class="relation-header" >
                <h2 class="grid-container" style="margin-bottom: 0; grid-template-columns: 2fr 1fr auto;">
                    {{localize "HT.RELATIONSHIP.TITLE"}}
                    <div></div>
                    <a class="relation-control" data-action="create"><i class="fas fa-plus"></i></a>
                </h2>
            </header>
            <ol class="relation-list" style="padding: 0;">
                {{#each data.data.relationships as |attr key|}}
                <li class="relation grid-container" style="grid-template-columns: 2fr auto auto;" data-attribute="{{key}}">
                    <input class="relation-key" type="text" name="data.relationships.{{key}}.key" value="{{key}}" style="display: none;" />
                    <input class="relation-value" type="text" name="data.relationships.{{key}}.value" value="{{attr.value}}" />
                    <a style="margin: auto 10px;" class="relation-click {{#if attr.check}}active{{/if}}">
                        <i class="far {{#if attr.check}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                    </a>
                    <a style="margin: auto;" class="relation-control" data-action="delete"><i class="fas fa-trash"></i></a>
                </li>
                {{/each}}
            </ol>
        </div>
        <div class="border">
            <header class="learning-header" >
                <h2 class="grid-container" style="margin-bottom: 0; grid-template-columns: 2fr 1fr auto;">
                    {{localize "LEARNING.TITLE"}}
                    <div></div>
                    <a class="learning-control" data-action="create"><i class="fas fa-plus"></i></a>
                </h2>
            </header>
            <ol class="learning-list" style="padding: 0;">
                {{#each data.data.learning as |attr key|}}
                <li class="learning grid-container" style="grid-template-columns: 2fr auto auto;" data-attribute="{{key}}">
                    <input class="learning-key" type="text" name="data.learning.{{key}}.key" value="{{key}}" style="display: none;" />
                    <input style="margin-top: auto; margin-bottom: auto;" class="learning-value" type="text" name="data.learning.{{key}}.value" value="{{attr.value}}" />
                    <div class="grid-container" style="margin: auto 10px; grid-template-rows: auto auto; grid-template-columns: auto auto auto auto;">
                        <a data-num="one" class="learning-click {{#if attr.one}}active{{/if}}">
                            <i class="far {{#if attr.one}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                        <a data-num="two" class="learning-click {{#if attr.two}}active{{/if}}">
                            <i class="far {{#if attr.two}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                        <a data-num="three" class="learning-click {{#if attr.three}}active{{/if}}">
                            <i class="far {{#if attr.three}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                        <a data-num="four" class="learning-click {{#if attr.four}}active{{/if}}">
                            <i class="far {{#if attr.four}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                        <a data-num="five" class="learning-click {{#if attr.five}}active{{/if}}">
                            <i class="far {{#if attr.five}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                        <a data-num="six" class="learning-click {{#if attr.six}}active{{/if}}">
                            <i class="far {{#if attr.six}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                        <a data-num="seven" class="learning-click {{#if attr.seven}}active{{/if}}">
                            <i class="far {{#if attr.seven}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>
                        <a data-num="eight" class="learning-click {{#if attr.eight}}active{{/if}}">
                            <i class="far {{#if attr.eight}}fa-times-circle{{else}}fa-circle{{/if}}"></i>
                        </a>

                    </div>
                    <a style="margin: auto;" class="learning-control" data-action="delete"><i class="fas fa-trash"></i></a>
                </li>
                {{/each}}
            </ol>
        </div>
    </div>
</div>