<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"
             xmlns:vm="clr-namespace:ClipCmd.ViewModels"
             xmlns:i="https://github.com/projektanker/icons.avalonia"
             mc:Ignorable="d" d:DesignWidth="800" d:DesignHeight="450"
             xmlns:dialogHost="clr-namespace:DialogHostAvalonia;assembly=DialogHost.Avalonia"
             x:Class="ClipCmd.Views.MainView"
             x:DataType="vm:MainViewModel"
             Background="{DynamicResource SemiColorBackground0}">
    <Design.DataContext>
        <!-- This only sets the DataContext for the previewer in an IDE,
         to set the actual DataContext for runtime, set the DataContext property in code (look at App.axaml.cs) -->
        <vm:MainViewModel />
    </Design.DataContext>

    <UserControl.Styles>
        <StyleInclude Source="avares://Semi.Avalonia/Themes/Index.axaml" />
    </UserControl.Styles>

    <dialogHost:DialogHost CloseOnClickAway="False" DisableOpeningAnimation="True" Background="{DynamicResource SemiColorBackground0}">
        <dialogHost:DialogHost.DialogContent>
            <!-- put your dialog content here-->
        </dialogHost:DialogHost.DialogContent>

        <Grid RowDefinitions="Auto Auto Auto *" ColumnDefinitions="Auto * Auto" Margin="10">

            <Grid RowDefinitions="Auto * Auto * Auto" VerticalAlignment="Stretch">
                <TextBox Grid.Row="0" MaxLength="5" InnerLeftContent="Prefix:" Watermark="none" Text="{Binding Prefix}" />
                <TextBox Grid.Row="2" MaxLength="5" InnerLeftContent="Suffix:" Watermark="none" Text="{Binding Suffix}" />
                <TextBox Grid.Row="4" MaxLength="2" InnerLeftContent="Args seperator:" Text="{Binding CommandArgsSeperator}" />
            </Grid>

            <Label Grid.Column="1" Content="ClipCMD" HorizontalAlignment="Center" VerticalAlignment="Center" FontSize="30" />

            <Grid RowDefinitions="Auto Auto Auto Auto Auto" ColumnDefinitions="100 20 100" Grid.Column="2">
                <Label Content="Mode" />
                <RadioButton Grid.Row="1" VerticalAlignment="Center" Content="Clipboard" IsChecked="{Binding ClipboardModeEnabled}" />
                <CheckBox Grid.Row="1" Grid.Column="2" VerticalAlignment="Center" Content="Auto Paste" IsEnabled="{Binding ClipboardModeEnabled}" IsChecked="{Binding AutoPaste}" />
                <Separator Grid.Row="2" Grid.ColumnSpan="3" VerticalAlignment="Center" />
                <RadioButton Grid.Row="3" VerticalAlignment="Center" Content="Auto Type" IsChecked="{Binding AutoTypeModeEnabled}" />
                <NumericUpDown Grid.Row="3" Grid.Column="2" Increment="1" Minimum="1" Maximum="1000" VerticalAlignment="Center" IsEnabled="{Binding AutoTypeModeEnabled}" Value="{Binding AutoTypeDelay, FallbackValue=1, TargetNullValue=1}" />
            </Grid>

            <Separator Grid.Row="1" Grid.ColumnSpan="3" VerticalAlignment="Center" Margin="0 10" />

            <Button Grid.Column="0" Grid.Row="2" Command="{Binding AddCommand}">
                <StackPanel Spacing="4" Orientation="Horizontal">
                    <i:Icon Value="fa-plus" />
                    <TextBlock>Add Command</TextBlock>
                </StackPanel>
            </Button>

            <Grid ColumnDefinitions="* 20 *" Grid.Column="2" Grid.Row="2">
                <Button>
                    <StackPanel Spacing="4" Orientation="Horizontal">
                        <i:Icon Value="fa-file-upload" />
                        <TextBlock>Import</TextBlock>
                    </StackPanel>
                </Button>

                <Button Grid.Column="2">
                    <StackPanel Orientation="Horizontal">
                        <i:Icon Value="fa-file-download" />
                        <TextBlock>Export</TextBlock>
                    </StackPanel>
                </Button>
            </Grid>

            <ScrollViewer Grid.Column="0" Grid.Row="3" Grid.ColumnSpan="3" VerticalScrollBarVisibility="Auto" Margin="0 20 0 0"  Theme="{DynamicResource StaticScrollViewer}">
                <ItemsControl  ItemsSource="{Binding Commands}">
                    <!--Use a StackPanel to display all the modules-->
                    <ItemsControl.ItemsPanel>
                        <ItemsPanelTemplate>
                            <StackPanel Spacing="10" />
                        </ItemsPanelTemplate>
                    </ItemsControl.ItemsPanel>

                    <!--This defines the layout for each item (i.e. each module)-->
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <Border CornerRadius="3" Background="{DynamicResource SemiColorBackground1}" Padding="10 10">
                                <Grid ColumnDefinitions="* 45 10 45 10 45">
                                    <Label Content="{Binding Name}" VerticalAlignment="Center" />
                                    <Button Grid.Column="1" Command="{Binding RenameCommand}" HorizontalAlignment="Stretch">
                                        <i:Icon Value="fa-edit" />
                                    </Button>
                                    <Button Grid.Column="3" Command="{Binding EditCommand}" HorizontalAlignment="Stretch">
                                        <i:Icon Value="fa-code" />
                                    </Button>
                                    <Button Grid.Column="5" Command="{Binding RemoveCommand}" HorizontalAlignment="Stretch">
                                        <i:Icon Value="fa-trash" />
                                    </Button>
                                </Grid>
                            </Border>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </ScrollViewer>
        </Grid>
    </dialogHost:DialogHost>
</UserControl>