<div id="options-modal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <h2>Options</h2>
            <span class="close">&times;</span>
        </div>
        
        <div class="modal-body">
            <!-- TTS Section -->
            <div class="options-section">
                <h3>Text-to-Speech</h3>
                
                <div class="option-item">
                    <label>Enable TTS:</label>
                    <input type="checkbox" id="tts-enabled" data-pref-bind="tts.enabled">
                </div>
                
                <div class="option-item">
                    <label>TTS System:</label>
                    <select id="tts-system" data-pref-bind="tts.preferred_handler"></select>
                </div>
                
                <div class="option-item">
                    <label>Voice:</label>
                    <select id="tts-voice" data-pref-bind="tts.voice"></select>
                </div>
                
                <div class="option-item">
                    <label>Speech:</label>
                    <span class="slider-value">100%</span>
                    <input type="range" id="tts-speed" min="50" max="200" value="100" 
                           data-pref-bind="app.speed" data-pref-transform="range:0.5,2.0">
                </div>
                
                <!-- API Settings -->
                <div id="api-settings" class="options-section" style="display: none;">
                    <!-- ElevenLabs Settings -->
                    <div class="api-settings eleven-labs-settings" style="display: none;">
                        <h3>ElevenLabs API Settings</h3>
                        
                        <div class="option-item">
                            <label>API Key:</label>
                            <input type="password" id="elevenlabs-api-key" data-pref-bind="tts.elevenlabs-tts_api_key">
                        </div>
                        
                        <div class="option-item">
                            <label>API URL:</label>
                            <input type="text" id="elevenlabs-api-url" data-pref-bind="tts.elevenlabs-tts_api_url">
                        </div>
                    </div>
                    
                    <!-- OpenAI Settings -->
                    <div class="api-settings openai-settings" style="display: none;">
                        <h3>OpenAI API Settings</h3>
                        
                        <div class="option-item">
                            <label>API Key:</label>
                            <input type="password" id="openai-api-key" data-pref-bind="tts.openai-tts_api_key">
                        </div>
                        
                        <div class="option-item">
                            <label>API URL:</label>
                            <input type="text" id="openai-api-url" data-pref-bind="tts.openai-tts_api_url">
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- Audio Section -->
            <div class="options-section">
                <h3>Audio</h3>
                
                <div class="option-item">
                    <label>Master Volume:</label>
                    <span class="slider-value">100%</span>
                    <input type="range" id="master-volume" min="0" max="100" value="100" 
                           data-pref-bind="audio.masterVolume" data-pref-transform="range:0,1">
                </div>
                
                <div class="option-item">
                    <label>Music Volume:</label>
                    <span class="slider-value">70%</span>
                    <input type="range" id="music-volume" min="0" max="100" value="70" 
                           data-pref-bind="audio.musicVolume" data-pref-transform="range:0,1">
                </div>
                
                <div class="option-item">
                    <label>Sound Effects Volume:</label>
                    <span class="slider-value">100%</span>
                    <input type="range" id="sfx-volume" min="0" max="100" value="100" 
                           data-pref-bind="audio.sfxVolume" data-pref-transform="range:0,1">
                </div>
            </div>
            
            <!-- Language Section -->
            <div class="options-section">
                <h3>Language</h3>
                
                <div class="option-item">
                    <label>Language:</label>
                    <select id="language" data-pref-bind="app.locale"></select>
                </div>
            </div>
        </div>
        
        <div class="modal-footer">
            <button id="close-options">Close</button>
        </div>
    </div>
</div>
