<form class="npc-data-editor-shell npc-person-editor-shell">
    {{#if missing}}
    <div class="npc-dossier-missing">This person could not be found.</div>
    {{else}}
    <header class="npc-data-editor-header npc-person-editor-identity">
        <div class="npc-data-editor-portrait">
            {{#if npc.imageSrc}}<img src="{{npc.imageSrc}}" alt="{{npc.name}}">{{else}}<i class="fas fa-user"></i>{{/if}}
        </div>
        <div class="npc-person-editor-identity-copy">
            <span>Editing Person</span>
            <h3>{{npc.name}}</h3>
            <p>{{npc.subtitle}}</p>
        </div>
        <section class="npc-person-editor-header-personality">
            <header>
                <h4><i class="fas fa-masks-theater"></i> Personality</h4>
                <button type="button" class="npc-data-trait-edit-button" data-action="editTraits">Edit Traits</button>
            </header>
            {{#if hasTraits}}
            <div class="npc-trait-row npc-data-trait-row">
                {{#each traits}}
                <span class="npc-trait-chip {{#if missing}}missing{{/if}}" title="{{label}}">
                    {{#if iconSrc}}<img src="{{iconSrc}}" alt="{{label}}">{{else}}<i class="fas fa-user"></i>{{/if}}
                    <span>{{label}}</span>
                </span>
                {{/each}}
            </div>
            {{else}}
            <div class="npc-dossier-empty compact">No personality traits selected.</div>
            {{/if}}
        </section>
        <div class="npc-data-editor-actions">
            <button type="button" class="npc-data-editor-icon-action npc-person-editor-identity-action" data-action="renameNpc"><i class="fas fa-pen"></i><span>Rename Person</span></button>
            <button type="button" class="npc-data-editor-icon-action npc-person-editor-identity-action" data-action="changePortrait"><i class="fas fa-user-pen"></i><span>Change Portrait</span></button>
        </div>
    </header>

    <div class="npc-person-editor-workspace">
        <section class="npc-person-editor-column is-profile">
            <header class="npc-person-editor-column-header">
                <div>
                    <h4><i class="fas fa-address-card"></i> Profile & Present</h4>
                    <p>Identity, role, and the character's current circumstances.</p>
                </div>
            </header>
            <div class="npc-person-editor-column-body npc-data-editor-fields">
                <h5 class="npc-person-editor-section-title">Identity & Role</h5>
                <div class="npc-data-editor-row">
                    <button type="button" class="npc-data-field-visibility {{#if role.hidden}}is-hidden-field{{/if}}" data-action="toggleDefaultField" title="{{#if role.hidden}}Show field{{else}}Hide field{{/if}}" aria-label="{{#if role.hidden}}Show field{{else}}Hide field{{/if}}">
                        <input type="checkbox" name="defaultFieldHidden" value="role" {{#if role.hidden}}checked{{/if}} hidden>
                        <i class="fas {{#if role.hidden}}fa-eye-slash{{else}}fa-eye{{/if}}"></i>
                    </button>
                    <label for="npc-data-role">Role</label>
                    <div class="npc-data-combo" data-combo="role">
                        <input id="npc-data-role" type="text" name="role.roleLabel" value="{{role.value}}" autocomplete="off">
                        <input type="hidden" name="role.roleId" value="">
                        <button type="button" class="npc-data-combo-toggle" data-action="toggleCombo" data-combo-key="role" aria-label="Show Role options"><i class="fas fa-chevron-down"></i></button>
                        <div class="npc-data-combo-menu" data-combo-menu="role">
                            {{#each role.options}}
                            <button type="button" data-action="selectComboOption" data-combo-key="role" data-combo-id="{{this.id}}" data-combo-value="{{this.value}}" {{#if this.selected}}class="selected"{{/if}}>{{this.label}}</button>
                            {{/each}}
                        </div>
                    </div>
                </div>

                {{#each profileFields}}
                <div class="npc-data-editor-row">
                    <button type="button" class="npc-data-field-visibility {{#if this.hidden}}is-hidden-field{{/if}}" data-action="toggleDefaultField" title="{{#if this.hidden}}Show field{{else}}Hide field{{/if}}" aria-label="{{#if this.hidden}}Show field{{else}}Hide field{{/if}}">
                        <input type="checkbox" name="defaultFieldHidden" value="{{this.key}}" {{#if this.hidden}}checked{{/if}} hidden>
                        <i class="fas {{#if this.hidden}}fa-eye-slash{{else}}fa-eye{{/if}}"></i>
                    </button>
                    <label for="npc-data-{{this.key}}">{{this.label}}</label>
                    <div class="npc-data-combo" data-combo="{{this.key}}">
                        <input id="npc-data-{{this.key}}" type="text" name="{{this.path}}" value="{{this.value}}" autocomplete="off">
                        <button type="button" class="npc-data-combo-toggle" data-action="toggleCombo" data-combo-key="{{this.key}}" aria-label="Show {{this.label}} options"><i class="fas fa-chevron-down"></i></button>
                        <div class="npc-data-combo-menu" data-combo-menu="{{this.key}}">
                            {{#each this.options}}
                            <button type="button" data-action="selectComboOption" data-combo-key="{{../key}}" data-combo-value="{{this.value}}" {{#if this.selected}}class="selected"{{/if}}>{{this.label}}</button>
                            {{/each}}
                        </div>
                    </div>
                </div>
                {{/each}}

                <h5 class="npc-person-editor-section-title is-thread">Current Thread</h5>
                <p class="npc-person-editor-section-help">What this person wants and what surrounds them right now.</p>
                {{#each currentThreadFields}}
                <div class="npc-data-editor-row">
                    <button type="button" class="npc-data-field-visibility {{#if this.hidden}}is-hidden-field{{/if}}" data-action="toggleDefaultField" title="{{#if this.hidden}}Show field{{else}}Hide field{{/if}}" aria-label="{{#if this.hidden}}Show field{{else}}Hide field{{/if}}">
                        <input type="checkbox" name="defaultFieldHidden" value="{{this.key}}" {{#if this.hidden}}checked{{/if}} hidden>
                        <i class="fas {{#if this.hidden}}fa-eye-slash{{else}}fa-eye{{/if}}"></i>
                    </button>
                    <label for="npc-data-{{this.key}}">{{this.label}}</label>
                    <div class="npc-data-combo" data-combo="{{this.key}}">
                        <input id="npc-data-{{this.key}}" type="text" name="{{this.path}}" value="{{this.value}}" autocomplete="off">
                        <button type="button" class="npc-data-combo-toggle" data-action="toggleCombo" data-combo-key="{{this.key}}" aria-label="Show {{this.label}} options"><i class="fas fa-chevron-down"></i></button>
                        <div class="npc-data-combo-menu" data-combo-menu="{{this.key}}">
                            {{#each this.options}}
                            <button type="button" data-action="selectComboOption" data-combo-key="{{../key}}" data-combo-value="{{this.value}}" {{#if this.selected}}class="selected"{{/if}}>{{this.label}}</button>
                            {{/each}}
                        </div>
                    </div>
                </div>
                {{/each}}
            </div>
        </section>

        <section class="npc-person-editor-column is-character">
            <header class="npc-person-editor-column-header">
                <div>
                    <h4><i class="fas fa-compass"></i> Beliefs</h4>
                    <p>The enduring principles that shape this person.</p>
                </div>
            </header>
            <div class="npc-person-editor-column-body">
                <section class="faction-ideology-editor npc-person-editor-ideology">
                    <header>
                        <div>
                            <h5>Beliefs</h5>
                            <p>Choose one tenet from each belief topic.</p>
                        </div>
                        <button type="button" class="npc-data-add-field" data-action="addIdeologyTopic" {{#unless ideology.canAdd}}disabled{{/unless}}><i class="fas fa-plus"></i><span>Add Topic</span></button>
                    </header>
                    <div class="faction-ideology-editor-list" data-ideology-rows>
                        {{#each ideology.rows}}
                        <div class="faction-ideology-editor-row" data-ideology-row>
                            <label>
                                <span>Topic</span>
                                <select data-ideology-topic-select>
                                    {{#each topics}}<option value="{{id}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/each}}
                                </select>
                                <small data-ideology-question>{{topicQuestion}}</small>
                            </label>
                            <label>
                                <span>Tenet</span>
                                <select data-ideology-tenet-select>
                                    {{#each tenets}}<option value="{{id}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/each}}
                                </select>
                                <small data-ideology-description>{{tenetDescription}}</small>
                            </label>
                            <button type="button" class="faction-ideology-editor-delete" data-action="deleteIdeologyTopic" title="Remove ideology topic" aria-label="Remove ideology topic"><i class="fas fa-trash"></i></button>
                        </div>
                        {{/each}}
                    </div>
                    <p class="faction-ideology-editor-empty" data-ideology-empty {{#if ideology.hasRows}}hidden{{/if}}>No ideology topics selected.</p>
                </section>
            </div>
        </section>

        <section class="npc-person-editor-column is-custom">
            <header class="npc-person-editor-column-header">
                <div>
                    <h4><i class="fas fa-list-check"></i> Custom Fields</h4>
                    <p>Campaign-specific details that do not belong to the standard profile.</p>
                </div>
                <button type="button" class="npc-data-add-field" data-action="addCustomField"><i class="fas fa-plus"></i><span>Add Field</span></button>
            </header>
            <div class="npc-person-editor-column-body npc-data-custom-fields">
                <div class="npc-data-custom-field-list" data-custom-fields>
                    {{#each customFields}}
                    <div class="npc-data-custom-field-row" data-custom-field-row="{{id}}">
                        <input type="hidden" name="customField.id" value="{{id}}">
                        <input type="text" name="customField.label" value="{{label}}" placeholder="Field" autocomplete="off">
                        <input type="text" name="customField.value" value="{{value}}" placeholder="Value" autocomplete="off">
                        <button type="button" class="npc-data-custom-field-move" data-action="moveCustomFieldUp" title="Move field up" aria-label="Move field up"><i class="fas fa-arrow-up"></i></button>
                        <button type="button" class="npc-data-custom-field-move" data-action="moveCustomFieldDown" title="Move field down" aria-label="Move field down"><i class="fas fa-arrow-down"></i></button>
                        <button type="button" class="npc-data-custom-field-delete" data-action="deleteCustomField" title="Delete field" aria-label="Delete field"><i class="fas fa-trash"></i></button>
                    </div>
                    {{/each}}
                </div>
            </div>
        </section>
    </div>

    <footer class="npc-data-editor-footer">
        <button type="button" class="npc-dossier-secondary" data-action="closeEditor"><span>Cancel</span></button>
        <button type="button" class="npc-dossier-primary" data-action="save"><span>Apply Changes</span></button>
    </footer>
    {{/if}}
</form>
