using Gtk 4.0;
using Adw 1;

template $UserDataPage : Adw.BreakpointBin {
    width-request: 1;
    height-request: 1;

    Adw.Breakpoint bpt {
        condition ("max-width: 585")

        setters {
            header_bar.title-widget: null;
            // header_bar.show-title: false;
            switcher_bar.reveal: true;
            switcher_bar.visible: true;
        }
    }

    Adw.NavigationPage {
        title: _("User Data");
        Stack status_stack {
            Adw.ToolbarView loading_view {
                [top]
                Adw.HeaderBar {
                    [start]
                    $SidebarButton {}
                }
            }
            Adw.ToolbarView main_view {
                [top]
                Adw.HeaderBar header_bar {
                    title-widget:
                        Adw.ViewSwitcher {
                            stack: stack;
                            policy: wide;
                        }
                    ;
                    [start]
                    $SidebarButton {}
                    [start]
                    ToggleButton search_button {
                        icon-name: "system-search-symbolic";
                        tooltip-text: _("Search User Data");
                    }
                    [start]
                    Button open_button {
                        icon-name: "folder-open-symbolic";
                        tooltip-text: _("Open User Data Folder");
                    }
                    [end]
                    MenuButton sort_button {
                        popover: sort_pop;
                        icon-name: "vertical-arrows-long-symbolic";
                        tooltip-text: _("Sort User Data");
                    }
                    [end]
                    ToggleButton select_button {
                        icon-name: "selection-mode-symbolic";
                        tooltip-text: _("Select User Data");
                    }
                }
                [top]
                Adw.Clamp {
                    SearchBar search_bar {
                        search-mode-enabled: bind search_button.active bidirectional;
                        SearchEntry search_entry {
                            editable: false;
                            hexpand: true;
                            placeholder-text: _("Search User Data");
                        }
                    }
                }
                [bottom]
                Revealer revealer {
                    reveal-child: bind select_button.active;
                    transition-type: slide_up;
                    [center]
                    Box bottom_bar {
                        styles ["toolbar"]
                        hexpand: true;
                        homogeneous: true;
                        Button select_all_button {
                            styles ["raised"]
                            Adw.ButtonContent {
                                icon-name: "selection-mode-symbolic";
                                label: _("Select All");
                                can-shrink: true;
                            }
                        }
                        Button copy_button {
                            sensitive: false;
                            styles ["raised"]
                            Adw.ButtonContent {
                                icon-name: "edit-copy-symbolic";
                                label: _("Copy");
                                can-shrink: true;
                            }
                        }
                        Button install_button {
                            visible: false;
                            sensitive: false;
                            styles ["raised"]
                            Adw.ButtonContent {
                                icon-name: "arrow-pointing-at-line-down-symbolic";
                                label: _("Install");
                                can-shrink: true;
                            }
                        }
                        Button trash_button {
                            sensitive: false;
                            styles ["raised"]
                            Adw.ButtonContent {
                                icon-name: "user-trash-symbolic";
                                label: _("Move to Trash");
                                can-shrink: true;
                            }
                        }
                        MenuButton more_button {
                            visible: false;
                            sensitive: false;
                            popover: more_popover;
                            styles ["raised"]
                            Adw.ButtonContent {
                                icon-name: "view-more-symbolic";
                                label: _("More");
                                can-shrink: true;
                            }
                        }
                    }
                }
                [bottom]
                Adw.ViewSwitcherBar switcher_bar {
                    stack: stack;
                    visible: false;
                }
                Adw.ToastOverlay toast_overlay {
                    Adw.ViewStack stack {
                    }
                }
            }
        }
    }
}

Popover more_popover {
    styles ["menu"]
    ListBox more_menu {
        Label more_install {
            label: _("Install");
            halign: start;
        }
        Label more_trash {
            label: _("Move to Trash");
            halign: start;
        }
    }
}

Popover sort_pop {
    styles ["menu"]
    Box {
        orientation: vertical;
        margin-start: 6;
        margin-end: 6;
        margin-top: 6;
        margin-bottom: 6;
        Box {
            homogeneous: true;
            spacing: 3;
            ToggleButton sort_ascend {
                styles ["flat"]
                Adw.ButtonContent {
                    icon-name: "view-sort-ascending-symbolic";
                    label: _("Ascending");
                }
            }
            ToggleButton sort_descend {
                group: sort_ascend;
                styles ["flat"]
                Adw.ButtonContent {
                    icon-name: "view-sort-descending-symbolic";
                    label: _("Descending");
                }
            }
        }
        Separator {
        }
        Box {
            homogeneous: true;
            spacing: 3;
            ToggleButton sort_name {
                styles ["flat"]
                Adw.ButtonContent {
                    icon-name: "font-x-generic-symbolic";
                    label: _("Name");
                }
            }
            ToggleButton sort_id {
                group: sort_name;
                styles ["flat"]
                Adw.ButtonContent {
                    icon-name: "tag-outline-symbolic";
                    label: _("ID");
                }
            }
            ToggleButton sort_size {
                group: sort_name;
                styles ["flat"]
                Adw.ButtonContent {
                    icon-name: "harddisk-symbolic";
                    label: _("Size");
                }
            }
        }
    }
}
