import QtQuick
import QtQuick.Layouts

Rectangle {
  id: root
  anchors.left: parent.left
  anchors.right: parent.right
  visible: height > 0
  clip: true
  color: Theme.color8
  height: root.consoleOpen ? root.consoleHeight : 0
  opacity: root.consoleOpen ? 1 : 0
  z: 40

  property string title: ""
  property string status: ""
  property int consoleHeight: 320
  property bool consoleOpen: false

  Behavior on height { NumberAnimation { duration: 250; easing.type: Easing.InOutQuad } }
  Behavior on opacity { NumberAnimation { duration: 180 } }

  MouseArea {
    anchors.fill: parent
  }

  Rectangle {
    anchors.top: parent.top
    anchors.left: parent.left
    anchors.right: parent.right
    height: 1
    color: Theme.color5
  }

  ColumnLayout {
    anchors.fill: parent
    anchors.margins: 12
    spacing: 8

    RowLayout {
      Layout.fillWidth: true
      spacing: 6

      Text {
        text: root.title
        color: Theme.color2
        font.pixelSize: 13
        font.bold: true
      }

      Item { Layout.fillWidth: true }

      Text {
        text: root.status
        color: Theme.color7
        font.pixelSize: 11
      }
    }

    Rectangle {
      Layout.fillWidth: true
      implicitHeight: 1
      color: Theme.color5
    }

    Item {
      Layout.fillWidth: true
      Layout.fillHeight: true
    }
  }
}