<!-- Audio Processing Template Editor Modal — sectioned rack-panel. -->
<div id="apt-modal" class="modal" role="dialog" aria-modal="true" aria-labelledby="apt-modal-title">
    <div class="modal-content">
        <div class="modal-header">
            <h2 id="apt-modal-title" data-i18n="audio_processing.add">Add Audio Processing Template</h2>
            <button class="modal-close-btn" onclick="closeAudioProcessingTemplateModal()" title="Close" data-i18n-aria-label="aria.close">&#x2715;</button>
        </div>
        <div class="modal-body">
            <input type="hidden" id="apt-id">
            <div id="apt-error" class="modal-error" style="display:none"></div>

            <!-- ── 01 · IDENTITY ───────────────────────────────── -->
            <section class="ds-section" data-ds-key="identity" data-ch="signal">
                <div class="ds-section-header">
                    <span class="ds-section-dot" aria-hidden="true"></span>
                    <span class="ds-section-title" data-i18n="settings.section.identity">Identity</span>
                    <span class="ds-section-index" aria-hidden="true">01</span>
                </div>
                <div class="ds-section-body">
                    <div class="form-group ds-name-group">
                        <label for="apt-name" data-i18n="audio_processing.name">Template Name:</label>
                        <input type="text" id="apt-name" data-i18n-placeholder="audio_processing.name_placeholder" placeholder="My Audio Processing Template" required>
                        <div id="apt-tags-container"></div>
                    </div>

                    <div class="form-group">
                        <div class="label-row">
                            <label for="apt-description" data-i18n="audio_processing.description_label">Description (optional):</label>
                            <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                        </div>
                        <small class="input-hint" style="display:none" data-i18n="audio_processing.description.hint">Describe what this template does</small>
                        <input type="text" id="apt-description" data-i18n-placeholder="audio_processing.description_placeholder" placeholder="Describe this template...">
                    </div>
                </div>
            </section>

            <!-- ── 02 · FILTERS ────────────────────────────────── -->
            <section class="ds-section" data-ds-key="filters" data-ch="cyan">
                <div class="ds-section-header">
                    <span class="ds-section-dot" aria-hidden="true"></span>
                    <span class="ds-section-title" data-i18n="settings.section.filters">Filters</span>
                    <span class="ds-section-index" aria-hidden="true">02</span>
                </div>
                <div class="ds-section-body">
                    <div id="apt-filter-list" class="pp-filter-list"></div>

                    <div class="pp-add-filter-row">
                        <select id="apt-add-filter-select" class="pp-add-filter-select">
                            <option value="" data-i18n="filters.select_type">Select filter type...</option>
                        </select>
                    </div>
                </div>
            </section>
        </div>
        <div class="modal-footer">
            <button class="btn btn-icon btn-secondary" onclick="closeAudioProcessingTemplateModal()" title="Cancel" data-i18n-title="settings.button.cancel" data-i18n-aria-label="aria.cancel">&#x2715;</button>
            <button class="btn btn-icon btn-primary" onclick="saveAudioProcessingTemplate()" title="Save" data-i18n-title="settings.button.save" data-i18n-aria-label="aria.save">&#x2713;</button>
        </div>
    </div>
</div>
