using Gtk 4.0;
using Adw 1;

template $FlashcardsAppWindow : Adw.ApplicationWindow {
  title: _("Flashcards");

  Adw.Breakpoint {
    condition ( "max-width: 400sp" )
    setters {
      split_view.collapsed: true;
    }
  }

  Adw.NavigationSplitView split_view {
    [sidebar]
    Adw.NavigationPage sidebar{
      title: _("Categories");

      Box {
        orientation: vertical;
        hexpand: true;
        width-request: 360;

        Adw.HeaderBar {
          [end]
          Gtk.Button {
            icon-name: "list-add-symbolic";
            clicked => $on_add_category();
          }
        }

        Adw.Clamp {
          hexpand: true;
          
          ListBox topics {
            hexpand: true;
            selection-mode: single;
            margin-top: 12;
            margin-bottom: 12;
            margin-start: 12;
            margin-end: 12;
            row-selected => $on_category_selected();

            styles [
              "boxed-list",
            ]
          }
        }
      }
    }

    [content]
    Adw.NavigationPage content {
      title: _("Flashcards");
      Box {
        orientation: vertical;
        hexpand: true;

        Adw.HeaderBar {
          [end]
          Gtk.MenuButton {
            icon-name: "open-menu-symbolic";
            menu-model: primary_menu;
          }
        }

        Adw.Clamp {
          hexpand: true;
          child: Adw.Bin {
            margin-top: 12;
            margin-bottom: 12;
            margin-start: 12;
            margin-end: 12;

            styles [
              "card",
            ]
            child: Label {
              margin-top: 24;
              margin-bottom: 24;
              margin-start: 24;
              margin-end: 24;
              wrap: true;
              label: "Wie viel Grad hat ein Kreis?";
            };
          };
        }
      }
    }
  }
}

menu primary_menu {
  section {
    item {
    	label: _("About Flashcards");
      action: "app.about";
    }
  }
}