<!-- Audio Processing Template Editor Modal -->
<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>

            <div class="form-group">
                <div class="label-row">
                    <label for="apt-name" data-i18n="audio_processing.name">Template Name:</label>
                    <button type="button" class="hint-toggle" onclick="toggleHint(this)" title="?">?</button>
                </div>
                <small class="input-hint" style="display:none" data-i18n="audio_processing.name.hint">A descriptive name for this audio processing template</small>
                <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>

            <!-- Dynamic audio filter list -->
            <div id="apt-filter-list" class="pp-filter-list"></div>

            <!-- Add filter control -->
            <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 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>
        <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>
