import QtQuick 2.0
import Ubuntu.Components 0.1
import Ubuntu.Components.Popups 0.1
import Ubuntu.Components.ListItems 0.1 as ListItem

Rectangle {
    id: container

    property var popover: null

    width: units.gu(40)
    height: units.gu(40)
    color: "#333333"

    function openPopover() {
        container.popover = PopupUtils.open(popoverComponent, button,
                                                      {
                                                          "contentWidth": button.width
                                                      }
                                                     )
    }

    ListModel {
        id: listModel

        ListElement { name: "Red" }
        ListElement { name: "Green" }
        ListElement { name: "Blue" }
    }

    Button {
            id: button
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.margins: units.gu(1)
            height: units.gu(8)
            text: "click to popup the popover"

            onClicked: container.openPopover()
    }

    Component {
        id: popoverComponent
        Popover {
            id: popover

            Column {
                anchors {
                    top: parent.top
                    left: parent.left
                    right: parent.right
                }

                Repeater {
                    model: listModel

                    delegate: ListItem.Standard {
                        text: name
                    }
                }
            }
        }
    }
}