<main id="soundscapes-container">
    <nav id="soundscapes-sidebar">
        <ol id="soundscapes-list">
            {{#each playlists as |playlist|}}
                <li class="soundscapes-playlist {{#if playlist.soundscapePlaying}}playing{{/if}} {{#if playlist.soundscapeSelected}}selected{{/if}}" data-playlist-id="{{playlist.id}}">
                    <span>{{playlist.name}}</span>
                    <div class="soundscapes-playlist-controls">
                    <i data-tooltip="{{localize "dynamic-soundscapes.app.cycle-mood"}}" class="fad {{playlist.moodIcon}} soundscapes-cycle-mood"></i>
                    <i data-tooltip="{{localize "dynamic-soundscapes.app.add-sound"}}" class="fas fa-plus soundscapes-add-sound"></i>
                    <i data-tooltip="{{localize "dynamic-soundscapes.app.config-playlist"}}" class="fas fa-cog soundscapes-config-playlist"></i>
                    <i data-tooltip="{{localize "dynamic-soundscapes.app.play-stop"}}" class="fas {{#if playlist.soundscapePlaying}}fa-stop{{else}}fa-play{{/if}} soundscapes-start-stop"></i>
                    </div>
                </li>
            {{/each}}
            <li class="add-soundscape">
                <i class="fas fa-plus"></i> {{localize "dynamic-soundscapes.app.add-playlist"}}
            </li>
        </ol>
    </nav>
    <section id="soundscape-interface">
    <span id="soundscape-click-to-add" {{#if hideAdd}}style="display: none;"{{/if}}>{{localize "dynamic-soundscapes.app.click-to-add"}}</span>
        {{#each blocks as |block|}}

        <div class="soundscape-block {{#unless conditionMet}}condition-failed{{/unless}} {{#if ../useRows}}layout-rows{{/if}}" data-block-id="{{block.id}}" {{#if block.hidden}}style="display: none;"{{/if}} {{#if block.color}}style="background-color: {{block.color}}d4;"{{/if}}>
            <div class="soundscape-block-header">
                {{#if block.isSoundboard}}<i class="fa-duotone fa-grid" style="pointer-events: none;"></i>{{/if}}
                {{#if block.isAmbient}}<i class="fa-duotone fa-wind" style="pointer-events: none;"></i>{{/if}}
                {{#if block.isRandom}}<i class="fa-duotone fa-random" style="pointer-events: none;"></i>{{/if}}
                {{#unless conditionMet}}<i data-tooltip="{{localize "dynamic-soundscapes.app.condition-not-met"}}" class="fa-duotone fa-volume-slash" style="margin-left: .3rem;"></i>{{/unless}}
                <label>{{block.title}}</label>
                <i data-tooltip="{{localize "dynamic-soundscapes.app.select-all"}}" class="fas fa-music-note soundscape-block-header-button" style="margin-left: auto;" data-action="select-all"></i>
                <i data-tooltip="{{localize "dynamic-soundscapes.app.deselect-all"}}" class="fas fa-music-note-slash soundscape-block-header-button" data-action="deselect-all"></i>
                <i data-tooltip="{{localize "dynamic-soundscapes.app.config-block"}}" class="fas fa-cog soundscape-block-header-button" data-action="config"></i>
                <i data-tooltip="{{localize "dynamic-soundscapes.app.delete-block"}}" class="fas fa-trash soundscape-block-header-button" data-action="delete"></i>
            </div>
            <div class="soundscape-block-body">
                {{#each block.playlistSounds as |sound|}}
                    <div class="soundscape-sound {{#if sound.flags.dynamic-soundscapes.enabled}}enabled{{/if}} {{#if sound.playing}}playing{{/if}}"style="width: {{block.size}};{{#if sound.flags.dynamic-soundscapes.icon}}background-image: url('{{sound.flags.dynamic-soundscapes.icon}}');{{/if}}"  data-sound-id="{{sound.id}}" data-tooltip="{{sound.name}}">
                        <div class="soundscape-sound-spin-container"><i class="fa-duotone fa-spinner-third fa-spin" style="font-size: calc({{block.size}} / 2);"></i></div>
                        <span>{{sound.name}}</span>
                        <input type="range" class="soundscape-sound-volume" min="0" max="1" step="0.01" value="{{sound.volume}}"></input>
                    </div>
                {{/each}}
            </div>
        </div>

        {{/each}}
    </section>
</main>