<dialog id="audio-dialog" aria-labelledby="audio-dialog-title" aria-describedby="audio-dialog-description">
  <div data-audio-surface>
    <h2 id="audio-dialog-title" tabindex="-1" data-dialog-start>Música y sonidos</h2>
    <p id="audio-dialog-description">Cambia la pista, los volúmenes o escucha un efecto sin abandonar la pantalla. Escape cierra este cuadro.</p>
    <p>Pista actual: <strong data-current-track>{{ MUSIC_TRACKS[audio_preferences.music_track].name }}</strong></p>
    <label class="check-label"><input type="checkbox" data-audio-enabled="music" {% if audio_preferences.music_enabled %}checked{% endif %}> Activar música</label>
    <label for="dialog-music-track">Pista<select id="dialog-music-track" data-audio-track>{% for key, track in MUSIC_TRACKS.items() %}<option value="{{ key }}" {% if key == audio_preferences.music_track %}selected{% endif %}>{{ track.name }} — {{ track.description }}</option>{% endfor %}</select></label>
    <label class="check-label"><input type="checkbox" data-audio-random {% if audio_preferences.music_random %}checked{% endif %}> Selección aleatoria: elegir otra pista al terminar</label>
    <label for="dialog-music-volume">Volumen de música: <output id="dialog-music-output" for="dialog-music-volume">{{ audio_preferences.music_volume }}</output> %<input id="dialog-music-volume" type="range" min="0" max="100" value="{{ audio_preferences.music_volume }}" data-volume-output="dialog-music-output" data-audio-volume="music"></label>
    <div class="button-row"><button class="button" type="button" data-action="audio-play-selected">Reproducir seleccionada</button><button class="button" type="button" data-action="audio-next">Siguiente pista</button></div>
    <hr>
    <label class="check-label"><input type="checkbox" data-audio-enabled="effects" {% if audio_preferences.effects_enabled %}checked{% endif %}> Activar efectos identificativos</label>
    <label for="dialog-effects-volume">Volumen de efectos: <output id="dialog-effects-output" for="dialog-effects-volume">{{ audio_preferences.effects_volume }}</output> %<input id="dialog-effects-volume" type="range" min="0" max="100" value="{{ audio_preferences.effects_volume }}" data-volume-output="dialog-effects-output" data-audio-volume="effects"></label>
    <label for="dialog-effect-preview">Escuchar efecto<select id="dialog-effect-preview" data-effect-preview aria-describedby="dialog-effect-details">{% for key, effect in EFFECT_SOUNDS.items() %}<option value="{{ key }}">{{ effect.name }} — {{ effect.actions }}</option>{% endfor %}</select></label>
    <p id="dialog-effect-details" class="muted" data-effect-details></p>
    <button class="button" type="button" data-action="audio-preview-effect" aria-describedby="dialog-effect-details">Reproducir efecto seleccionado</button>
  </div>
  <form method="dialog"><button class="button button-primary" value="close" type="submit">Cerrar audio</button></form>
</dialog>
