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 {
        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 {
              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 {
                  label: bind template.item as <$AudreyModelAlbum>.name;
                  ellipsize: end;
                  xalign: 0;
                  margin-start: 6;

                  styles [
                    "heading"
                  ]
                }

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

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