@using MudBlazor.Charts

<MudCard Elevation="3" Style="padding: 0px;">
    <MudCardHeader>
        <div style="margin-left: auto; margin-right: auto; max-width: 600px; width: 40dvw; height: 25dvw;">
            <iframe width="1000"
                    height="1000"
                    src=@Src
                    title=@Title
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin"
                    allowfullscreen>
            </iframe>
        </div>
    </MudCardHeader>
    <MudCardContent>
        <MudStack Spacing="3">
            <MudText Typo="Typo.h6">@Title</MudText>
            <MudText Typo="Typo.body2">@Description</MudText>
        </MudStack>
    </MudCardContent>
    <MudCardActions>
        <MudStack Class="ma-1" Row Spacing="2">
            <MudTooltip Placement="Placement.Top" Arrow Text="In neuem Fenster ansehen">
                <MudIconButton Href="@Src" Target="_blank" Icon="@Icons.Material.Filled.Fullscreen" Size="Size.Small" Color="Color.Inherit" />
            </MudTooltip>

        
            @if (!string.IsNullOrEmpty(YouTubeSrc))
            {
                <MudTooltip Placement="Placement.Top" Arrow Text="Ansehen auf YouTube">
                    <MudIconButton Href="@YouTubeSrc" Target="_blank" Icon="@Icons.Custom.Brands.YouTube" Size="Size.Small" Color="Color.Inherit" />
                </MudTooltip>
            }
        </MudStack>
    </MudCardActions>
</MudCard>

@code {

    [Parameter]
    public string Src { get; set; } = "";

    [Parameter]
    public string? YouTubeSrc { get; set; }

    [Parameter]
    public string Title { get; set; } = "";

    [Parameter]
    public string? Description { get; set; }
}