worldbuilding/templates/actor-sheet.html

<form class="{{cssClass}}" autocomplete="off">

    {{!-- Sheet Header --}}
    <header class="sheet-header">
        <img class="profile-img" src="{{actor.img}}" data-edit="img" title="{{actor.name}}" height="100" width="100"/>
        <div class="header-fields">
            <h1 class="charname"><input name="name" type="text" value="{{actor.name}}" placeholder="Name"/></h1>
            <div class="resource">
                <input type="text" name="data.health.value" value="{{data.health.value}}" data-dtype="Number"/>
                <span> / </span>
                <input type="text" name="data.health.max" value="{{data.health.max}}" data-dtype="Number"/>
            </div>
            <div class="resource">
                <input type="text" name="data.power.value" value="{{data.power.value}}" data-dtype="Number"/>
                <span> / </span>
                <input type="text" name="data.power.max" value="{{data.power.max}}" data-dtype="Number"/>
            </div>
        </div>
    </header>

    {{!-- Sheet Tab Navigation --}}
    <nav class="sheet-tabs tabs" data-group="primary">
        <a class="item" data-tab="description">Description</a>
        <a class="item" data-tab="items">Items</a>
        <a class="item" data-tab="attributes">Attributes</a>
    </nav>

    {{!-- Sheet Body --}}
    <section class="sheet-body">

        {{!-- Biography Tab --}}
        <div class="tab biography" data-group="primary" data-tab="description">
            {{editor content=data.biography target="data.biography" button=true owner=owner editable=editable}}
        </div>

        {{!-- Owned Items Tab --}}
        <div class="tab items" data-group="primary" data-tab="items">
            <ol class="item-list">
            {{#each actor.items as |item id|}}
                <li class="item flexrow" data-item-id="{{item._id}}">
                    <img src="{{item.img}}" title="{{item.name}}" width="24" height="24"/>
                    <h4 class="item-name">{{item.name}}</h4>
                    {{!-- Iterate through all attributes on the item and output buttons for any that are formula. --}}
                    <div class="item-buttons">
                      {{#each item.data.attributes as |itemAttr key|}}
                        {{#if (eq itemAttr.dtype "Formula")}}
                          {{!-- Use the items.name.key format for shorthand. --}}
                          {{#if ../../shorthand}}
                            <button class="item-button rollable" data-roll="@items.{{slugify item.name}}.{{key}}" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
                          {{!-- Use the items.name.attributes.key.value format otherwise. --}}
                          {{else}}
                            <button class="item-button rollable" data-roll="@items.{{slugify item.name}}.attributes.{{key}}.value" title="{{itemAttr.value}}">{{itemAttr.label}}</button>
                          {{/if}}
                        {{/if}}
                      {{/each}}
                    </div>
                    <div class="item-controls">
                        <a class="item-control item-edit" title="Edit Item"><i class="fas fa-edit"></i></a>
                        <a class="item-control item-delete" title="Delete Item"><i class="fas fa-trash"></i></a>
                    </div>
                </li>
            {{/each}}
            </ol>
        </div>

        {{!-- Attributes Tab --}}
        <div class="tab attributes" data-group="primary" data-tab="attributes">
            <header class="attributes-header flexrow">
                <span class="attribute-key">Attribute Key</span>
                <span class="attribute-value">Value</span>
                <span class="attribute-label">Label</span>
                <span class="attribute-dtype">Data Type</span>
                <a class="attribute-control" data-action="create"><i class="fas fa-plus"></i></a>
            </header>

            <ol class="attributes-list">
            {{#each data.attributes as |attr key|}}
                <li class="attribute flexrow" data-attribute="{{key}}">
                    <input class="attribute-key" type="text" name="data.attributes.{{key}}.key" value="{{key}}"/>
                    {{!-- Handle booleans. --}}
                    {{#if attr.isCheckbox}}
                    <label class="attribute-value checkbox"><input type="checkbox" name="data.attributes.{{key}}.value" {{checked attr.value}}/></label>
                    {{else}}
                      {{!-- Handle resources. --}}
                      {{#if attr.isResource}}
                        <div class="attribute-group flexrow">
                          <span class="attribute-col flexcol">
                            <label for="data.attributes.{{key}}.min">{{localize "SIMPLE.ResourceMin"}}</label>
                            <input class="attribute-value" type="text" name="data.attributes.{{key}}.min" value="{{attr.min}}" data-dtype="{{attr.dtype}}"/>
                          </span>
                          <span class="attribute-col flexcol">
                            <label for="data.attributes.{{key}}.value">{{localize "SIMPLE.ResourceValue"}}</label>
                            <input class="attribute-value" type="text" name="data.attributes.{{key}}.value" value="{{attr.value}}" data-dtype="{{attr.dtype}}"/>
                          </span>
                          <span class="attribute-col flexcol">
                            <label for="data.attributes.{{key}}.max">{{localize "SIMPLE.ResourceMax"}}</label>
                            <input class="attribute-value" type="text" name="data.attributes.{{key}}.max" value="{{attr.max}}" data-dtype="{{attr.dtype}}"/>
                          </span>
                        </div>
                      {{!-- Handle other input types. --}}
                      {{else}}
                        <input class="attribute-value" type="text" name="data.attributes.{{key}}.value" value="{{attr.value}}" data-dtype="{{attr.dtype}}"/>
                      {{/if}}
                    {{/if}}
                    <input class="attribute-label" type="text" name="data.attributes.{{key}}.label" value="{{attr.label}}"/>
                    <select class="attribute-dtype" name="data.attributes.{{key}}.dtype">
                        {{#select attr.dtype}}
                        {{#each ../dtypes as |t|}}
                        <option value="{{t}}">{{t}}</option>
                        {{/each}}
                        {{/select}}
                    </select>
                    <a class="attribute-control" data-action="delete"><i class="fas fa-trash"></i></a>
                </li>
            {{/each}}
            </ol>
        </div>
    </section>
</form>