exm-detail-view.blp

using Gtk 4.0;
using Adw 1;

template $ExmDetailView : Adw.NavigationPage {

  title: bind template.data as <$ExmUnifiedData>.name;

	Adw.ToolbarView {

		[top]
		Adw.HeaderBar header_bar {
			title-widget: Adw.WindowTitle title {
			  title: bind template.data as <$ExmUnifiedData>.name;
			  subtitle: bind template.data as <$ExmUnifiedData>.uuid;
			};
		}

		content: Adw.BreakpointBin {
			width-request: 360;
			height-request: 294;

			Adw.Breakpoint {
				condition ("max-width: 400sp")
				setters {
					ext_info_bar.orientation: vertical;
					header_suffix.orientation: vertical;
					header_suffix.spacing: 12;
					ext_install.halign: start;
				}
				apply => $breakpoint_apply_cb() swapped;
				unapply => $breakpoint_unapply_cb() swapped;
			}

			Gtk.Stack stack {
				vexpand: true;

				Gtk.StackPage {
					name: "page_spinner";

					child: Gtk.Box {
						orientation: vertical;
						spacing: 24;
						valign: center;

						Gtk.Spinner {
							spinning: true;
							height-request: 32;
							width-request: 32;
						}

						Gtk.Label {
							styles["title-1"]
							label: _("Loading Details");
						}
					};
				}

				Gtk.StackPage {
					name: "page_error";

					child: Adw.StatusPage {
						title: _("An Error Occurred");
						icon-name: "dialog-question-symbolic";
					};
				}

				Gtk.StackPage {
					name: "page_detail";
					child: Gtk.ScrolledWindow scroll_area {
						Adw.Clamp {
							maximum-size: 800;

							Gtk.Box {
								styles ["detail"]
								orientation: vertical;
								spacing: 24;

								Gtk.Box header {
									orientation: horizontal;
									spacing: 24;

									Gtk.Image ext_icon {
										halign: center;
										valign: center;
										pixel-size: 64;
									}

									Gtk.Box header_suffix {
										orientation: horizontal;
										spacing: 24;

										Gtk.Box {
											orientation: vertical;
											hexpand: true;
											valign: center;

											Gtk.Label ext_title {
												styles ["title-1"]
												xalign: 0;
												ellipsize: end;
												label: bind template.data as <$ExmUnifiedData>.name;
											}

											Gtk.Label ext_author {
												styles ["dim-label"]
												xalign: 0;
												ellipsize: end;
												label: bind template.data as <$ExmUnifiedData>.creator;
											}
										}

                    Gtk.Stack tools_stack {
                      Gtk.StackPage {
                        name: "uninstalled-tools-page";
                        child: $ExmInstallButton ext_install {
											  valign: center;
											  halign: center;
										  };
                      }
                      Gtk.StackPage {
                        name: "installed-tools-page";
                        child: Gtk.Box {
                          spacing: 16;

                          Gtk.Box {
                            styles ["linked"]

                            Gtk.Button delete_btn {
                             styles ["destructive-action"]

                             icon-name: "user-trash-symbolic";
                             valign: center;
                             halign: center;

                             action-name: 'page.remove';

                             tooltip-text: _("Remove the extension");
                           }

                            Gtk.Button prefs_btn {

	                            icon-name: "settings-symbolic";
	                            valign: center;
	                            halign: center;

	                            action-name: 'page.open-prefs';

	                            tooltip-text: _("Open extension preferences");
                            }
                          }

                          Gtk.Switch ext_toggle {
                            valign: center;
	                          active: bind template.extension as <$ExmExtension>.enabled;
	                          sensitive: bind template.extension as <$ExmExtension>.can-change;
	                          state-set => $on_state_changed();
                          }

                        };
                      }
                    }
									}
								}

								Gtk.Overlay ext_screenshot_container {
									[overlay]
									Gtk.Button ext_screenshot_popout_button {
										styles ["osd", "circular"]
										icon-name: "pip-out-symbolic";
										halign: end;
										valign: end;

										margin-top: 8;
										margin-bottom: 8;
										margin-start: 8;
										margin-end: 8;

										tooltip-text: _("Enlarge image");
										clicked => $screenshot_view_cb(template);
									}

									$ExmScreenshot ext_screenshot {}
								}

								Gtk.Box {
									orientation: vertical;

									Gtk.Label {
										styles ["title-4", "detail-heading"]

										label: _("Description");
										xalign: 0;
									}

									Gtk.Label ext_description {
										styles ["multiline"]
										xalign: 0;
										wrap: true;
										wrap-mode: word_char;
										selectable: true;

										label: bind template.data as <$ExmUnifiedData>.description;
									}
								}

								$ExmInfoBar ext_info_bar {}

								Gtk.Box {
									orientation: vertical;

									Gtk.Label {
										styles ["title-4", "detail-heading"]

										label: _("Links");
										xalign: 0;
									}

									Gtk.ListBox {
										styles ["boxed-list"]

										selection-mode: none;

										Adw.ActionRow link_homepage {
											[prefix]
											Gtk.Image {
												icon-name: "go-home-symbolic";
											}

											title: _("Homepage");
											activatable: true;
											action-name: "detail.open-homepage";

											// subtitle: bind template.data as <$ExmUnifiedData>.homepage;

											[suffix]
											Gtk.Image {
												styles ["dim-label"]
												icon-name: "external-link-symbolic";
											}
										}

										Adw.ActionRow link_extensions {
											[prefix]
											Gtk.Image {
												icon-name: "web-browser-symbolic";
											}

											title: _("View on Extensions");
											activatable: true;
											action-name: "detail.open-extensions";

											// subtitle: bind template.data as <$ExmUnifiedData>.link;

											[suffix]
											Gtk.Image {
												styles ["dim-label"]
												icon-name: "external-link-symbolic";
											}
										}
									}
								}

								Gtk.Box {
									orientation: vertical;

									Gtk.Label {
										styles ["title-4", "detail-heading"]

										label: _("User Reviews");
										xalign: 0;
									}

									// TODO: Abstract into common class
									Gtk.Stack comment_stack {
										vexpand: true;

										Gtk.StackPage {
											name: "page_spinner";

											child: Gtk.Image {
												icon-name: "content-loading-symbolic";
												icon-size: large;
												valign: center;
											};
										}

										Gtk.StackPage {
											name: "page_error";

											child: Adw.StatusPage {
												title: _("An Error Occurred");
												icon-name: "dialog-question-symbolic";
											};
										}

										Gtk.StackPage {
											name: "page_empty";

											child: Gtk.Label {
												label: _("There are no comments.");
												valign: start;
												xalign: 0;
											};
										}

										Gtk.StackPage {
											name: "page_comments";

											child: Gtk.Box {
												orientation: vertical;

												Gtk.FlowBox comment_box {
													max-children-per-line: 2;
													homogeneous: true;
													selection-mode: none;
													row-spacing: 12;
													column-spacing: 12;
												}
												Gtk.Button show_more_btn {
													label: _("_Show All Reviews");
													halign: center;
													margin-top: 10;
													use-underline: true;
												}
											};
										}
									}
								}
							}
						}
					};
				}
			}
		};
	}
}