using Gtk 4.0;

template $BzRichAppTile: $BzListTile {
  overflow: hidden;
  activated => $tile_clicked_cb();

  accessibility {
    described-by: description;
  }

  child: Box {
    orientation: vertical;

    styles [
      "rich-tile-card",
    ]

    $BzThemedRect picture_box {
      height-request: 200;

      styles [
        "rich-screenshot-box",
      ]

      light-color: bind template.group as <$BzEntryGroup>.light-accent-color as <string>;
      dark-color: bind template.group as <$BzEntryGroup>.dark-accent-color as <string>;

      child: Box {
        margin-start: 12;
        margin-end: 12;
        margin-top: 12;
        margin-bottom: 12;

        Image {
          icon-name: "image-missing-symbolic";
          pixel-size: 96;
          halign: center;
          valign: center;
          hexpand: true;

          visible: bind screenshot.visible inverted;
        }

        $BzRoundedPicture screenshot {
          halign: center;
          hexpand: true;
          valign: center;
          paintable: bind template.ui-entry as <$BzEntry>.thumbnail-paintable;
          radius: 6;

          visible: bind $invert_boolean($is_null(template.ui-entry as <$BzEntry>.thumbnail-paintable) as <bool>) as <bool>;
        }
      };
    }

    Box {
      margin-start: 12;
      margin-end: 12;
      margin-top: 12;
      margin-bottom: 12;
      orientation: horizontal;
      spacing: 15;
      height-request: 64;

      $BzTransactIcon {
        valign: center;
        halign: center;
        width-request: 64;
        height-request: 64;

        info: $BzTransactIconInfo transact_icon_info {
          group: bind template.group as <$BzEntryGroup>;
          paintable: bind template.ui_entry as <$BzEntry>.icon-paintable;
        };
      }

      Box {
        valign: center;
        hexpand: true;
        orientation: vertical;
        spacing: 5;

        Box {
          spacing: 6;
          Label title {
            css-name: "app-tile-title";

            styles [
              "heading",
            ]

            xalign: 0.0;
            ellipsize: end;
            label: bind template.group as <$BzEntryGroup>.title;
            max-width-chars: 18;
          }

          Image {
            styles [
              "verified",
            ]
            visible: bind template.group as <$BzEntryGroup>.is-verified;
            icon-name: "verified-checkmark-symbolic";
            pixel-size: 14;

            accessibility {
              label: _("Verified");
            }
          }
        }

        Label description {
          visible: bind $is_null(template.group as <$BzEntryGroup>.eol) as <bool>;
          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.group as <$BzEntryGroup>.description;

          styles [
            "dimmed",
          ]
        }

        Label {
          visible: bind $invert_boolean($is_null(template.group as <$BzEntryGroup>.eol) as <bool>) as <bool>;
          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: _("Stopped Receiving Updates");

          styles [
            "warning",
          ]
        }
      }

      Stack action_stack {
        transition-type: crossfade;
        valign: center;
        hhomogeneous: false;
        interpolate-size: true;
        visible-child-name: bind try {
          $get_visible_page(
            template.group as <$BzEntryGroup>.installable,
            template.group as <$BzEntryGroup>.removable,
            template.removable-at-start as <bool>,
            template.tracker as <$BzTransactionEntryTracker>,
            template.tracker as <$BzTransactionEntryTracker>.status as <$BzTransactionEntryStatus>
            ) as <string>,
          $get_visible_page(
            template.group as <$BzEntryGroup>.installable,
            template.group as <$BzEntryGroup>.removable,
            template.removable-at-start as <bool>,
            null as <$BzTransactionEntryTracker>,
            null as <$BzTransactionEntryStatus>
          ) as <string>
        };

        StackPage {
          name: "get";
          child: Button get_button {
            sensitive: bind $invert_boolean(
              $is_zero(template.group as <$BzEntryGroup>.installable-and-available) as <bool>
            ) as <bool>;

            styles [
              "medium-pill",
            ]

            valign: center;
            clicked => $install_button_clicked_cb(template);
          };
        }

        StackPage {
          name: "open";
          child: Button {
            sensitive: bind $invert_boolean(
              $is_zero(template.group as <$BzEntryGroup>.removable-and-available) as <bool>
            ) as <bool>;

            styles [
              "medium-pill",
            ]
            // TRANSLATORS: Button to launch an installed app
            label: _("Open");
            valign: center;
            clicked => $run_button_clicked_cb(template);
          };
        }

        StackPage {
          name: "uninstall";
          child: Button {
            sensitive: bind $invert_boolean(
              $is_zero(template.group as <$BzEntryGroup>.removable-and-available) as <bool>
            ) as <bool>;

            styles [
              "circular",
            ]

            icon-name: "user-trash-symbolic";
            tooltip-text: _("Uninstall");
            valign: center;
            clicked => $remove_button_clicked_cb(template);
          };
        }

        StackPage {
          name: "cancel";
          child: Button {
            styles [
              "circular",
            ]

            icon-name: "cross-large-circle-filled-symbolic";
            tooltip-text: _("Cancel");
            valign: center;
            clicked => $cancel_button_clicked_cb(template);
          };
        }

        StackPage {
          name: "empty";

          child: Box {};
        }
      }
    }
  };
}