<form class="npc-data-editor-shell faction-data-editor-shell faction-organization-editor-shell" style="--faction-color: {{faction.color}};">
    {{#if missing}}
    <div class="npc-dossier-missing">This organization could not be found.</div>
    {{else}}
    <header class="npc-data-editor-header faction-organization-editor-identity">
        <div class="npc-data-editor-portrait">
            {{#if faction.imageSrc}}<img src="{{faction.imageSrc}}" alt="{{faction.name}}">{{else}}<i class="fas fa-shield-halved"></i>{{/if}}
        </div>
        <div class="npc-person-editor-identity-copy">
            <span>Editing Organization</span>
            <h3>{{faction.name}}</h3>
            <p>{{faction.subtitle}}</p>
        </div>
        <div class="faction-data-color-field faction-organization-editor-color" style="--faction-color: {{faction.color}}">
            <div class="faction-data-color-copy">
                <strong>Map Color</strong>
                <span>Marks locations politically owned by this organization.</span>
            </div>
            <label class="faction-data-color-control">
                <input type="color" name="display.color" value="{{faction.color}}" data-faction-color-input>
                <span class="faction-data-color-swatch" aria-hidden="true"></span>
                <span data-faction-color-value>{{faction.color}}</span>
            </label>
        </div>
        <div class="npc-data-editor-actions">
            <button type="button" class="npc-data-editor-icon-action npc-person-editor-identity-action" data-action="renameFaction"><i class="fas fa-pen"></i><span>Rename Organization</span></button>
            <button type="button" class="npc-data-editor-icon-action npc-person-editor-identity-action" data-action="changeEmblem"><i class="fas fa-shield"></i><span>Change Emblem</span></button>
        </div>
    </header>

    <div class="npc-person-editor-workspace faction-organization-editor-workspace">
        <section class="npc-person-editor-column faction-organization-editor-column is-profile">
            <header class="npc-person-editor-column-header">
                <div>
                    <h4><i class="fas fa-address-card"></i> Profile & Direction</h4>
                    <p>Identity and prompts for the organization's current course.</p>
                </div>
            </header>
            <div class="npc-person-editor-column-body npc-data-editor-fields">
                <h5 class="npc-person-editor-section-title">Identity & Type</h5>
                {{#with typeField}}
                <div class="npc-data-editor-row">
                    <button type="button" class="npc-data-field-visibility {{#if hidden}}is-hidden-field{{/if}}" data-action="toggleDefaultField" title="{{#if hidden}}Show field{{else}}Hide field{{/if}}" aria-label="{{#if hidden}}Show field{{else}}Hide field{{/if}}">
                        <input type="checkbox" name="defaultFieldHidden" value="{{key}}" {{#if hidden}}checked{{/if}} hidden>
                        <i class="fas {{#if hidden}}fa-eye-slash{{else}}fa-eye{{/if}}"></i>
                    </button>
                    <label for="faction-data-{{key}}">{{label}}</label>
                    <div class="npc-data-combo" data-combo="{{key}}">
                        <input id="faction-data-{{key}}" type="text" name="profile.{{key}}" value="{{value}}" autocomplete="off">
                        <button type="button" class="npc-data-combo-toggle" data-action="toggleCombo" data-combo-key="{{key}}" aria-label="Show {{label}} options"><i class="fas fa-chevron-down"></i></button>
                        <div class="npc-data-combo-menu" data-combo-menu="{{key}}">
                            {{#each options}}
                            <button type="button" data-action="selectComboOption" data-combo-key="{{../key}}" data-combo-value="{{value}}" {{#if selected}}class="selected"{{/if}}>{{label}}</button>
                            {{/each}}
                        </div>
                    </div>
                </div>
                {{/with}}

                {{#each extensionFields}}
                <div class="npc-data-editor-row faction-editor-extension-row">
                    <span class="npc-data-field-spacer" aria-hidden="true"></span>
                    <label for="faction-extension-{{id}}">{{label}}</label>
                    <div class="faction-editor-extension-control">
                        <select id="faction-extension-{{id}}" data-faction-extension-field="{{id}}" title="{{description}}">
                            {{#each options}}<option value="{{value}}" data-description="{{description}}" {{#if selected}}selected{{/if}}>{{label}}</option>{{/each}}
                        </select>
                        {{#if selectedDescription}}<small data-faction-extension-description>{{selectedDescription}}</small>{{/if}}
                    </div>
                </div>
                {{/each}}

                <h5 class="npc-person-editor-section-title is-thread">Current Direction</h5>
                <p class="npc-person-editor-section-help">Optional prompts for what this organization values and how it may act now.</p>
                {{#each fields}}
                <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="faction-data-{{this.key}}">{{this.label}}</label>
                    <div class="npc-data-combo" data-combo="{{this.key}}">
                        <input id="faction-data-{{this.key}}" type="text" name="profile.{{this.key}}" 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 faction-organization-editor-column is-ideology">
            <header class="npc-person-editor-column-header">
                <div>
                    <h4><i class="fas fa-compass"></i> Ideology</h4>
                    <p>The enduring beliefs that shape this organization.</p>
                </div>
            </header>
            <div class="npc-person-editor-column-body">
                <section class="faction-ideology-editor faction-organization-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 faction-organization-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 outside the standard organization 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>
