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 ();
    drag-begin => $on_drag_begin ();
  }

  DropTarget {
    actions: move;
    formats: "AudreyUiPlayQueueSong";
    preload: true;

    drop => $on_drop ();
  }
}

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")
}