audrey/resources/album_carousel.blp

using Gtk 4.0;
using Adw 1;

template $AudreyUiAlbumCarousel: Adw.Bin {
  styles [
    "album-carousel"
  ]

  child: Box {
    orientation: vertical;

    Box {
      margin-start: 12;
      spacing: 6;
      height-request: 42;

      Label {
        single-line-mode: true;
        label: bind template.title;

        styles [
          "title-2"
        ]
      }

      Button {
        valign: center;
        icon-name: "view-refresh-symbolic";

        styles [
          "circular",
          "flat"
        ]
      }

      Box {
        halign: end;
        hexpand: true;
        valign: center;

        Button {
          icon-name: "go-previous-symbolic";

          styles [
            "flat"
          ]
        }

        Button {
          icon-name: "go-next-symbolic";

          styles [
            "flat"
          ]
        }
      }
    }

    Separator {
      styles [
        "spacer"
      ]
    }

    ScrolledWindow {
      hexpand: true;
      vscrollbar-policy: never;
      hscrollbar-policy: external;

      child: ListView {
        orientation: horizontal;

        styles [
          "albums"
        ]

        single-click-activate: true;

        model: NoSelection {
          model: bind template.model;
        };

        factory: BuilderListItemFactory {
          template ListItem {
            child: Box {
              styles [
                "album"
              ]

              orientation: vertical;
              margin-bottom: 6;
              spacing: 6;

              Image {
                icon-name: "media-optical-cd";
                pixel-size: 160;
                halign: center;
                hexpand: false;
              }

              Box {
                styles [
                  "labels"
                ]

                orientation: vertical;
                homogeneous: true;

                Label {
                  single-line-mode: true;
                  label: bind template.item as <$AudreyModelAlbum>.name;
                  ellipsize: end;
                  xalign: 0;
                  margin-start: 6;

                  styles [
                    "heading"
                  ]
                }

                Label {
                  single-line-mode: true;
                  label: bind template.item as <$AudreyModelAlbum>.artist;
                  ellipsize: end;
                  xalign: 0;
                  margin-start: 6;

                  styles [
                    "caption"
                  ]
                }
              }
            };
          }
        };
      };
    }
  };
}