Rectangle {
    id: root
    property string title
    property int rootIndex: index
    property Component editButtonComponent: Item {}

    height: cell.height

    property SessionsViewProxy sessionsPresenter: SessionsViewProxy {

    }

    clip: true
    Behavior on height {
        NumberAnimation { duration: 200 }
    }
    Behavior on width {
        NumberAnimation { duration: 200 }
    }
    border.color: "lightblue"
    border.width: 2
    radius: 4
    Column {
        id: cell
        property bool collapsed: true
        width: parent.width
        padding: 4

        Item {
            width: parent.width - parent.padding*2
            height: 30

            ItemDelegate {
                text: root.title
                onClicked: cell.collapsed = !cell.collapsed
                anchors.right: iconsRow.left
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.left: parent.left
                anchors.margins: 2
            }

            Row {
                id: iconsRow
                anchors.right: parent.right
                anchors.top: parent.top
                anchors.bottom: parent.bottom
                anchors.margins: 2
                Loader {
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    sourceComponent: editButtonComponent
                }
                Button {
                    width: height
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    text: "⮟"
                    onClicked: cell.collapsed = !cell.collapsed
                    rotation: cell.collapsed ? 90 : 0
                    background: Item {

                    }
                    Behavior on rotation {
                        RotationAnimation { duration: 200 }
                    }
                }
            }
        }

        Rectangle {
            anchors.left: parent.left
            anchors.leftMargin: 32
            width: parent.width - parent.padding*2 - 32
            height: sessionsColumn.height
            color: "lightblue"
            radius: 4
            visible: !cell.collapsed
            Column {
                id: sessionsColumn
                width: parent.width
                padding: 1
                spacing: 1
                clip: true
                Repeater {
                    model: sessionsPresenter
                    delegate: SessionCell {
                        id: sessionCell
                        font.pixelSize: 12
                        text: model.created
                        width: parent.width - sessionsColumn.padding * 2
                    }
                }
            }

        }

     }
}