<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"
            
             x:Class="DaireApplication.Home"
              Width="1280" Height="620" >
  

  <Grid RowDefinitions="*">
    <!--Main Body-->

    <Grid Grid.Row="0" ColumnDefinitions="Auto,*" >
      <Grid Grid.Column="1" HorizontalAlignment="Center"
           VerticalAlignment="Center" Height="698" Width="465"  >
        <Grid x:Name="machinePic"  IsVisible="True">
          <Grid.Background >
            <ImageBrush Source="/Assets/Machine.png"/>
          </Grid.Background>
        </Grid>

        <Grid x:Name="CalcGrid" MaxWidth="350" MaxHeight="500" IsVisible="False">
          <Grid.Styles>

            <Style Selector="Button">
              <Setter Property="Background" Value="White"></Setter>
              <Setter Property="CornerRadius" Value="20"></Setter>
              <Setter Property="Width" Value="100"></Setter>
              <Setter Property="Height" Value="100"></Setter>
              <Setter Property="FontSize" Value="50"></Setter>
              <Setter Property="Foreground" Value="Black"></Setter>
              <Setter Property="VerticalContentAlignment" Value="Center"></Setter>
              <Setter Property="HorizontalContentAlignment" Value="Center"></Setter>

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

            </Style>


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

          <!-- TextBox for Input -->
          <TextBox x:Name="InputTextBox"  Grid.Row="0" Width="300" Height="50" FontSize="20" HorizontalAlignment="Center" Margin="10" IsReadOnly="True" PasswordChar="*"/>
          

          <!-- Keypad Grid -->
          <Grid Grid.Row="1" Margin="10">
            <Grid.RowDefinitions>
              <RowDefinition Height="1*" />
              <RowDefinition Height="1*" />
              <RowDefinition Height="1*" />
              <RowDefinition Height="1*" />
            </Grid.RowDefinitions>
            <Grid.ColumnDefinitions>
              <ColumnDefinition Width="1*" />
              <ColumnDefinition Width="1*" />
              <ColumnDefinition Width="1*" />
            </Grid.ColumnDefinitions>

            <!-- Number Buttons -->
            <Button Content="1" Grid.Row="0" Grid.Column="0" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />
            <Button Content="2" Grid.Row="0" Grid.Column="1" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />
            <Button Content="3" Grid.Row="0" Grid.Column="2" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />

            <Button Content="4" Grid.Row="1" Grid.Column="0" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />
            <Button Content="5" Grid.Row="1" Grid.Column="1" FontSize="24" Background="White" Margin="5" Click="OnKeyClick"  />
            <Button Content="6" Grid.Row="1" Grid.Column="2" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />

            <Button Content="7" Grid.Row="2" Grid.Column="0" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />
            <Button Content="8" Grid.Row="2" Grid.Column="1" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />
            <Button Content="9" Grid.Row="2" Grid.Column="2" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />

            <!-- Control Buttons -->
            <Button Content="BACK" Grid.Row="3" Grid.Column="0" FontSize="20" Background="#D3D3D3" Margin="5" Click="OnBackClick" />
            <Button Content="0" Grid.Row="3" Grid.Column="1" FontSize="24" Background="White" Margin="5" Click="OnKeyClick" />
            <Button x:Name="loginBtn" Content="ENTER" Grid.Row="3" Grid.Column="2" FontSize="20" Background="#A4275D" Foreground="White" Margin="5" Click="LogIn" />
          </Grid>
        </Grid>



      </Grid>
      <Grid Grid.Column="0" RowDefinitions="Auto,1.5*">
        <StackPanel Margin="10,50,0,10" Grid.Row="0" HorizontalAlignment="Center" >
          <Label Foreground="Black" FontSize="30" FontWeight="Normal" >USER 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*"/>
              <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>

  </Grid>




</UserControl>
