<form autocomplete="off">
    <header class="sheet-header"
        style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.1); padding-bottom: 10px;">
        <img src="{{actorImg}}" data-edit="img" title="{{actorName}}" height="64" width="64"
            style="object-fit: cover; border: 1px solid #444; border-radius: 4px;" />
        <div style="flex: 1;">
            <h1 style="border: none; margin: 0; padding: 0 0 5px 0; line-height: 1;"><input type="text"
                    value="{{actorName}}" disabled placeholder="Actor Name"
                    style="background: transparent; border: none; font-weight: bold; font-size: 1.2em; color: #fff; width: 100%; padding: 0;" />
            </h1>

            <!-- Voice Selection: PCs always show; monsters show when opted in -->
            {{#if showVoice}}
            <div class="voice-config"
                style="display: flex; align-items: center; gap: 10px; font-size: 0.9em; background: rgba(0,0,0,0.3); padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.1);">
                <label style="white-space: nowrap; color: #bbb;"><i class="fas fa-microphone"></i> Voice Tone:</label>
                <select name="identity"
                    style="height: 24px; font-size: 0.9em; flex: 1; background: transparent; color: #fff; border: none; padding: 0; line-height: 1.2; padding-top: 2px;">
                    {{selectOptions voiceOptions selected=voice}}
                </select>
                {{#if isMonster}}
                <button type="button" class="action-remove-voice"
                    title="Remove humanoid voice — revert to generic monster sounds"
                    style="padding: 0 6px; height: 22px; font-size: 0.8em; background: rgba(200,80,80,0.15); border: 1px solid rgba(200,80,80,0.3); color: #e07070; border-radius: 3px; cursor: pointer; white-space: nowrap;">
                    <i class="fas fa-times"></i>
                </button>
                {{/if}}
            </div>

            {{#if isPC}}
            <p class="notes" style="margin: 5px 0 0 0; font-style: italic; opacity: 0.6; font-size: 0.8em;">
                Optional overrides. Defaults to Voice Tone.
            </p>
            {{else}}
            <p class="notes" style="margin: 5px 0 0 0; font-style: italic; opacity: 0.6; font-size: 0.8em;">
                <i class="fas fa-users" style="margin-right: 4px;"></i>Humanoid voice active. Pain &amp; death route through the shared humanoid chain.
            </p>
            {{/if}}

            {{else if isMonster}}
            <!-- Monster with no identity set — offer opt-in -->
            <div class="voice-config"
                style="display: flex; align-items: center; gap: 10px; font-size: 0.9em; background: rgba(0,0,0,0.2); padding: 4px 8px; border-radius: 4px; border: 1px solid rgba(255,255,255,0.07);">
                <i class="fas fa-paw" style="opacity: 0.5; width: 16px; text-align: center;"></i>
                <span style="flex: 1; opacity: 0.6; font-size: 0.85em;">Vocal defaults resolve from monster type.</span>
                <button type="button" class="action-enable-voice"
                    title="Enable humanoid voice identity — overrides pain &amp; death with masc/fem humanoid sounds"
                    style="padding: 0 8px; height: 22px; font-size: 0.8em; background: rgba(124,58,237,0.15); border: 1px solid rgba(124,58,237,0.3); color: rgba(180,160,255,0.85); border-radius: 3px; cursor: pointer; white-space: nowrap;">
                    <i class="fas fa-microphone"></i> Enable Humanoid Voice
                </button>
            </div>
            {{/if}}

        </div>
    </header>

    <div class="content">
        <p class="entity-meta" style="margin: 0 0 8px 10px;">Configure specific sound overrides for this Actor. These
            will travel with the Actor if exported.</p>

        <section class="ionrift-list slots">
            {{#each slots as |slot|}}
            <div class="ionrift-list-item sound-slot">
                <div class="entity-info" style="flex: 0 0 auto; display: flex; align-items: center; gap: 8px;" {{#if
                    slot.hint}}title="{{slot.hint}}" {{/if}}>
                    <i class="{{slot.icon}}" style="width: 16px; text-align: center; opacity: 0.8;"></i>
                    <span class="entity-name">{{slot.label}}</span>
                </div>

                <div class="badges"
                    style="flex: 1; display: flex; justify-content: flex-end; align-items: center; gap: 8px;">
                    {{#if slot.hasValue}}
                    <span class="ionrift-badge success">{{slot.displayValue}}</span>
                    {{else}}
                    <span class="ionrift-badge loading">{{slot.displayValue}}</span>
                    {{/if}}
                </div>

                <div class="entity-actions" style="flex: 0 0 auto; display: flex; gap: 4px;">
                    <button type="button" class="action-play" data-key="{{slot.key}}" title="Preview"
                        style="{{#unless slot.hasValue}}display: none;{{/unless}}">
                        <i class="fas fa-play"></i>
                    </button>
                    <button type="button" class="action-clear" data-key="{{slot.key}}" title="Reset"
                        style="{{#unless slot.hasValue}}display: none;{{/unless}}">
                        <i class="fas fa-undo" style="color: #ef4444;"></i>
                    </button>
                    <button type="button" class="action-search" data-key="{{slot.key}}" title="Search Sounds">
                        <i class="fas fa-pen"></i>
                    </button>
                </div>
            </div>
            {{/each}}
        </section>

        <div class="sheet-footer"
            style="margin-top: 10px; display: flex; justify-content: flex-end; padding-top: 10px; border-top: 1px solid rgba(255,255,255,0.05);">
            <button type="button" class="ionrift-save-btn action-save">
                <i class="fas fa-check"></i> Save & Close
            </button>
        </div>
    </div>
</form>