<UserControl xmlns="https://github.com/avaloniaui"
             xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
             xmlns:vm="using:DodoSSH.Client.Shell.ViewModels"
             x:Class="DodoSSH.Client.App.Views.TitleBar"
             x:DataType="vm:MainWindowViewModel">

  <!--
    The window's own titlebar, because the design draws one.

    The window asks Windows for no chrome at all, so everything a titlebar does has to be here: dragging,
    the double-click to maximise, and three buttons. That is a real cost, and the reason it is worth paying
    is that a 38-pixel grey system bar above a near-black application is the one part of the window that
    would look borrowed.

    It sits above the terminal rather than over it, which matters more than it looks: the terminal is a
    native child window that composites above anything Avalonia draws in the same rectangle, so a titlebar
    overlapping it would be painted underneath and its close button would not be clickable.
  -->

  <Border Height="44" Background="{StaticResource Chrome}"
          BorderBrush="{StaticResource Border}" BorderThickness="0,0,0,1"
          PointerPressed="OnDrag" DoubleTapped="OnToggleMaximised">

    <Grid ColumnDefinitions="Auto,*,Auto" Margin="14,0,10,0">

      <StackPanel Grid.Column="0" Orientation="Horizontal" Spacing="8" VerticalAlignment="Center">
        <!--
          Filled rather than outlined since v2, and rounded. The same mark the phone's header draws and the
          same one the launcher icon carries, so the three cannot drift.
        -->
        <Border Width="20" Height="20" CornerRadius="6" Background="{StaticResource Accent}">
          <TextBlock Classes="mono" Text="&gt;_" FontSize="10" FontWeight="Bold"
                     Foreground="{StaticResource AccentInk}"
                     HorizontalAlignment="Center" VerticalAlignment="Center" />
        </Border>
        <!--
          The product's name is the one string in this bar that is not machine-shaped, so v2 sets it in the
          sans face while the address, the account and the fingerprint beside it stay monospaced.
        -->
        <TextBlock Text="DodoSSH" FontSize="14" FontWeight="SemiBold"
                   Foreground="{StaticResource Text}" VerticalAlignment="Center" />
        <!--
          The design puts an organisation here — "dodotech / platform". There are no organisations: the
          server has team tables and no endpoint that reads them, so the only name this application can
          truthfully print is the one on the vault it has open. The account is beside it because a machine
          can be enrolled to one account at a time and knowing which is the point of the chip.
        -->
        <Border Classes="chip" IsVisible="{Binding IsUnlocked}">
          <TextBlock Text="{Binding Vault.VaultName}" />
        </Border>
        <TextBlock Classes="mono" Text="{Binding AccountName}" FontSize="11"
                   Foreground="{StaticResource TextFaint}" VerticalAlignment="Center"
                   TextTrimming="CharacterEllipsis" MaxWidth="220" />
      </StackPanel>

      <!--
        The quick-connect box. It searches hosts and nothing else — the design's box also promises "run
        command", and there is no snippet or saved-command item type for it to run. Clicking it is the same
        as Ctrl+K, which is what the window binds; the design says ⌘K, and this is a Windows build.
      -->
      <!--
        Stretch-to-a-maximum, not a fixed width. The design draws this box at exactly 380 and centred, and
        stating that as a Width on the Border is what makes it wrong: the Button around it is free to
        shrink when the account name or the vault chip beside it is long, and a Border that will not shrink
        with it arranges outside its own parent — over the name on one side and over the window buttons on
        the other. MaxWidth on the stretching button gives the same 380 whenever there is room and gives
        way when there is not.
      -->
      <Button Grid.Column="1" Classes="flat" MaxWidth="380" Height="28" Margin="16,0"
              HorizontalAlignment="Stretch" HorizontalContentAlignment="Stretch"
              Command="{Binding ToggleSearchCommand}" IsEnabled="{Binding IsUnlocked}">
        <Border Background="{StaticResource Field}" BorderBrush="{StaticResource BorderMid}"
                BorderThickness="1" CornerRadius="8" Padding="10,0">
          <Grid ColumnDefinitions="Auto,*,Auto">
            <TextBlock Grid.Column="0" Text="⌕" FontSize="13"
                       Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />
            <!--
              "Search or connect…", which is what it does: the palette connects on Enter. Not the design's
              wider promise of running a command — a snippet is inserted from its own screen, and a box that
              offered to run one would be offering something this palette does not do.
            -->
            <TextBlock Grid.Column="1" Text="Search or connect…" FontSize="13" Margin="8,0"
                       Foreground="{StaticResource TextFaint}" VerticalAlignment="Center" />
            <Border Grid.Column="2" BorderBrush="{StaticResource BorderMid}" BorderThickness="1"
                    CornerRadius="4" Padding="5,1" VerticalAlignment="Center">
              <TextBlock Classes="mono" Text="CTRL K" FontSize="10"
                         Foreground="{StaticResource TextFaint}" />
            </Border>
          </Grid>
        </Border>
      </Button>

      <StackPanel Grid.Column="2" Orientation="Horizontal" Spacing="10" VerticalAlignment="Center">

        <!--
          The design's dot is always green and always says SYNCED. This one says what is true: green only
          while a connection is held and this machine's outbox is empty, and the word changes to the number
          of changes still waiting, or to OFFLINE. A permanently green light is the same thing as no light.
        -->
        <StackPanel Orientation="Horizontal" Spacing="5" VerticalAlignment="Center"
                    IsVisible="{Binding IsUnlocked}"
                    ToolTip.Tip="Green means a connection is held and nothing this machine changed is still waiting to be sent. It does not mean a colleague's change has arrived — that is pulled on a timer.">
          <Ellipse Classes="dot" Classes.live="{Binding IsFullySynced}" VerticalAlignment="Center" />
          <TextBlock Classes="mono" Text="{Binding SyncLabel}" FontSize="9.5" FontWeight="SemiBold"
                     LetterSpacing="1" Foreground="{StaticResource TextDim}" VerticalAlignment="Center" />
        </StackPanel>

        <Border Width="1" Height="16" Background="{StaticResource Border}"
                IsVisible="{Binding IsUnlocked}" />

        <StackPanel Orientation="Horizontal" Spacing="2">
          <Button Classes="flat" Width="26" Height="24" Click="OnMinimise"
                  ToolTip.Tip="Minimise">
            <TextBlock Text="–" FontSize="13" Foreground="{StaticResource TextDim}"
                       HorizontalAlignment="Center" VerticalAlignment="Center" />
          </Button>
          <Button Classes="flat" Width="26" Height="24" Click="OnToggleMaximised"
                  ToolTip.Tip="Maximise">
            <TextBlock Text="▢" FontSize="11" Foreground="{StaticResource TextDim}"
                       HorizontalAlignment="Center" VerticalAlignment="Center" />
          </Button>
          <Button Classes="flat close" Width="26" Height="24" Click="OnClose"
                  ToolTip.Tip="Close DodoSSH. This ends every shell it has open.">
            <TextBlock Text="✕" FontSize="12" HorizontalAlignment="Center" VerticalAlignment="Center" />
          </Button>
        </StackPanel>

      </StackPanel>

    </Grid>

  </Border>

</UserControl>
