import QtQuick
import QtQuick.Layouts
import QtQuick.Controls.Material

Page {
    id: page

    ListView {
        anchors.fill: parent
        focus: true
        clip: true

        model: mainModel

        delegate: ListItemDelegate {}
        highlight: Rectangle {
            color: "lightgray"
            radius: 5
        }

        header: bannercomponent
        footer: Rectangle {
            width: parent.width
            height: 30
            gradient: mainGradient
        }
    }

    Component {
        //instantiated when header is processed
        id: bannercomponent
        Rectangle {
            id: banner
            width: parent.width
            height: 50
            gradient: mainGradient
            border {
                color: "lightgreen"
                width: 2
            }
            Text {
                anchors.centerIn: parent
                text: window.title
                font.pixelSize: 32
            }
        }
    }

    Gradient {
        id: mainGradient
        GradientStop {
            position: 0.0
            color: "#56FF56"
        }
        GradientStop {
            position: 0.66
            color: "#7ED24E"
        }
    }
}