@if (_isMinimized)
{
    <div class="deepdrft-minimized-player-dock">
        <MudIconButton Icon="@GetPlayIcon()"
                       Color="Color.Primary" 
                       Size="Size.Large"
                       Class="deepdrft-minimized-player-button"
                       OnClick="@ToggleMinimized" />
    </div>
}
else
{
    @* Full-width outer container *@
    <div class="deepdrft-player-outer-container">
        <MudContainer MaxWidth="MaxWidth.Large" Class="deepdrft-player-inner-container">
            <div class="deepdrft-audio-player-bar">
                <div class="deepdrft-audio-player-content">
                    
                    @* Controls section *@
                    <div class="deepdrft-audio-controls-section">
                        <div class="deepdrft-audio-buttons-row">
                            <MudIconButton Icon="@GetPlayIcon()"
                                           Color="Color.Primary"
                                           Size="Size.Large"
                                           OnClick="@TogglePlayPause"
                                           Disabled="!IsLoaded"/>
                            @if (IsLoaded)
                            {
                                <MudIconButton Icon="@Icons.Material.Filled.Stop"
                                               Color="Color.Primary"
                                               OnClick="@Stop"/>    
                            }
                        </div>
                        
                        <div class="deepdrft-audio-info-row">
                            <MudText Typo="Typo.body2" Class="font-monospace deepdrft-audio-time">
                                @FormatTime(CurrentTime) / @(Duration.HasValue ? FormatTime(Duration.Value) : "--:--")
                            </MudText>
                            @if (!IsLoaded)
                            {
                                <MudProgressCircular Color="Color.Tertiary" Value="@LoadProgress" Size="Size.Small"/>
                            }
                        </div>
                    </div>

                    @* Seek slider *@
                    <MudSlider T="double"
                               Min="0"
                               Max="@(Duration ?? 0D)"
                               Step="0.1"
                               Value="@CurrentTime"
                               ValueChanged="@OnSeek"
                               Disabled="!IsLoaded"
                               Class="deepdrft-audio-seek-slider"/>

                    @* Volume section *@
                    <div class="deepdrft-audio-volume-section">
                        <MudIcon Icon="@GetVolumeIcon()" Class="deepdrft-audio-volume-icon"/>
                        <MudSlider T="double"
                                   Min="0"
                                   Max="1"
                                   Step="0.01"
                                   Value="@Volume"
                                   ValueChanged="@OnVolumeChange"
                                   Class="deepdrft-audio-volume-slider"/>
                    </div>
                    <div class="deepdrft-audio-minimize-section">
                        <MudIconButton Icon="@Icons.Material.Filled.Minimize"
                                       Color="Color.Secondary"
                                       Size="Size.Small"
                                       OnClick="@ToggleMinimized"/>
                    </div>
                </div>
                
                @if (!string.IsNullOrEmpty(ErrorMessage))
                {
                    <MudAlert Severity="Severity.Error" ShowCloseIcon="true" CloseIconClicked="ClearError" Class="ma-2">
                        @ErrorMessage
                    </MudAlert>
                }
            </div>
        </MudContainer>
    </div>
    
    @* Spacer div to maintain layout spacing *@
    <div class="deepdrft-player-spacer"></div>
}