<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
             Width="1200"
             x:Class="DaireApplication.Recipe">
  <Grid RowDefinitions="*">
    <!-- Main Area-->

    <Grid Grid.Row="0" ColumnDefinitions="Auto,1.5*" >
      <Grid Grid.Column="1" >
        <Grid x:Name="machinePic" Height="698" Width="465" >
          <Grid.Background >
            <ImageBrush Source="/Assets/Machine.png" Stretch="UniformToFill"/>
          </Grid.Background>
        </Grid>

      </Grid>
      <Grid Grid.Column="0" RowDefinitions="Auto,*">
        <StackPanel Margin="10,50,0,10" Grid.Row="0" HorizontalAlignment="Center" >
          <Label Foreground="#333333" FontSize="40" FontWeight="Normal"  x:Name="RecipeTitle">Recipe SELECTION</Label>
        </StackPanel>
        <ScrollViewer Grid.Row="1" HorizontalScrollBarVisibility="Auto" VerticalScrollBarVisibility="Auto" Margin="0,0">
          <Grid x:Name="DynamicGrid">
            <!-- Define three columns -->
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="1*"/>
              <ColumnDefinition Width="1*"/>
              <ColumnDefinition Width="1*"/>
            </Grid.ColumnDefinitions>

            <Grid.Styles>


              <Style Selector="Button">
                <Setter Property="Background" Value="White"></Setter>
              </Style>

              <Style Selector="Button:pointerover /template/ContentPresenter">
                <Setter Property="RenderTransform" Value="scale(1.11)"></Setter>
                <Setter Property="Background" Value="White"></Setter>


              </Style>


            </Grid.Styles>




            <!-- Dynamic rows will be generated programmatically in code-behind -->
          </Grid>
        </ScrollViewer>


      </Grid>

    </Grid>






    <!-- Overlay Background for Add Popup -->
    <Border x:Name="PopupOverlay" Background="#80000000" Grid.RowSpan="3" IsVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ZIndex="99"  PointerPressed="OnPopupOverlayPointerPressed">
      <!-- Popup User Control -->

      <!-- Module for Name Entry -->
      <Grid x:Name="NameModule" PointerPressed="" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="20" IsVisible="True">
        <Border Background="White" CornerRadius="10" Padding="20" BorderThickness="1"  ZIndex="101" BorderBrush="#CCC">
          <StackPanel Spacing="15">
            <!-- Label for Text Input -->
            <!-- Label -->

            <TextBlock x:Name="foucs" Text="Enter Recipe Name:"
                 FontSize="18"
                 FontWeight="Bold"
                 Foreground="#333"
                 Margin="0,0,0,8"  />

            <Border x:Name="nameBorder">
              <TextBox x:Name="NameInput"
                     Width="300"
                     Height="30"
                     BorderBrush="#CCC"
                     BorderThickness="1"
                     MaxLength="9"
                     ></TextBox>
            </Border>
            
              <!-- Local styles for this specific TextBox -->

            <!-- Button Panel -->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="10">
              <!-- Save Button -->
              <Button x:Name="SaveButton"
                      Content="Save"
                      FontSize="16"
                      Padding="10,5"
                      Click="saveRecipeClick"
                      Foreground="White" >
                <Button.Background>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#A4275D" Offset="0" />
                    <GradientStop Color="#A4275D" Offset="1" />
                  </LinearGradientBrush>
                </Button.Background>
                <Button.Effect>

                </Button.Effect>
              </Button>
              <!-- Cancel Button -->
              <Button x:Name="CancelButton"
                      Content="Cancel"
                      FontSize="16"
                      Padding="10,5"
                      Background="Gray"
                      Foreground="White"
                      Click="OnPopupOverlayPointerPressed">
                <Button.Effect>

                </Button.Effect>
              </Button>
            </StackPanel>
          </StackPanel>
        </Border>
      </Grid>
    </Border>

    <!-- Overlay Background for Delet Popup -->
    <Border x:Name="managePopupOverlay" Background="#80000000" Grid.RowSpan="3" IsVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ZIndex="99"  PointerPressed="OnDeletePopupOverlayPointerPressed">
      <!-- Popup User Control -->

      <!-- Module for Name Entry -->
      <Grid  PointerPressed="" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20" IsVisible="True">
        <Border Background="White" CornerRadius="10" Padding="20" BorderThickness="1"  ZIndex="101" BorderBrush="#CCC">
          <StackPanel Spacing="15">
            <!-- Label for Text Input -->
            <!-- Label -->


            <TextBlock Text="modify the action "
                 FontSize="20"
                 FontWeight="Bold"
                 Foreground="Red"
                 Margin="0,0,0,8"
                 HorizontalAlignment="Center"/>

            <!-- Button Panel -->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="10">
              <!-- update Button -->
              <Button
                Name="updateActionBtn"
                      Content="Update"
                      FontSize="16"
                      Padding="10,5"
                      Click="UpdateActionClick"
                      Foreground="White" >
                <Button.Background>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#A4275D" Offset="0" />
                    <GradientStop Color="#A4275D" Offset="1" />
                  </LinearGradientBrush>
                </Button.Background>
              </Button>
              <!-- delete Button -->
              <Button
                Name="deleteActionBtn"
                      Content="Delete"
                      FontSize="16"
                      Padding="10,5"
                      Click="deleteActionClick"
                      Foreground="White"
                      Background="Red">
                              </Button>
              <!-- No Button -->
              <Button
                      Content="Cancel"
                      FontSize="16"
                      Padding="10,5"
                      Background="Gray"
                      Foreground="White"
                 Click="OnDeletePopupOverlayPointerPressed">
                <Button.Effect>

                </Button.Effect>
              </Button>
            </StackPanel>
          </StackPanel>
        </Border>
      </Grid>
    </Border>
    <!-- Overlay Background for Add Popup -->
    <Border x:Name="updatePopupOverlay" Background="#80000000" Grid.RowSpan="3" IsVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ZIndex="99"  PointerPressed="OnDeletePopupOverlayPointerPressed">
      <!-- Popup User Control -->

      <!-- Module for Name Entry -->
      <Grid  PointerPressed="" HorizontalAlignment="Center" VerticalAlignment="Top" Margin="20" IsVisible="True">
        <Border Background="White" CornerRadius="10" Padding="20" BorderThickness="1"  ZIndex="101" BorderBrush="#CCC">
          <StackPanel Spacing="15">
            <!-- Label for Text Input -->
            <!-- Label -->

            <TextBlock Text="Rename:"
                 FontSize="18"
                 FontWeight="Bold"
                 Foreground="#333"
                 Margin="0,0,0,8"  />

            <Border x:Name="updateBorder">
              <TextBox x:Name="updateInput"
                     Width="300"
                     Height="30"
                     BorderBrush="#CCC"
                     BorderThickness="1"
                     
                     MaxLength="9"
                     >
                <!-- Local styles for this specific TextBox -->
                <TextBox.Styles>
                  <!-- Normal (unfocused) style -->
                  <Style Selector="TextBox">
                    <Setter Property="Background" Value="White" />
                    <Setter Property="Foreground" Value="Black" />
                  </Style>


                </TextBox.Styles>
              </TextBox>
            </Border>


            <!-- Button Panel -->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Right" Spacing="10">
              <!-- Save Button -->
              <Button x:Name="saveUpdateBtn"
                      Content="Save"
                      FontSize="16"
                      Padding="10,5"
                      Click="SaveUpdateClick"
                      Foreground="White" >
                <Button.Background>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#A4275D" Offset="0" />
                    <GradientStop Color="#A4275D" Offset="1" />
                  </LinearGradientBrush>
                </Button.Background>
              </Button>
              <!-- Cancel Button -->
              <Button x:Name="cancelBtn"
                      Content="Cancel"
                      FontSize="16"
                      Padding="10,5"
                      Background="Gray"
                      Foreground="White"
                      Click="OnDeletePopupOverlayPointerPressed">
                <Button.Effect>

                </Button.Effect>
              </Button>
            </StackPanel>
          </StackPanel>
        </Border>
      </Grid>
    </Border>

    <!-- Overlay Background for Delet Popup -->
    <Border x:Name="DeletePopupOverlay" Background="#80000000" Grid.RowSpan="3" IsVisible="False" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ZIndex="99"  PointerPressed="OnDeletePopupOverlayPointerPressed">
      <!-- Popup User Control -->

      <!-- Module for Name Entry -->
      <Grid  PointerPressed="" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="20" IsVisible="True">
        <Border Background="White" CornerRadius="10" Padding="20" BorderThickness="1"  ZIndex="101" BorderBrush="#CCC">
          <StackPanel Spacing="15">
            <!-- Label for Text Input -->
            <!-- Label -->

            
            <TextBlock Text="Delete Warning!!"
                 FontSize="20"
                 FontWeight="Bold"
                 Foreground="Red"
                 Margin="0,0,0,8" />
            <StackPanel>
              <TextBlock x:Name="deleteMsg" Text="Are you sure?"
                 FontSize="16"
                 FontWeight="Bold"
                 Foreground="#333"
                 Margin="0,0,0,8" />
            </StackPanel>
            

      
        

            <!-- Button Panel -->
            <StackPanel Orientation="Horizontal" HorizontalAlignment="Center" Spacing="10">
              <!-- yes Button -->
              <Button 
                      Content="Yes"
                      FontSize="16"
                      Padding="10,5"
                      Click="YesBtnClick"
                      Foreground="White" >
                <Button.Background>
                  <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                    <GradientStop Color="#A4275D" Offset="0" />
                    <GradientStop Color="#A4275D" Offset="1" />
                  </LinearGradientBrush>
                </Button.Background>
                <Button.Effect>

                </Button.Effect>
              </Button>
              <!-- No Button -->
              <Button
                      Content="No"
                      FontSize="16"
                      Padding="10,5"
                      Background="Gray"
                      Foreground="White"
                 Click="OnDeletePopupOverlayPointerPressed">
                <Button.Effect>

                </Button.Effect>
              </Button>
            </StackPanel>
          </StackPanel>
        </Border>
      </Grid>
    </Border>





  </Grid>

</UserControl>
