<UserControl x:Class="Tango.MachineStudio.UI.Views.ReportIssueView"
             xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
             xmlns:mahapps="http://metro.mahapps.com/winfx/xaml/controls"
             xmlns:materialDesign="http://materialdesigninxaml.net/winfx/xaml/themes"
             xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
             xmlns:autoComplete="clr-namespace:Tango.AutoComplete.Editors;assembly=Tango.AutoComplete"
             xmlns:integration="clr-namespace:Tango.Integration.ExternalBridge;assembly=Tango.Integration"
             xmlns:converters="clr-namespace:Tango.SharedUI.Converters;assembly=Tango.SharedUI"
             xmlns:vm="clr-namespace:Tango.MachineStudio.UI.ViewModels"
             xmlns:tfs="clr-namespace:Tango.TFS;assembly=Tango.TFS"
             xmlns:tfss="clr-namespace:Tango.MachineStudio.UI.TFS"
             xmlns:local="clr-namespace:Tango.MachineStudio.UI.Views"
             mc:Ignorable="d" Width="530" Height="660" Background="{StaticResource Dialog.Background}" d:DataContext="{d:DesignInstance Type=vm:ReportIssueViewVM, IsDesignTimeCreatable=False}" Foreground="{StaticResource MainWindow.Foreground}">

    <UserControl.Resources>
        <converters:EnumToItemsSourceConverter x:Key="EnumToItemsSourceConverter" />
        <tfss:TeamMembersProvider x:Key="TeamMembersProvider" />
        <converters:BooleanToVisibilityConverter x:Key="BooleanToVisibilityConverter" />
    </UserControl.Resources>

    <Grid>
        <Grid>
            <Grid.RowDefinitions>
                <RowDefinition Height="90"/>
                <RowDefinition Height="377*"/>
                <RowDefinition Height="70"/>
            </Grid.RowDefinitions>

            <Grid>
                <StackPanel Orientation="Horizontal">
                    <Image Source="/Images/bug.png" Width="48" RenderOptions.BitmapScalingMode="Fant"></Image>
                    <TextBlock VerticalAlignment="Center" Margin="10 0 0 0" FontSize="20">Report Issue</TextBlock>
                </StackPanel>
            </Grid>

            <Grid Grid.Row="1" Focusable="True">
                <DockPanel>
                    <StackPanel DockPanel.Dock="Top">
                        <DockPanel>
                            <materialDesign:PackIcon Kind="Pencil" Width="24" Height="24" VerticalAlignment="Center" Margin="0 0 10 0" />
                            <TextBox x:Name="txt_title" materialDesign:HintAssist.Hint="Title" materialDesign:HintAssist.IsFloating="True" FontSize="16" Text="{Binding WorkItem.Title}"></TextBox>
                        </DockPanel>

                        <DockPanel Margin="0 10 0 0">
                            <materialDesign:PackIcon Kind="Account" Width="24" Height="24" VerticalAlignment="Center" Margin="0 0 10 0" />
                            <autoComplete:AutoCompleteTextBox Provider="{StaticResource TeamMembersProvider}" SelectedItem="{Binding WorkItem.AssignedTo,Mode=TwoWay}" DisplayMember="DisplayName" materialDesign:HintAssist.Hint="Assigned To" materialDesign:HintAssist.IsFloating="True"></autoComplete:AutoCompleteTextBox>
                        </DockPanel>

                        <DockPanel Margin="0 10 0 0">
                            <materialDesign:PackIcon Kind="Star" Width="24" Height="24" VerticalAlignment="Center" Margin="0 0 10 0" />
                            <Grid>
                                <TextBox IsReadOnly="True" materialDesign:HintAssist.Hint="Area" materialDesign:HintAssist.IsFloating="True"  Text="{Binding WorkItem.Area.Name}" VerticalAlignment="Bottom" Margin="0 0 0 3"></TextBox>
                                <ToggleButton x:Name="toggleArea">
                                    <ToggleButton.Template>
                                        <ControlTemplate TargetType="ToggleButton">
                                            <Grid Background="Transparent">
                                                <Popup Height="200" AllowsTransparency="True" Width="{TemplateBinding ActualWidth}" PopupAnimation="Slide" IsOpen="{Binding IsChecked, Mode=TwoWay, RelativeSource={RelativeSource TemplatedParent}}">
                                                    <Border Background="{StaticResource MainWindow.Background}" Margin="0 2 0 0" BorderBrush="{StaticResource borderBrush}" BorderThickness="1" CornerRadius="3">
                                                        <TreeView Loaded="TreeView_Loaded" ItemsSource="{Binding Project.Areas}" SelectedItemChanged="TreeView_SelectedItemChanged">
                                                            <TreeView.ItemTemplate>
                                                                <HierarchicalDataTemplate ItemsSource="{Binding SubAreas}">
                                                                    <TextBlock Text="{Binding Name}" />
                                                                </HierarchicalDataTemplate>
                                                            </TreeView.ItemTemplate>
                                                        </TreeView>
                                                    </Border>
                                                </Popup>
                                            </Grid>
                                        </ControlTemplate>
                                    </ToggleButton.Template>
                                </ToggleButton>
                            </Grid>
                        </DockPanel>

                        <DockPanel Margin="0 10 0 0">
                            <materialDesign:PackIcon Kind="CommentAlertOutline" Width="24" Height="24" VerticalAlignment="Center" Margin="0 0 10 0" />
                            <ComboBox materialDesign:HintAssist.Hint="Severity" materialDesign:HintAssist.IsFloating="True" ItemsSource="{Binding Source={x:Type tfs:Severity},Converter={StaticResource EnumToItemsSourceConverter}}" SelectedValue="{Binding WorkItem.Severity}" SelectedValuePath="Value" DisplayMemberPath="DisplayName"></ComboBox>
                        </DockPanel>

                        <DockPanel Margin="0 20 0 0">
                            <materialDesign:PackIcon Kind="Tag" Width="24" Height="24" VerticalAlignment="Center" Margin="0 0 10 0" />
                            <TextBlock VerticalAlignment="Center"><Run>Tags</Run> <Run FontSize="10" Foreground="Gray">(highlight selected tags)</Run></TextBlock>
                        </DockPanel>
                        <ScrollViewer Margin="30 0 0 0" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Height="120">
                            <ItemsControl ItemsSource="{Binding SelectedTags}">
                                <ItemsControl.ItemsPanel>
                                    <ItemsPanelTemplate>
                                        <WrapPanel IsItemsHost="True" Orientation="Horizontal" />
                                    </ItemsPanelTemplate>
                                </ItemsControl.ItemsPanel>
                                <ItemsControl.ItemTemplate>
                                    <DataTemplate>
                                        <ToggleButton Style="{StaticResource emptyToggleButton}" IsChecked="{Binding IsSelected}" Cursor="Hand">
                                            <Border CornerRadius="5" Margin="0 5 5 5" Padding="5" BorderThickness="1" BorderBrush="DimGray">
                                                <Border.Style>
                                                    <Style TargetType="Border">
                                                        <Setter Property="Background" Value="{StaticResource borderBrush}"></Setter>
                                                        <Style.Triggers>
                                                            <DataTrigger Binding="{Binding IsSelected}" Value="True">
                                                                <Setter Property="Background" Value="{StaticResource AccentColorBrush}"></Setter>
                                                                <Setter Property="TextElement.Foreground" Value="{StaticResource MainWindow.Foreground}"></Setter>
                                                            </DataTrigger>
                                                        </Style.Triggers>
                                                    </Style>
                                                </Border.Style>
                                                <TextBlock Text="{Binding Data.Name}" FontSize="11"></TextBlock>
                                            </Border>
                                        </ToggleButton>
                                    </DataTemplate>
                                </ItemsControl.ItemTemplate>
                            </ItemsControl>
                        </ScrollViewer>

                        <DockPanel Margin="0 20 0 0">
                            <materialDesign:PackIcon Kind="FileImage" Width="24" Height="24" VerticalAlignment="Center" Margin="0 0 10 0" />
                            <TextBlock VerticalAlignment="Center"><Run>Attach Image</Run></TextBlock>
                        </DockPanel>
                        <DockPanel Margin="30 0 0 0">
                            <Button DockPanel.Dock="Right" Margin="10 0 0 0" Style="{StaticResource MaterialDesignFlatButton}" Command="{Binding BrowseImageCommand}">BROWSE</Button>
                            <TextBox IsReadOnly="True" Text="{Binding ImageFile}"></TextBox>
                        </DockPanel>
                    </StackPanel>


                    <Grid>
                        <DockPanel>
                            <DockPanel Margin="0 20 0 0" DockPanel.Dock="Top">
                                <materialDesign:PackIcon Kind="ChartTimeline" Width="24" Height="24" VerticalAlignment="Center" Margin="0 0 10 0" />
                                <TextBlock VerticalAlignment="Center">Steps To Reproduce</TextBlock>
                            </DockPanel>

                            <Grid Margin="30 0 0 0">
                                <TextBox Margin="0 5 0 0" Style="{x:Null}" BorderBrush="{StaticResource borderBrush}" AcceptsReturn="True" TextWrapping="Wrap" HorizontalScrollBarVisibility="Disabled" VerticalScrollBarVisibility="Auto" Text="{Binding WorkItem.StepsToReproduce}"></TextBox>
                            </Grid>
                        </DockPanel>
                    </Grid>
                </DockPanel>
            </Grid>

            <Grid Grid.Row="2">
                <Button HorizontalAlignment="Right" Height="40" Width="140" Command="{Binding OKCommand}" Background="{StaticResource RedBrush100}" BorderBrush="{StaticResource RedBrush100}" IsDefault="True">SUBMIT</Button>

                <ItemsControl ItemsSource="{Binding ValidationErrors}" HorizontalAlignment="Left" Margin="5" VerticalAlignment="Center" Visibility="Visible">
                    <ItemsControl.ItemTemplate>
                        <DataTemplate>
                            <TextBlock Foreground="{StaticResource RedBrush100}" Margin="0 2 0 0"><Run>*</Run> <Run Text="{Binding Path=.,Mode=OneWay}"></Run></TextBlock>
                        </DataTemplate>
                    </ItemsControl.ItemTemplate>
                </ItemsControl>
            </Grid>
        </Grid>
    </Grid>
</UserControl>