import QtQuick
import QtQuick.Layouts
import qs.Components
import qs.Modules.Settings.NavPane
import ZShell.Config
import qs.Services

ColumnLayout {
	id: root

	required property SettingsState sState

	spacing: Tokens.spacing.largeIncreased

	SearchBar {
		id: searchField

		Layout.fillWidth: true
		bg.border.color: Colors.palette.m3outlineVariant
		bg.color: Colors.tPalette.m3surfaceContainerLowest
		clearIcon.font: Tokens.font.icon.medium
		clearIcon.padding: Tokens.padding.extraSmall
		font: Tokens.font.body.large
		placeholderText: qsTr("Search settings")
		searchIcon.anchors.leftMargin: Tokens.padding.largeIncreased
		searchIcon.fontStyle: Tokens.font.icon.medium

		Behavior on bg.border.color {
			CAnim {}
		}

		Binding {
			property: "searchOpen"
			target: root.sState
			value: searchField.text.length > 0
		}

		Binding {
			property: "searchText"
			target: root.sState
			value: searchField.text
		}
	}

	NavLocations {
		Layout.bottomMargin: -bottomMargin
		Layout.fillHeight: true
		Layout.fillWidth: true
		Layout.topMargin: -topMargin
		sState: root.sState
	}
}