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.pointSize: Tokens.font.size.large
		clearIcon.padding: Tokens.padding.extraSmall
		font.pointSize: Tokens.font.size.normal
		placeholderText: qsTr("Search settings")
		searchIcon.anchors.leftMargin: Tokens.padding.largeIncreased
		searchIcon.font.pointSize: Tokens.font.size.large

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