// 07-tabs/tabs.qml
// Tabs: TabBar + StackLayout. Common pattern for top-level navigation.
// Pure QML. Run with: qml6 tabs.qml

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

ApplicationWindow {
    width: 480; height: 320
    visible: true
    title: "QML 07: Tabs"

    ColumnLayout {
        anchors.fill: parent
        spacing: 0

        TabBar {
            id: bar
            Layout.fillWidth: true
            TabButton { text: "Home" }
            TabButton { text: "Settings" }
            TabButton { text: "About" }
        }

        StackLayout {
            id: stack
            Layout.fillWidth: true
            Layout.fillHeight: true
            currentIndex: bar.currentIndex

            // Home page
            Item {
                Column {
                    anchors.centerIn: parent
                    spacing: 12
                    Text { text: "Home"; font.pixelSize: 24; font.bold: true }
                    Text { text: "Welcome to the QML skill demo."; color: "#666" }
                }
            }

            // Settings page
            Item {
                Column {
                    anchors.fill: parent
                    anchors.margins: 16
                    spacing: 8
                    Text { text: "Settings"; font.pixelSize: 20; font.bold: true }
                    CheckBox { text: "Enable animations" }
                    CheckBox { text: "Show advanced" }
                    RowLayout {
                        Label { text: "Volume:" }
                        Slider {
                            Layout.fillWidth: true
                            from: 0
                            to: 100
                            value: 50
                            Accessible.name: "Volume"
                        }
                    }
                }
            }

            // About page
            Item {
                Column {
                    anchors.centerIn: parent
                    spacing: 8
                    Text { text: "About"; font.pixelSize: 24; font.bold: true }
                    Text { text: "QML 07: Tabs example"; color: "#666" }
                    Text { text: "Demonstrates TabBar + StackLayout"; color: "#888"; font.pixelSize: 12 }
                }
            }
        }
    }
}