<Window xmlns="https://github.com/avaloniaui"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        x:Class="AquaCare.View.TutorialsWindow"
        Title="Tutorials - Wenns mal nicht klappt"
        Width="1280" Height="720"
        Icon="Ressourcen/Bilder/ProgrammIcon.ico">

    <Grid>
        <Grid.Background>
            <ImageBrush Source="avares://AquaCare.View/Ressourcen/Bilder/TutorialsHintergrund.png" Stretch="UniformToFill"/>
        </Grid.Background>

        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto"/>
        </Grid.RowDefinitions>

        <!-- Buttons für Tutorials -->
        <StackPanel Grid.Row="1"
                    Orientation="Horizontal"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Center"
                    Margin="0,5,0,0">  <!-- Unteres Margin reduziert -->
            <Button Content="Fische füttern" Width="300" Height="50" Click="FischeFütternClick"/>
            <Button Content="Wasser wechseln" Width="300" Height="50" Click="WasserWechselnClick"/>
            <Button Content="Filter reinigen" Width="300" Height="50" Click="FilterReinigenClick"/>
        </StackPanel>

        <!-- Inhalte mittig -->
        <StackPanel Grid.Row="2"
                    HorizontalAlignment="Center"
                    VerticalAlignment="Top"
                    Spacing="2">

            <!-- StackPanel für Tutorial-Inhalt -->
            <StackPanel Orientation="Vertical" HorizontalAlignment="Center" Spacing="5">
                <!-- Container für Bild und initialen Text -->
                <Grid Height="450" Width="500" Margin="0,0,0,0">  <!-- Höhe reduziert -->
                    <Image x:Name="tutorialImage" 
                           Stretch="Uniform"
                           IsVisible="False"/>
                    <TextBlock x:Name="initialText"
                              Text="Wähle oben, was du nicht kannst!"
                              FontSize="30"
                              FontWeight="Bold"
                              HorizontalAlignment="Center"
                              VerticalAlignment="Center"/>
                </Grid>

                <!-- Bildindex-Text -->
                <TextBlock x:Name="imageIndexTextBlock"
                          Text=""
                          FontSize="18"
                          HorizontalAlignment="Center"
                          Margin="0,2,0,2"/>  <!-- Margins reduziert -->

                <!-- Navigation unter dem Bild -->
                <StackPanel Orientation="Vertical" HorizontalAlignment="Center" Spacing="5">
                    <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="10">
                        <Button Content="Zurück" Click="PreviousImageClick" />
                        <Button Content="Weiter" Click="NextImageClick" />
                    </StackPanel>
                    <Button Content="Schließen" 
                            Click="CloseClick" 
                            Width="200" 
                            Margin="0,5,0,0"
                            HorizontalAlignment="Center"/>
                </StackPanel>
            </StackPanel>
        </StackPanel>
    </Grid>
</Window>