import QtQuick
import QtQuick.Layouts
import QtQuick.Controls
import FluentUI.Controls
import FluentUI.impl
import Gallery

ScrollablePage {

    title: qsTr("Timeline")
    columnSpacing: 24

    CardHighlight{
        Layout.fillWidth: true
        showDisabled: false
        codeSnippet:
            `import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import FluentUI.Controls
import FluentUI.impl

ColumnLayout{
    width: parent.width
    ListModel{
        id:list_model
        ListElement{
            text: "Create a services site 2015-09-01"
        }
        ListElement{
            text: "Create a services site 2015-09-01"
        }
        ListElement{
            text: "Solve initial network problems 1<br>Solve initial network problems 2<br>Solve initial network problems 3 2015-09-01"
        }
        ListElement{
            text: "Technical testing 1<br>Technical testing 2<br>Technical testing 3 2015-09-01"
        }
        ListElement{
            text: "Technical testing 1<br>Technical testing 2<br>Technical testing 3 2015-09-01"
        }
        ListElement{
            text: "Custom color testing"
            dotDelegate:()=>com_dot
        }
    }
    Component{
        id:com_dot
        Rectangle{
            width: 16
            height: 16
            radius: 8
            border.width: 4
            border.color: Theme.dark ? Colors.teal.lighter() : Colors.teal.dark()
        }
    }
    ComboBox{
        id: combox_mode
        model: [{title:"Left",value:TimelineType.Left}, {title:"Right",value:TimelineType.Right}  , {title:"Alternate",value:TimelineType.Alternate}]
        textRole: "title"
        currentIndex: 0
    }
    Timeline{
        id: time_line
        Layout.fillWidth: true
        Layout.topMargin: 20
        Layout.bottomMargin: 20
        mode: combox_mode.currentValue.value
        model: list_model
    }
}
`}

}