import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 1024
    height: 800
    title: qsTr("Hello World")

    ListView {
            id: "navColumn"
            height: parent.height
            width: 300
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.margins: 2

            clip: true
    
            model: groups
    
            delegate: groupsDelegate
    
            section.property: "type"
            section.delegate: groupsSectionDelegate

            highlight: Rectangle { color: "lightsteelblue"; radius: 5 }

        }
    
    Component {
           id: groupsDelegate
   
           Item {
               width: ListView.view.width
               height: 40
               Column {
                   Text { text: '<b>' + title + '</b>' }
                   Text { text: groupid }
               }
           }
       }

    Component {
           id: groupsSectionDelegate

           BlueBox {
               width: ListView.view.width
               height: 20
               text: section
               fontColor: '#e0e0e0'
           }
       }

    ListModel {
        id: "groups"

        ListElement {type: "group"; title: "Work Friends"; groupid: "710829b408e8b368273cbc20b07f1c0d"}
        ListElement {type: "group"; title: "Cwtch Dev"; groupid: "a219b9740fc76367833cbc20b07d1cee" }
        ListElement {type: "group"; title: "Gaming Squad"; groupid: "930829b408e8b364563cbc20b07a6560" }

        ListElement {type: "bulletin"; title: "Vancouver Listings"; groupid: "890a47403e87368273cbc2ebf7f1cdc"}
        ListElement {type: "bulletin"; title: "Game Discussions"; groupid: "cc45892408123879273ec2a435cc4234"}
    }
}