import { Backend } from "../Backend.slint";
import { VButton, ToggleButton, VText, Svg, Palette } from "@selenite";

export component SideBar inherits Rectangle {
	background: Palette.pane;

	VerticalLayout {
		height: parent.height;
		padding: 16px;
		spacing: 16px;
		VText {
			text: "Sources";
			font-size: 1.5rem;
		}
		VerticalLayout {
			alignment: space-between;
			vertical-stretch: 1;
			VerticalLayout {
				vertical-stretch: 1;
				spacing: 4px;
				ToggleButton {
					text: "All";
					text-alignment: left;
					active: Backend.no-source-selected;
					clicked => { Backend.source-clicked(-1) }
				}
				for item[index] in Backend.sources-selected: ToggleButton {
					text: item.name;
					text-alignment: left;
					active: item.selected;
					clicked => { Backend.source-clicked(index) }
				}
			}
			/*VerticalLayout {
				spacing: 4px;
				VButton {
					icon-svg: Svg.cog;
					text: "Settings";
					background: transparent;
					clicked => { Backend.settings-clicked() }
				}
			}*/
		}
	}
}