<div class="skin-config-container">
    <header class="skin-header">
        <h1>Storyteller Cinema Studio</h1>
        <p>Customize your cinematic experience.</p>
    </header>

    <div class="skin-layout">
        <!-- LEFT: Skin List -->
        <aside class="skin-sidebar">
            <h3>Installed Skins</h3>
            <ul class="skin-list">
                {{#each skins}}
                <li class="skin-item {{#if (eq this.id ../activeSkin)}}active{{/if}}" data-action="selectSkin" data-id="{{this.id}}">
                    <span class="skin-name">{{this.name}}</span>
                    {{#if (eq this.author "System")}}
                    <i class="fas fa-lock" title="System Skin"></i>
                    {{else}}
                    <i class="fas fa-trash" data-action="deleteSkin" data-id="{{this.id}}" title="Delete Skin"></i>
                    {{/if}}
                </li>
                {{/each}}
            </ul>
            <div class="sidebar-actions">
                <button type="button" data-action="createSkin"><i class="fas fa-plus"></i> Create New Skin</button>
                <button type="button" data-action="importSkin"><i class="fas fa-file-import"></i> Import JSON</button>
            </div>
        </aside>

        <!-- RIGHT: Editor -->
        <main class="skin-editor">
            {{#if selectedSkin}}
            <div class="editor-header">
                <h2>{{selectedSkin.name}}</h2>
                <div class="actions">
                    {{#unless (eq selectedSkin.author "System")}}
                    <button type="button" data-action="saveSkin"><i class="fas fa-save"></i> Save</button>
                    {{/unless}}
                    <button type="button" data-action="exportSkin" title="Export JSON"><i class="fas fa-file-export"></i></button>
                    <button type="button" data-action="applySkin"><i class="fas fa-check"></i> Apply to Scene</button>
                </div>
            </div>

            <div class="editor-form">
                <!-- METADATA -->
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" name="name" value="{{selectedSkin.name}}" {{#if (eq selectedSkin.author "System"
                        )}}disabled{{/if}} />
                </div>

                <!-- TEXTURES -->
                <fieldset>
                    <legend>Textures</legend>
                    <div class="form-group">
                        <label>Bar Texture (Global Fallback)</label>
                        <file-picker type="image" name="options.barTexture" value="{{selectedSkin.options.barTexture}}"></file-picker>
                    </div>
                    <div class="form-group">
                        <label>Top Bar Texture (Independent)</label>
                        <file-picker type="image" name="options.barTopTexture" value="{{selectedSkin.options.barTopTexture}}"></file-picker>
                    </div>
                    <div class="form-group">
                        <label>Bottom Bar Texture (Independent)</label>
                        <file-picker type="image" name="options.barBottomTexture" value="{{selectedSkin.options.barBottomTexture}}"></file-picker>
                    </div>
                    <div class="form-group">
                        <label>Footer Texture (Independent)</label>
                        <file-picker type="image" name="options.footerTexture" value="{{selectedSkin.options.footerTexture}}"></file-picker>
                    </div>
                    <div class="form-group">
                        <label>Portrait Card Border Image</label>
                        <file-picker type="image" name="options.portraitBorder" value="{{selectedSkin.options.portraitBorder}}"></file-picker>
                    </div>
                    <div class="form-group">
                        <label>Overlay (Grain/Vignette)</label>
                        <file-picker type="image" name="options.overlayTexture" value="{{selectedSkin.options.overlayTexture}}"></file-picker>
                    </div>
                </fieldset>
 
                <!-- FILTERS -->
                <fieldset>
                    <legend>Global Filters</legend>
                    <div class="form-group">
                        <label>CSS Filter String</label>
                        <input type="text" name="options.filter" value="{{selectedSkin.options.filter}}"
                            placeholder="grayscale(100%) sepia(80%)" />
                    </div>
                    <p class="hint">Use standard CSS syntax: <code>grayscale(100%)</code>, <code>sepia(100%)</code>,
                        <code>blur(2px)</code>, etc.
                    </p>
                </fieldset>
 
                <!-- COLORS & BORDERS -->
                <fieldset>
                    <legend>Colors & Borders</legend>
                    <div class="form-group">
                        <label>Bar Background</label>
                        <color-picker name="options.styles.--cinematic-bar-bg" value="{{lookup selectedSkin.options.styles '--cinematic-bar-bg'}}"></color-picker>
                    </div>
                    <div class="form-group">
                        <label>Footer Background Color</label>
                        <color-picker name="options.styles.--cinematic-footer-bg" value="{{lookup selectedSkin.options.styles '--cinematic-footer-bg'}}"></color-picker>
                    </div>
                    <div class="form-group">
                        <label>Portrait Name Background</label>
                        <color-picker name="options.styles.--cinematic-portrait-name-bg" value="{{lookup selectedSkin.options.styles '--cinematic-portrait-name-bg'}}"></color-picker>
                    </div>
                    <div class="form-group">
                        <label>Border Style</label>
                        <div class="modular-border-fields">
                            <input type="number" class="border-input" name="border.width" value="{{border.width}}"
                                title="Width (px)" />
                            <select class="border-input" name="border.style">
                                <option value="none" {{#if (eq border.style "none" )}}selected{{/if}}>None</option>
                                <option value="solid" {{#if (eq border.style "solid" )}}selected{{/if}}>Solid</option>
                                <option value="dashed" {{#if (eq border.style "dashed" )}}selected{{/if}}>Dashed</option>
                                <option value="dotted" {{#if (eq border.style "dotted" )}}selected{{/if}}>Dotted</option>
                                <option value="double" {{#if (eq border.style "double" )}}selected{{/if}}>Double</option>
                                <option value="inset" {{#if (eq border.style "inset" )}}selected{{/if}}>Inset</option>
                                <option value="outset" {{#if (eq border.style "outset" )}}selected{{/if}}>Outset</option>
                            </select>
                            <input type="color" class="border-input" name="border.color" value="{{border.color}}"
                                title="Color" />
                        </div>
                    </div>
                </fieldset>
            </div>

            {{else}}
            <div class="empty-state">
                <i class="fas fa-film"></i>
                <p>Select a skin to edit or create a new one.</p>
            </div>
            {{/if}}
        </main>
    </div>
</div>