using Gtk 4.0;
using Adw 1;

template $GradiaScreenshotGuidePage : Adw.NavigationPage {
        name: "screenshot-guide";
        title: _("Screenshot Shortcut Guide");
        child: Adw.ToolbarView {
          [top]
          Adw.HeaderBar {
            show-back-button: true;
            show-title: false;
          }

          content: Gtk.ScrolledWindow {
            hscrollbar-policy: never;
            child: Adw.Clamp {
              maximum-size: 600;
              tightening-threshold: 400;
              child: Gtk.Box {
                orientation: vertical;
                spacing: 16;
                margin-top: 32;
                margin-bottom: 32;
                margin-start: 24;
                margin-end: 24;

                Gtk.Box {
                  orientation: vertical;
                  spacing: 8;

                  Gtk.Label {
                    label: _("Shortcut Setup Instructions");
                    styles ["title-1"]
                    halign: start;
                    wrap:true;
                    selectable: true;
                  }
                }

                Gtk.Box {
                  orientation: vertical;
                  spacing: 24;

                  Gtk.Label {
                    label: _("If you'd like the app to <b>open automatically</b> after taking a screenshot, you can set up a custom keyboard shortcut:\n\n<b>Steps:</b>\n1. Go to <b>Settings</b> → <b>Keyboard</b> → <b>View and Customize Shortcuts</b> → <b>Custom Shortcuts</b>.\n2. Click the <b>+</b> button to create a new shortcut.\n3. Set the <b>Name</b> to something like <i>Open Gradia with Screenshot</i>.\n4. For the <b>Command</b>, copy one of the commands below:");
                    use-markup: true;
                    wrap: true;
                    halign: start;
                    selectable: true;
                  }

                  Gtk.Box {
                    orientation: vertical;
                    spacing: 20;

                    Gtk.Box {
                      orientation: vertical;
                      spacing: 12;

                      Gtk.Label {
                        label: _("Interactive Screenshot");
                        styles ["title-4"]
                        halign: start;
                        selectable: true;
                      }

                      Gtk.Label{
                        label: _("Allows you to select an area to screenshot");
                        styles ["caption", "dimmed"]
                        halign: start;
                        selectable: true;
                      }

                      Gtk.Entry interactive_entry {
                        editable: false;
                        text: "";
                        styles ["monospace"]
                        secondary-icon-name: "edit-copy-symbolic";
                        secondary-icon-tooltip-text: _("Copy to clipboard");
                      }
                    }

                    Gtk.Box {
                      orientation: vertical;
                      spacing: 12;

                      Gtk.Label {
                        label: _("Full Screen Screenshot");
                        styles ["title-4"]
                        halign: start;
                        selectable: true;
                      }

                      Gtk.Label{
                        label: _("Takes a screenshot of all screens instantly");
                        styles ["caption", "dimmed"]
                        halign: start;
                        selectable: true;
                      }

                      Gtk.Entry fullscreen_entry {
                        editable: false;
                        text: "";
                        styles ["monospace"]
                        secondary-icon-name: "edit-copy-symbolic";
                        secondary-icon-tooltip-text: _("Copy to clipboard");
                      }
                    }
                    Gtk.Label {
                      label: _("5. Assign a keyboard shortcut of your choice (<tt>Ctrl + Print</tt> should be free by default).");
                      use-markup: true;
                      wrap: true;
                      selectable: true;
                      halign: start;
                    }
                    Gtk.Separator {
                      orientation: horizontal;
                      hexpand: true;
                      visible: false;
                    }
                    Gtk.Box {
                      orientation: vertical;
                      spacing: 12;
                      visible: false;

                      Gtk.Label {
                        label: _("Delayed Screenshot");
                        styles ["title-4"]
                        halign: start;
                        selectable: true;
                      }

                      Gtk.Label{
                        label: _("Delay the capture by a given duration (in milliseconds).");
                        styles ["caption", "dimmed"]
                        halign: start;
                        selectable: true;
                      }

                      Gtk.Entry delayed_entry {
                        editable: false;
                        text: "--delay=1000";
                        styles ["monospace"]
                        secondary-icon-name: "edit-copy-symbolic";
                        secondary-icon-tooltip-text: _("Copy to clipboard");
                      }
                    }
                  }
                }
              };
            };
          };
        };
}
