<form class="npc-data-editor-shell location-data-editor-shell">
    {{#if missing}}<div class="npc-dossier-missing">This location could not be found.</div>{{else}}
    <header class="npc-data-editor-header">
        <div class="npc-data-editor-portrait">{{#if location.imageSrc}}<img src="{{location.imageSrc}}" alt="{{location.name}}">{{else}}<i class="fas fa-map-location-dot"></i>{{/if}}</div>
        <div><h3>{{location.name}}</h3><p>{{location.subtitle}}</p></div>
        <div class="npc-data-editor-actions">
            <button type="button" class="npc-data-editor-icon-action" data-action="renameLocation" title="Rename Location" aria-label="Rename Location"><i class="fas fa-pen"></i></button>
            <button type="button" class="npc-data-editor-icon-action" data-action="changeLocationIcon" title="Change Icon" aria-label="Change Icon"><i class="fas fa-map-location-dot"></i></button>
        </div>
    </header>
    <section class="npc-data-editor-fields">
        {{#each editorSections}}
        {{{html}}}
        {{/each}}
        <section class="location-data-current-thread">
            <div class="npc-data-custom-fields-header"><h5>Current Thread</h5></div>
            <p class="location-data-current-thread-help">Independent prompts describing the location's present situation.</p>
            <div class="location-data-current-thread-grid">
                {{#each currentThreadFields}}
                <label>
                    <span>{{label}}</span>
                    <input type="text" name="currentThread.{{key}}" value="{{value}}" list="location-thread-{{key}}-{{../location.id}}" placeholder="Optional" autocomplete="off">
                    <small>{{help}}</small>
                    <datalist id="location-thread-{{key}}-{{../location.id}}">{{#each options}}<option value="{{this}}"></option>{{/each}}</datalist>
                </label>
                {{/each}}
            </div>
        </section>
        <section class="npc-data-custom-fields">
            <div class="npc-data-custom-fields-header"><h5>Profile Fields</h5><button type="button" class="npc-data-add-field" data-action="addProfileField"><i class="fas fa-plus"></i><span>Add Field</span></button></div>
            <div class="npc-data-custom-field-list" data-profile-fields>
                {{#each profileFields}}
                <div class="npc-data-custom-field-row" data-profile-field-row="{{id}}">
                    <input type="hidden" name="profileField.id" value="{{id}}">
                    <input type="hidden" name="profileField.type" value="{{type}}">
                    <input type="text" name="profileField.label" value="{{label}}" placeholder="Field" autocomplete="off">
                    {{#if multiline}}<textarea name="profileField.value" rows="3" placeholder="Value">{{value}}</textarea>{{else}}<input type="text" name="profileField.value" value="{{value}}" placeholder="Value" autocomplete="off">{{/if}}
                    <button type="button" class="npc-data-custom-field-move" data-action="moveProfileFieldUp" 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="moveProfileFieldDown" 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="deleteProfileField" title="Delete field" aria-label="Delete field"><i class="fas fa-trash"></i></button>
                </div>
                {{/each}}
            </div>
        </section>
    </section>
    <footer class="npc-data-editor-footer"><button type="button" class="npc-dossier-secondary" data-action="closeEditor">Cancel</button><button type="button" class="npc-dossier-primary" data-action="save">Apply Changes</button></footer>
    {{/if}}
</form>
