using Gtk 4.0;

template $UiPlaybar: Box {
  styles [
    "toolbar",
  ]

  CenterBox {
    hexpand: true;

    [start]
    Box {
      Picture {
        visible: bind template.show_cover_art;
        valign: center;
        halign: center;
        paintable: bind template.playing_cover_art;
      }

      Box {
        margin-start: 6;
        orientation: vertical;
        valign: center;

        Label {
          styles [ "heading" ]
          xalign: 0;
          halign: start;
          label: bind $song_title (template.song) as <string>;
          ellipsize: end;
        }

        Label {
          styles [ "caption" ]
          xalign: 0;
          label: bind $song_artist (template.song) as <string>;
          ellipsize: end;
        }

        Label {
          styles [ "caption" ]
          xalign: 0;
          label: bind $song_album (template.song) as <string>;
          ellipsize: end;
        }
      }
    }

    [center]
    Box {
      orientation: vertical;
      halign: center;
      hexpand: true;

      CenterBox {
        [start]
        Label play_position_label {
          styles [
            "caption",
            "numeric",
          ]

          label: bind $format_timestamp (template.playbin as <$Playbin>.position) as <string>;
        }

        [center]
        Scale play_position {
          name: "seek-scale";
          orientation: horizontal;
          width-request: 400;
          sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

          adjustment: Adjustment {
            lower: 0;
            value: bind template.playbin as <$Playbin>.position;
            upper: bind template.playbin as <$Playbin>.duration;
          };

          change-value => $on_play_position_seek ();
        }

        [end]
        Label play_duration {
          styles [
            "caption",
            "numeric",
          ]

          label: bind $format_timestamp (template.playbin as <$Playbin>.duration) as <string>;
        }
      }

      Box {
        halign: center;
        orientation: horizontal;

        Button {
          icon-name: "media-skip-backward";
          valign: center;
          sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

          clicked => $on_skip_backward_clicked ();
        }

        Button {
          icon-name: "media-seek-backward";
          valign: center;
          sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

          clicked => $seek_backward ();
        }

        Button {
          icon-name: bind $play_pause_icon_name (template.playbin as <$Playbin>.state as <$PlaybinState>) as <string>;
          valign: center;
          sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

          clicked => $on_play_pause_clicked ();
        }

        Button {
          icon-name: "media-seek-forward";
          valign: center;
          sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

          clicked => $seek_forward ();
        }

        Button {
          icon-name: "media-skip-forward";
          valign: center;
          sensitive: bind $playbin_active (template.playbin as <$Playbin>.state as <$PlaybinState>) as <bool>;

          clicked => $on_skip_forward_clicked ();
        }
      }
    }

    [end]
    Box {
      Button {
        icon-name: "non-starred";
        valign: center;
      }

      Button {
        icon-name: bind $mute_button_icon_name (template.playbin as <$Playbin>.mute) as <string>;
        valign: center;

        clicked => $on_mute_toggle ();
      }

      Scale {
        name: "volume-scale";
        orientation: horizontal;
        width-request: 130;

        adjustment: Adjustment {
          lower: 0;
          value: bind template.volume bidirectional;
          upper: 100;
        };
      }
    }
  }
}