<?xml version="1.0" encoding="utf-8"?>

<Page x:Class="Marechai.App.Presentation.Views.PhotoDetailPage"
      x:Name="PageRoot"
      xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
      xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
      xmlns:utu="using:Uno.Toolkit.UI"
      NavigationCacheMode="Disabled"
      Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

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

        <!-- Header with Back Button -->
        <Grid Grid.Row="0"
              Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
              BorderBrush="{ThemeResource DividerStrokeColorDefaultBrush}"
              BorderThickness="0,0,0,1"
              Padding="12,12,16,12">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="*" />
            </Grid.ColumnDefinitions>

            <Button Grid.Column="0"
                    Command="{Binding GoBackCommand}"
                    Style="{ThemeResource AlternateButtonStyle}"
                    ToolTipService.ToolTip="Go back"
                    Padding="8"
                    MinWidth="44"
                    MinHeight="44"
                    VerticalAlignment="Center">
                <FontIcon Glyph="&#xE72B;" FontSize="16" />
            </Button>

            <StackPanel Grid.Column="1"
                        Margin="12,0,0,0"
                        VerticalAlignment="Center">
                <TextBlock Text="Photo Details"
                           FontSize="20"
                           FontWeight="SemiBold"
                           TextTrimming="CharacterEllipsis" />
            </StackPanel>
        </Grid>

        <!-- Main Content -->
        <Grid Grid.Row="1">

            <!-- Loading State -->
            <StackPanel Visibility="{Binding IsLoading}"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Padding="32"
                        Spacing="16">
                <ProgressRing IsActive="True"
                              IsIndeterminate="True"
                              Height="64"
                              Width="64" />
                <TextBlock Text="Loading photo..."
                           FontSize="14"
                           TextAlignment="Center" />
            </StackPanel>

            <!-- Error State -->
            <StackPanel Visibility="{Binding ErrorOccurred}"
                        VerticalAlignment="Center"
                        HorizontalAlignment="Center"
                        Padding="24"
                        Spacing="16"
                        MaxWidth="400">
                <InfoBar IsOpen="True"
                         Severity="Error"
                         Title="Unable to Load Photo"
                         Message="{Binding ErrorMessage}"
                         IsClosable="False" />
            </StackPanel>

            <!-- Responsive Layout -->
            <utu:ResponsiveView Visibility="{Binding PhotoImageSource, Converter={StaticResource ObjectToVisibilityConverter}}">

                <!-- Narrow Template -->
                <utu:ResponsiveView.NarrowTemplate>
                    <DataTemplate>
                        <ScrollViewer VerticalScrollBarVisibility="Auto"
                                      HorizontalScrollBarVisibility="Disabled">
                            <StackPanel Padding="16" Spacing="24">

                                <!-- Photo -->
                                <Border Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                        BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                        BorderThickness="1"
                                        CornerRadius="8"
                                        Padding="8"
                                        MaxHeight="400"
                                        MinHeight="250">
                                    <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                                  VerticalScrollBarVisibility="Auto"
                                                  ZoomMode="Enabled"
                                                  MinZoomFactor="1.0"
                                                  MaxZoomFactor="5.0">
                                        <Image Source="{Binding PhotoImageSource}"
                                               Stretch="Uniform"
                                               HorizontalAlignment="Center"
                                               VerticalAlignment="Center" />
                                    </ScrollViewer>
                                </Border>

                                <!-- Metadata Sections -->
                                <StackPanel Spacing="16">

                                    <!-- Machine -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Machine" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoMachineName, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Name" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoMachineName}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoMachineCompany, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Company" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoMachineCompany}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Camera -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Camera" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoCameraManufacturer, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Manufacturer" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoCameraManufacturer}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoCameraModel, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Model" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoCameraModel}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoLensModel, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Lens" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoLensModel}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSoftwareUsed, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Software" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSoftwareUsed}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Exposure Settings -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Exposure Settings" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoAperture, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Aperture" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoAperture}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoExposureTime, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Exposure Time" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoExposureTime}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoExposureMode, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Exposure Mode" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoExposureMode}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoExposureProgram, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Exposure Program" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoExposureProgram}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoIsoRating, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="ISO Rating" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoIsoRating}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Flash & Light -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Flash &amp; Light" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoFlash, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Flash" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoFlash}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoLightSource, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Light Source" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoLightSource}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoMeteringMode, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Metering Mode" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoMeteringMode}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoWhiteBalance, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="White Balance" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoWhiteBalance}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Focal Length -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Focal Length" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoFocalLength, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Focal Length" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoFocalLength}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoFocalLengthEquivalent, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="35mm Equivalent" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoFocalLengthEquivalent}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoDigitalZoomRatio, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Digital Zoom" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoDigitalZoomRatio}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Image Properties -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Image Properties" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoColorSpace, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Color Space" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoColorSpace}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoContrast, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Contrast" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoContrast}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSaturation, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Saturation" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSaturation}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSharpness, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Sharpness" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSharpness}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoOrientation, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Orientation" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoOrientation}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSceneCaptureType, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Scene Capture Type" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSceneCaptureType}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Resolution -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Resolution" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoHorizontalResolution, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Horizontal Resolution" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoHorizontalResolution}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoVerticalResolution, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Vertical Resolution" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoVerticalResolution}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoResolutionUnit, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Resolution Unit" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoResolutionUnit}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- File & Metadata -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="File &amp; Metadata" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoOriginalExtension, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Original Format" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoOriginalExtension}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoCreationDate, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Date Taken" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoCreationDate}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoUploadDate, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Upload Date" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoUploadDate}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoExifVersion, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="EXIF Version" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoExifVersion}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoAuthor, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Author" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoAuthor}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoLicenseName, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="License" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoLicenseName}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoComments, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Comments" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoComments}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSource, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Source" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSource}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Additional Sensors -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Advanced" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSensingMethod, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Sensing Method" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSensingMethod}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSubjectDistanceRange, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Subject Distance Range" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSubjectDistanceRange}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <Border Height="24" />
                                </StackPanel>
                            </StackPanel>
                        </ScrollViewer>
                    </DataTemplate>
                </utu:ResponsiveView.NarrowTemplate>

                <!-- Wide Template -->
                <utu:ResponsiveView.WideTemplate>
                    <DataTemplate>
                        <Grid Padding="16" ColumnSpacing="24">
                            <Grid.ColumnDefinitions>
                                <ColumnDefinition Width="1*" />
                                <ColumnDefinition Width="1*" />
                            </Grid.ColumnDefinitions>

                            <!-- Photo on left -->
                            <Border Grid.Column="0"
                                    Background="{ThemeResource CardBackgroundFillColorDefaultBrush}"
                                    BorderBrush="{ThemeResource CardStrokeColorDefaultBrush}"
                                    BorderThickness="1"
                                    CornerRadius="8"
                                    Padding="8"
                                    VerticalAlignment="Top"
                                    MaxHeight="500">
                                <ScrollViewer HorizontalScrollBarVisibility="Auto"
                                              VerticalScrollBarVisibility="Auto"
                                              ZoomMode="Enabled"
                                              MinZoomFactor="1.0"
                                              MaxZoomFactor="5.0">
                                    <Image Source="{Binding PhotoImageSource}"
                                           Stretch="Uniform"
                                           HorizontalAlignment="Center"
                                           VerticalAlignment="Center" />
                                </ScrollViewer>
                            </Border>

                            <!-- Info on right -->
                            <ScrollViewer Grid.Column="1"
                                          VerticalScrollBarVisibility="Auto"
                                          HorizontalScrollBarVisibility="Disabled">
                                <StackPanel Spacing="16" Padding="8">
                                    <!-- Same content as narrow template -->
                                    <!-- Machine -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Machine" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoMachineName, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Name" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoMachineName}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoMachineCompany, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Company" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoMachineCompany}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Camera -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Camera" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoCameraManufacturer, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Manufacturer" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoCameraManufacturer}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoCameraModel, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Model" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoCameraModel}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoLensModel, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Lens" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoLensModel}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSoftwareUsed, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Software" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSoftwareUsed}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Exposure Settings -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Exposure Settings" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoAperture, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Aperture" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoAperture}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoExposureTime, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Exposure Time" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoExposureTime}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoExposureMode, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Exposure Mode" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoExposureMode}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoExposureProgram, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Exposure Program" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoExposureProgram}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoIsoRating, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="ISO Rating" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoIsoRating}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Flash & Light -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Flash &amp; Light" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoFlash, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Flash" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoFlash}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoLightSource, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Light Source" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoLightSource}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoMeteringMode, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Metering Mode" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoMeteringMode}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoWhiteBalance, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="White Balance" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoWhiteBalance}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Focal Length -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Focal Length" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoFocalLength, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Focal Length" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoFocalLength}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoFocalLengthEquivalent, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="35mm Equivalent" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoFocalLengthEquivalent}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoDigitalZoomRatio, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Digital Zoom" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoDigitalZoomRatio}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Image Properties -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Image Properties" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoColorSpace, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Color Space" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoColorSpace}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoContrast, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Contrast" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoContrast}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSaturation, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Saturation" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSaturation}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSharpness, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Sharpness" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSharpness}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoOrientation, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Orientation" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoOrientation}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSceneCaptureType, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Scene Capture Type" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSceneCaptureType}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Resolution -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Resolution" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoHorizontalResolution, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Horizontal Resolution" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoHorizontalResolution}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoVerticalResolution, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Vertical Resolution" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoVerticalResolution}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoResolutionUnit, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Resolution Unit" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoResolutionUnit}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- File & Metadata -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="File &amp; Metadata" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoOriginalExtension, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Original Format" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoOriginalExtension}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoCreationDate, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Date Taken" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoCreationDate}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoUploadDate, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Upload Date" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoUploadDate}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoExifVersion, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="EXIF Version" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoExifVersion}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoAuthor, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Author" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoAuthor}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoLicenseName, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="License" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoLicenseName}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoComments, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Comments" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoComments}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSource, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Source" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSource}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <!-- Advanced -->
                                    <StackPanel Spacing="12">
                                        <TextBlock Text="Advanced" FontSize="14" FontWeight="SemiBold" />
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSensingMethod, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Sensing Method" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSensingMethod}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                        <StackPanel Spacing="4" Visibility="{Binding PhotoSubjectDistanceRange, Converter={StaticResource StringToVisibilityConverter}}">
                                            <TextBlock Text="Subject Distance Range" FontSize="12" FontWeight="SemiBold" Foreground="{ThemeResource SystemBaseMediumColor}" />
                                            <TextBlock Text="{Binding PhotoSubjectDistanceRange}" FontSize="13" TextWrapping="Wrap" />
                                        </StackPanel>
                                    </StackPanel>

                                    <Border Height="24" />
                                </StackPanel>
                            </ScrollViewer>
                        </Grid>
                    </DataTemplate>
                </utu:ResponsiveView.WideTemplate>

            </utu:ResponsiveView>

        </Grid>

    </Grid>

</Page>
