ValueButton {
     width: parent.width
     text: qsTr("Select a number")
     selector: ListSelector {
         model: 10
         currentIndex: 1
     }
}

ListView {
    anchors.fill: parent
    model: qsTr("This is a model constructed from a list of strings").split(" ")
}

ListView {
        id: view

        width: parent.width
        height: parent.height
        model: [
            { title: "Classic Game Room - ACCLAIM DUAL TURBO SNES Controller review", subTitle: "This is a list item", duration: "01:32", thumbnail: "file:///home/user/MyDocs/Classic Game Room - ACCLAIM DUAL TURBO SNES Controller review.jpg", progress: 17 },
        { title: "Classic Game Room - CASTLEVANIA CIRCLE OF THE MOON review", subTitle: "This is another list item", duration: "03:13", thumbnail: "file:///home/user/MyDocs/Classic Game Room - CASTLEVANIA_ CIRCLE OF THE MOON review.jpg", progress: 84 },
        { title: "Classic Game Room - CRYSIS 3 review", subTitle: "And another list item", duration: "06:43", thumbnail: "file:///home/user/MyDocs/Classic Game Room - CRYSIS 3 review.jpg", progress: 56 },
        { title: "Classic Game Room - PANASONIC 3DO console review model FZ-1", subTitle: "And another list item", duration: "10:15", thumbnail: "file:///home/user/MyDocs/Classic Game Room - PANASONIC 3DO console review model FZ-1.jpg", progress: 34 },
        { title: "Classic Game Room - SQUEEZE BOX review for Atari 2600", subTitle: "This is the last list item", duration: "07:27", thumbnail: "file:///home/user/MyDocs/Classic Game Room - SQUEEZE BOX review for Atari 2600.jpg", progress: 29 }
        ]
        delegate: ListItem {
            width: view.width
            height: 112

            ListItemRectangle {
                id: rectangle

                width: 122
                height: 92
                anchors {
                    left: parent.left
                    leftMargin: 10
                    verticalCenter: parent.verticalCenter
                }
                border {
                    width: 1
                    color: platformStyle.secondaryTextColor
                }
                color: "black"

                ListItemImage {
                    id: image

                    anchors {
                        fill: parent
                        margins: 1
                    }
                    source: modelData.thumbnail
                    smooth: true
                    opacity: mouseArea.pressed ? 0.5 : 1

                    ListItemRectangle {
                        id: background

                        width: 50
                        height: 20
                        anchors {
                            right: parent.right
                            bottom: parent.bottom
                        }
                        opacity: 0.7
                        color: "black"
                    }

                    ListItemText {
                        anchors.fill: background
                        font.pixelSize: 18
                        alignment: Qt.AlignCenter
                        text: modelData.duration
                    }
                }

                ListItemMouseArea {
                    id: mouseArea

                    anchors.fill: parent
                    onClicked: console.log("clicked")
                    onDoubleClicked: console.log("double clicked")
                    onPressAndHold: console.log("press and hold")
                }
            }

            ListItemText {
                anchors {
                    top: parent.top
                    bottom: parent.bottom
                    left: rectangle.right
                    right: progressBar.left
                    margins: 10
                }
                alignment: Qt.AlignLeft | Qt.AlignVCenter
                text: modelData.title + "\n\n" + modelData.subTitle
            }

            ListItemProgressBar {
                id: progressBar

                width: 150
                height: 70
                anchors {
                    right: parent.right
                    rightMargin: 10
                    verticalCenter: parent.verticalCenter
                }
                maximum: 100
                progress: modelData.progress
                text: progress + "%"
                textVisible: true
                textAlignment: Qt.AlignCenter
            }            
        }
    }