using Gtk 4.0;

template $AudreyUiPlayQueueSong: Box {
  height-request: 48;
  spacing: 12;
  margin-start: 6;
  margin-end: 6;

  Box {
    width-request: 36;
    focusable: false;
    homogeneous: true;

    Image {
      visible: bind template.current;
      focusable: false;
      halign: end;
      icon-size: normal;
      icon-name: "media-playback-start";
    }

    Label {
      visible: bind template.current inverted;
      focusable: false;
      halign: end;
      justify: right;

      styles [
        "dim-label",
        "numeric"
      ]

      label: bind template.displayed_position;
    }
  }

  Image {
    visible: bind template.show_cover;
    margin-top: 1;
    margin-bottom: 1;
    pixel-size: 50;
    // paintable: bind template.song as <$AudreyPlaybinSong>.thumbnail;
  }

  Box title_box {
    styles [
      "header"
    ]

    focusable: false;
    hexpand: true;
    valign: center;

    Box {
      styles [
        "title"
      ]

      orientation: vertical;

      Label {
        styles [
          "title"
        ]

        focusable: false;
        xalign: 0;
        halign: start;
        hexpand: true;
        ellipsize: end;
        max-width-chars: 90;
        justify: fill;
        label: bind template.song as <$AudreyPlaybinSong>.title;
      }

      Label {
        styles [
          "subtitle"
        ]

        focusable: false;
        xalign: 0;
        halign: start;
        hexpand: true;
        ellipsize: end;
        max-width-chars: 90;
        justify: fill;
        label: bind template.song as <$AudreyPlaybinSong>.artist;
      }
    }
  }

  Label {
    focusable: false;
    halign: end;
    hexpand: true;
    single-line-mode: true;

    styles [
      "numeric",
      "dim-label"
    ]

    label: bind $format_duration(template.song as <$AudreyPlaybinSong>.duration) as <string>;
  }

  Button {
    focusable: true;
    // TODO icon-name: bind $star_button_icon_name (template.song as <$AudreyPlaybinSong>.starred) as <string>;
    icon-name: bind $star_button_icon_name() as <string>;

    styles [
      "flat"
    ]

    valign: center;
  }

  MenuButton {
    // visible: false;
    focusable: true;
    icon-name: "view-more";

    styles [
      "flat"
    ]

    valign: center;

    popover: PopoverMenu {
      menu-model: song-menu;
    };
  }

  DragSource {
    actions: move;
    propagation-phase: capture;
    prepare => $on_drag_prepare() swapped;
    drag-begin => $on_drag_begin() swapped;
  }

  DropTarget {
    actions: move;
    formats: "AudreyUiPlayQueueSong";
    preload: true;
    drop => $on_drop() swapped;
  }
}

menu song-menu {
  item ("View song", "song.view")
  item ("View artist", "song.view-artist")
  item ("View album", "song.view-album")
  item ("Share", "song.share")
  item ("Remove", "song.remove")
}