$C = "../Common.ui";
$Sounds = "../Sounds.ui";

$C.@PageOverlay #MainPage {
  Anchor: (Top: 130);
}

Group #FormContainer {
  LayoutMode: Top;

  $C.@DecoratedContainer {
    Anchor: (Left: 50, Top: 170, Width: 420);

    #Title {
      $C.@Title {
        @Text = %server.customUI.imageImport.title;
      }
    }

    #Content {
      LayoutMode: Top;
      Padding: (Full: 16);

      Label {
        Anchor: (Bottom: 12);
        Style: (...$C.@DefaultLabelStyle, Wrap: true, FontSize: 14, TextColor: #94969a);
        Text: %server.customUI.imageImport.description;
      }

      Group {
        LayoutMode: Top;
        Anchor: (Bottom: 8);
        Background: (TexturePath: "../Common/ContainerPanelPatch.png", Border: 4);
        Padding: (Full: 12);

        Group #ImagePath {
          LayoutMode: Top;
          Anchor: (Bottom: 8);

          Label {
            Text: %server.customUI.imageImport.filePath;
            Anchor: (Bottom: 4);
            Style: $C.@DefaultLabelStyle;
          }

          Group {
            LayoutMode: Left;
            Anchor: (Height: 35);

            $C.@TextField #Input {
              @Anchor = (Left: 0, Right: 8);
              FlexWeight: 1;
              MaxLength: 1024;
              PlaceholderText: "imports/images/image.png";
            }

            $C.@SecondaryTextButton #BrowseButton {
              @Anchor = (Width: 140);
              Text: %server.customUI.browse;
            }
          }
        }

        Group #MaxSizeInput {
          LayoutMode: Left;
          Anchor: (Bottom: 8, Height: 35);

          Label {
            Text: %server.customUI.imageImport.maxSize;
            Anchor: (Width: 120);
            Style: (...$C.@DefaultLabelStyle, VerticalAlignment: Center);
          }

          $C.@NumberField #Input {
            @Anchor = (Width: 100);
            Format: (
              MaxDecimalPlaces: 0,
              Step: 8,
              MinValue: 1,
              MaxValue: 512
            );
          }
        }

        Group #OrientationInput {
          LayoutMode: Left;
          Anchor: (Bottom: 8, Height: 35);

          Label {
            Text: %server.customUI.imageImport.orientation;
            Anchor: (Width: 120);
            Style: (...$C.@DefaultLabelStyle, VerticalAlignment: Center);
          }

          $C.@DropdownBox #Input {
            Anchor: (Width: 160, Height: $C.@DropdownBoxHeight);
          }
        }

        Group #OriginInput {
          LayoutMode: Left;
          Anchor: (Height: 35);

          Label {
            Text: %server.customUI.imageImport.origin;
            Anchor: (Width: 120);
            Style: (...$C.@DefaultLabelStyle, VerticalAlignment: Center);
          }

          $C.@DropdownBox #Input {
            Anchor: (Width: 160, Height: $C.@DropdownBoxHeight);
          }
        }
      }

      Label #StatusText {
        Anchor: (Vertical: 8);
        Style: (...$C.@DefaultLabelStyle, Wrap: true, TextColor: #cfd8e3, FontSize: 14);
        Visible: false;
      }

      Group {
        LayoutMode: Top;
        Anchor: (Top: 6);

        $C.@TextButton #ImportButton {
          Text: %server.customUI.imageImport.importButton;
        }
      }
    }
  }
}

// Browser modal page for file selection
$C.@PageOverlay #BrowserPage {
  LayoutMode: Middle;
  Visible: false;

  $C.@DecoratedContainer {
    Anchor: (Width: 600, Height: 550);

    #Title {
      $C.@Title {
        @Text = %server.customUI.imageImport.browserTitle;
      }
    }

    #Content {
      LayoutMode: Top;
      Padding: (Full: 16);

      // Current path display
      Label #CurrentPath {
        Anchor: (Bottom: 8, Horizontal: 4);
        Style: (...$C.@DefaultLabelStyle, FontSize: 12, TextColor: #6a7d8f);
        Text: "/";
      }

      // Browser content (search + file list)
      Group #BrowserContent {
        FlexWeight: 1;

        Group {
          LayoutMode: Top;

          Group {
            LayoutMode: Left;
            Anchor: (Bottom: 10, Height: $C.@DropdownBoxHeight);

            $C.@TextField #SearchInput {
              @Anchor = (Left: 0);
              FlexWeight: 1;
              PlaceholderText: %server.customUI.imageImport.searchPlaceholder;
            }
          }

          Group #FileList {
            FlexWeight: 1;
            LayoutMode: TopScrolling;
            ScrollbarStyle: $C.@DefaultScrollbarStyle;
          }
        }
      }

      Group #BrowserButtons {
        LayoutMode: Center;
        Anchor: (Top: 12);

        $C.@TextButton #SelectButton {
          @Sounds = $Sounds.@SaveSettings;
          @Anchor = (Right: 4);
          Text: %server.customUI.select;
          FlexWeight: 1;
        }

        $C.@SecondaryTextButton #CancelButton {
          @Sounds = $Sounds.@ButtonsCancel;
          @Anchor = (Left: 4);
          Text: %server.customUI.cancel;
          FlexWeight: 1;
        }
      }
    }
  }
}

$C.@BackButton {}
