using Gtk 4.0;

template $BzArticleTile: $BzListTile {
  overflow: hidden;
  activated => $tile_clicked_cb();
  halign: fill;
  width-request: 275;

  accessibility {
    described-by: description;
  }

  child: Box {
    orientation: vertical;

    styles [
      "rich-tile-card",
    ]

    Box picture_box {
      styles [
        "rich-screenshot-box",
      ]
      Image {
        icon-name: "image-missing-symbolic";
        pixel-size: 96;
        halign: center;
        valign: center;
        hexpand: true;

        visible: bind picture.visible inverted;
      }


      $BzAspectPicture picture {
        hexpand: true;
        ratio: bind try{$get_aspect_ratio(template.aspect-ratio) as <float>, 1.77};
        paintable: bind $get_image(template.article as <$BzCuratedArticle>.image) as <$GdkPaintable>;
      }
    }

    Box {
      margin-start: 12;
      margin-end: 12;
      margin-top: 12;
      margin-bottom: 12;
      orientation: vertical;
      spacing: 5;
      height-request: 60;

      Label title {
        css-name: "app-tile-title";

        styles [
          "heading",
        ]

        ellipsize: end;
        xalign: 0;
        label: bind template.article as <$BzCuratedArticle>.title;
        max-width-chars: 18;
      }

      Label description {
        css-name: "app-tile-description";
        xalign: 0.0;
        yalign: 0.0;
        wrap: true;
        wrap-mode: word_char;
        ellipsize: end;
        vexpand: true;
        lines: 2;
        max-width-chars: 15;
        single-line-mode: true;
        label: bind template.article as <$BzCuratedArticle>.subtitle;
        height-request: 36;

        styles [
          "dimmed",
        ]
      }
    }
  };
}