{{#if sos.showProceduralCard}}
<div class="sos-proc-hover">
    <i class="fa-solid fa-dice-d20 sos-procedural-icon" inert></i>
    <span class="proc-name ellipsis">{{ name }}</span>
    {{#if sos.proceduralGroup}}
    <span class="sos-procedural-group-badge {{#if sos.proceduralGroup.coolingDown}}is-cooling-down{{/if}}"
          data-tooltip="Soundscape group: {{ sos.proceduralGroup.name }}">
        {{ sos.proceduralGroup.name }} {{ sos.proceduralGroup.occupied }}/{{ sos.proceduralGroup.max }}{{#if sos.proceduralGroup.coolingDown}} � cooldown {{ sos.proceduralGroup.cooldownRemainingSec }}s{{/if}}
    </span>
    {{/if}}
    <div class="ph-right">
        {{#if sos.showProceduralPlayChance}}
        <span class="sos-procedural-chance-badge"
              data-tooltip="Play chance per scheduled fire">{{ sos.proceduralPlayChance }}%</span>
        {{/if}}
        {{#if sos.isGM}}
        <div class="ph-controls">
            <button type="button" class="sos-transport-btn sos-procedural-fire-btn icon fa-solid fa-bolt"
                    data-sos-action="soundscapeFireNow" data-sound-id="{{ id }}" data-playlist-id="{{ playlistId }}"
                    {{#unless sos.proceduralArmed}}disabled{{/unless}}
                    data-tooltip="Fire Now (GM testing - client-local)"
                    aria-label="Fire Now"></button>
            <button type="button" class="sos-transport-btn sos-stop-btn icon fa-solid fa-square"
                    data-action="soundStop" data-sound-id="{{ id }}" data-playlist-id="{{ playlistId }}"
                    data-tooltip="Stop Sound"
                    aria-label="Stop Sound"></button>
        </div>
        {{/if}}
        <span class="sos-procedural-eta">{{ sos.proceduralEta }}</span>
    </div>
</div>
{{else}}
{{#if sos.showProgressCard}}
<header class="sos-playlist-header {{#if sos.showGroupBedCard}}sos-bed-track-header{{/if}}">
    {{#if sos.showGroupBedCard}}
    <i class="fa-thin fa-music" inert></i>
    <span class="ellipsis sos-playlist-title">{{ name }}</span>
    {{else}}
    <i class="fa-solid fa-list-music" inert></i>
    <span class="ellipsis sos-playlist-title">{{ sos.playlistName }}</span>
    {{/if}}
    <div class="sound-timer">
        <span class="sos-native-timestamp-proxy sos-timestamp-proxy" aria-hidden="true">
            <span class="current"></span>
            <span class="duration"></span>
            <i class="pause fa-solid fa-pause"></i>
        </span>
        <span class="sos-current">{{ currentTime }}</span>
        <span class="sep">&sol;</span>
        <span class="sos-duration">{{ durationTime }}</span>
    </div>
</header>

<div class="sos-track-block {{#if sos.showGroupBedCard}}sos-bed-progress-block{{/if}}">
    {{#unless sos.showGroupBedCard}}
    <div class="sos-track-header">
        <i class="fa-thin fa-music" inert></i>
        <label class="ellipsis">{{ name }}</label>
    </div>
    {{/unless}}
    <div class="sos-progress-bar {{#if sos.showSegmentedProgress}}sos-progress-bar--is-segmented{{/if}}">
        {{#if sos.showSegmentedProgress}}
        <div class="sos-progress-bar--segmented">
            <div class="sos-progress-track-fill" style="width: {{ sos.loopTrackProgressPct }}%"></div>
            {{#each sos.loopSegments}}
            <div class="sos-progress-segment {{#if isCurrent}}is-current{{/if}} {{#if isPast}}is-past{{/if}}"
                 data-tooltip="{{ tooltip }}"
                 style="left: {{ startPct }}%; width: {{ widthPct }}%; --sos-loop-segment-color: {{ color }}; --sos-loop-segment-soft-color: {{ softColor }}; --sos-loop-segment-fill-color: {{ fillColor }};">
                <div class="sos-progress-segment-fill" style="width: {{ fillPct }}%"></div>
            </div>
            {{/each}}
            <div class="sos-progress-playhead" style="left: {{ sos.loopTrackProgressPct }}%"></div>
        </div>
        {{else}}
        <div class="sos-progress-fade sos-progress-fade-in"
             style="left: 0%; width: {{ sos.fadeInPct }}%"
             {{#unless sos.showFadeInZone}}hidden{{/unless}}
             {{#if sos.fadeInLabel}}data-tooltip="{{ sos.fadeInLabel }}"{{/if}}></div>
        <div class="sos-progress-fade sos-progress-fade-out"
             style="left: {{ sos.fadeOutStartPct }}%; width: {{ sos.fadeOutPct }}%"
             {{#unless sos.showFadeOutZone}}hidden{{/unless}}
             {{#if sos.fadeOutLabel}}data-tooltip="{{ sos.fadeOutLabel }}"{{/if}}></div>
        <div class="sos-progress-fill" style="width: {{ sos.progressPct }}%"></div>
        {{/if}}
    </div>
</div>

<div class="sos-transport-row">
    <div class="sos-transport-controls">
        {{#if isOwner}}
        <button type="button" class="sos-transport-btn icon fa-solid fa-arrows-rotate
                {{#unless repeat}}inactive{{/unless}}"
                data-action="soundRepeat" data-tooltip
                aria-label="{{ localize "PLAYLIST.SoundLoop" }}"></button>
        {{/if}}

        {{#if sos.isGM}}
        <button type="button" class="sos-transport-btn sos-toggle {{#if sos.silenceEnabled}}active{{/if}} {{#if sos.soundscapeActive}}disabled{{/if}}"
                data-playlist-id="{{ playlistId }}"
                data-tooltip="{{#if sos.silenceEnabled}}Disable Sound of Silence{{else}}Enable Sound of Silence{{/if}}">
            <i class="fa-solid fa-hourglass-half"></i>
        </button>
        {{/if}}

        {{#if sos.isGM}}
        <button type="button" class="sos-transport-btn xfade-toggle {{#if sos.crossfadeEnabled}}active{{/if}} {{#if sos.soundscapeActive}}disabled{{/if}}"
                data-playlist-id="{{ playlistId }}"
                data-tooltip="{{#if sos.crossfadeEnabled}}Disable Auto-Crossfade{{else}}Enable Auto-Crossfade{{/if}}">
            <i class="fa-solid fa-right-left"></i>
        </button>
        {{/if}}

        {{#if sos.loopEnabled}}
        <button type="button" class="sos-transport-btn sos-loop-toggle-btn
                {{#if sos.loopActive}}active{{/if}}"
                data-sos-action="toggleLoop" data-sound-id="{{ id }}"
                {{#unless sos.isGM}}disabled{{/unless}}
                data-tooltip="Internal Loop">
            <i class="fa-solid fa-repeat"></i>
        </button>
        {{/if}}

        {{#if isOwner}}
        <button type="button" class="sos-transport-btn sos-mode-btn icon {{ sos.playlistMode.icon }}"
                data-sos-action="cyclePlaylistMode" data-playlist-id="{{ playlistId }}"
                data-tooltip aria-label="{{ localize sos.playlistMode.label }}"></button>
        {{/if}}
    </div>

    <div class="sos-transport-spacer"></div>

    <div class="sos-playback-group">
        {{#if sos.showTrackNavigation}}
        <button type="button" class="sos-transport-btn"
                data-sos-action="prevTrack" data-playlist-id="{{ playlistId }}" data-sound-id="{{ id }}"
                {{#unless isOwner}}disabled{{/unless}}
                data-tooltip="Previous Track">
            <i class="fa-solid fa-backward-step"></i>
        </button>

        <button type="button" class="sos-transport-btn"
                data-sos-action="nextTrack" data-playlist-id="{{ playlistId }}" data-sound-id="{{ id }}"
                {{#unless isOwner}}disabled{{/unless}}
                data-tooltip="Next Track">
            <i class="fa-solid fa-forward-step"></i>
        </button>
        {{/if}}

        {{#if pause.paused}}
        <button type="button" class="sos-transport-btn pause icon {{ play.icon }}"
                data-action="soundPlay"
                {{#unless isOwner}}disabled{{/unless}} data-tooltip
                aria-label="{{ localize play.label }}"></button>
        {{else}}
        <button type="button" class="sos-transport-btn pause icon {{ pause.icon }}"
                data-action="soundPause"
                {{ disabled pause.disabled }} data-tooltip
                aria-label="{{ localize "PLAYLIST.SoundPause" }}"></button>
        {{/if}}

        <button type="button" class="sos-transport-btn sos-stop-btn icon fa-solid fa-square"
                data-action="soundStop"
                {{#unless isOwner}}disabled{{/unless}} data-tooltip
                aria-label="{{ localize "PLAYLIST.SoundStop" }}"></button>
    </div>
</div>

{{#if sos.showSegBand}}
<div class="sos-seg-band {{#unless sos.isGM}}sos-disabled{{/unless}}" data-sound-id="{{ id }}">
    <span class="sos-seg-band-label">
        <i class="fa-solid fa-repeat" inert></i>
        <span class="sos-seg-band-count">
            <span class="current">{{ sos.loopCurrentSegIdx1 }}</span><span class="sep">/</span><span class="total">{{ sos.loopTotalSegments }}</span>
        </span>
        <span class="sos-seg-band-name ellipsis" title="{{ sos.loopCurrentSegmentLabel }}">{{ sos.loopCurrentSegmentLabel }}</span>
    </span>
    <button type="button" class="sos-seg-band-btn" data-sos-action="loopPrev"
            data-sound-id="{{ id }}" {{#unless sos.canSkipPrev}}disabled{{else}}{{#unless sos.isGM}}disabled{{/unless}}{{/unless}}
            data-tooltip="Previous Segment"
            aria-label="Previous Segment">
        <i class="fa-solid fa-backward-step"></i>
    </button>
    <button type="button" class="sos-seg-band-btn" data-sos-action="loopNext"
            data-sound-id="{{ id }}" {{#unless sos.canSkipNext}}disabled{{else}}{{#unless sos.isGM}}disabled{{/unless}}{{/unless}}
            data-tooltip="Next Segment"
            aria-label="Next Segment">
        <i class="fa-solid fa-forward-step"></i>
    </button>
    <div class="sos-seg-band-spacer"></div>
    <button type="button" class="sos-seg-band-btn" data-sos-action="loopBreak"
            data-sound-id="{{ id }}" {{#unless sos.canBreakLoop}}disabled{{else}}{{#unless sos.isGM}}disabled{{/unless}}{{/unless}}
            data-tooltip="Break Loop"
            aria-label="Break Loop">
        <i class="fa-solid fa-eject"></i>
    </button>
    <button type="button" class="sos-seg-band-btn" data-sos-action="loopDisable"
            data-sound-id="{{ id }}" {{#unless sos.canDisableLoops}}disabled{{else}}{{#unless sos.isGM}}disabled{{/unless}}{{/unless}}
            data-tooltip="Disable Loops"
            aria-label="Disable Loops">
        <i class="fa-solid fa-ban"></i>
    </button>
</div>
{{/if}}

{{#if sos.showPersonalTrackVolume}}
<div class="sos-personal-mix-badge"
     data-tooltip="Personal Mix: these volume controls are local to you and do not affect the GM or other players.">
    <span class="sos-personal-mix-icons">
        <i class="fa-solid fa-user" inert></i>
        <i class="fa-solid fa-headphones" inert></i>
    </span>
    <span>Personal Mix</span>
</div>
{{/if}}

{{#if sos.showPlaylistVolumeRow}}
<div class="sos-volume-columns">
    <div class="sos-volume-col sos-track-volume-col">
        <span class="sos-vol-label-wrap sos-volume-compact-label">
            <span class="sos-vol-label">Track</span>
            <span class="sos-vol-sublabel">Volume</span>
        </span>
        <i class="volume-icon fa-solid fa-volume-low" inert></i>
        {{#if sos.showPersonalTrackVolume}}
        <range-picker class="sos-personal-track-volume-slider"
                      name="personalTrackVolume-{{ id }}"
                      value="{{ sos.personalTrackVolume }}"
                      min="0" max="1" step="0.05"
                      data-playlist-id="{{ playlistId }}"
                      data-sound-id="{{ id }}"
                      data-sound-uuid="{{ uuid }}">
        </range-picker>
        {{else}}
        {{#with volume}}
        {{ formInput field classes="sound-volume" value=modifier dataset=dataset aria=aria disabled=disabled }}
        {{/with}}
        {{/if}}
    </div>
    <div class="sos-volume-col sos-playlist-volume-col" data-playlist-id="{{ playlistId }}">
        <span class="sos-vol-label-wrap sos-volume-compact-label">
            <span class="sos-vol-label">Playlist</span>
            <span class="sos-vol-sublabel">Volume</span>
        </span>
        <i class="volume-icon fa-solid fa-volume-low" inert></i>
        <range-picker class="sos-playlist-volume-slider"
                      name="normalizedVolume-{{ playlistId }}"
                      value="{{ sos.normalizedVolume }}"
                      min="0" max="1" step="0.05"
                      data-playlist-id="{{ playlistId }}"
                      {{#unless sos.isGM}}disabled{{/unless}}>
        </range-picker>
    </div>
    {{#if sos.showPersonalVolumeRow}}
    <div class="sos-volume-col sos-personal-volume-col" data-playlist-id="{{ playlistId }}">
        <span class="sos-vol-label-wrap sos-volume-compact-label">
            <span class="sos-vol-label">Playlist</span>
            <span class="sos-vol-sublabel">Volume</span>
        </span>
        <i class="volume-icon fa-solid fa-volume-low" inert></i>
        <range-picker class="sos-personal-volume-slider"
                      name="personalVolume-{{ playlistId }}"
                      value="{{ sos.personalVolume }}"
                      min="0" max="1" step="0.05"
                      data-playlist-id="{{ playlistId }}">
        </range-picker>
    </div>
    {{/if}}
</div>
{{else}}
<div class="sos-volume-columns {{#unless sos.showPersonalVolumeRow}}sos-volume-single{{/unless}}">
    <div class="sos-volume-col sos-track-volume-col">
        <span class="sos-vol-label-wrap sos-volume-compact-label">
            <span class="sos-vol-label">Track</span>
            <span class="sos-vol-sublabel">Volume</span>
        </span>
        <i class="volume-icon fa-solid fa-volume-low" inert></i>
        {{#if sos.showPersonalTrackVolume}}
        <range-picker class="sos-personal-track-volume-slider"
                      name="personalTrackVolume-{{ id }}"
                      value="{{ sos.personalTrackVolume }}"
                      min="0" max="1" step="0.05"
                      data-playlist-id="{{ playlistId }}"
                      data-sound-id="{{ id }}"
                      data-sound-uuid="{{ uuid }}">
        </range-picker>
        {{else}}
        {{#with volume}}
        {{ formInput field classes="sound-volume" value=modifier dataset=dataset aria=aria disabled=disabled }}
        {{/with}}
        {{/if}}
    </div>
    {{#if sos.showPersonalVolumeRow}}
    <div class="sos-volume-col sos-personal-volume-col" data-playlist-id="{{ playlistId }}">
        <span class="sos-vol-label-wrap sos-volume-compact-label">
            <span class="sos-vol-label">Playlist</span>
            <span class="sos-vol-sublabel">Volume</span>
        </span>
        <i class="volume-icon fa-solid fa-volume-low" inert></i>
        <range-picker class="sos-personal-volume-slider"
                      name="personalVolume-{{ playlistId }}"
                      value="{{ sos.personalVolume }}"
                      min="0" max="1" step="0.05"
                      data-playlist-id="{{ playlistId }}">
        </range-picker>
    </div>
    {{/if}}
</div>
{{/if}}
{{/if}}
{{/if}}