import QtQuick
import qs.config
import qs.widgets

Rectangle {
    id: root

    default property alias contentData: body.data
    property string title: ""
    property string subtitle: ""

    // An optional themed icon beside the title, for cards that represent a
    // specific thing rather than a topic -- an online account is one of four
    // that otherwise differ only by a line of small grey text. Empty by
    // default, and when empty the header lays out exactly as it did before.
    property string icon: ""
    property string iconFallback: "dialog-information-symbolic"

    width: parent ? parent.width : 680
    implicitHeight: body.implicitHeight + 30
    radius: Theme.cardRadius + 2
    color: Theme.alpha(Theme.bgPanel, 0.72)
    border.width: 1
    border.color: Theme.alpha(Theme.fg, 0.07)

    PrismEdge {
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        inset: root.radius
        opacity: 0.36
    }

    Column {
        id: body
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.top: parent.top
        anchors.margins: 15
        spacing: 0

        Row {
            width: parent.width
            visible: root.title !== ""
            spacing: root.icon === "" ? 0 : 10

            ThemedIcon {
                anchors.verticalCenter: parent.verticalCenter
                visible: root.icon !== ""
                width: root.icon === "" ? 0 : 22
                icon: root.icon
                iconFallback: root.iconFallback
                size: 22
            }

            Text {
                anchors.verticalCenter: parent.verticalCenter
                width: parent.width - (root.icon === "" ? 0 : 32)
                text: root.title
                color: Theme.fg
                font.family: Theme.fontFamily
                font.pixelSize: Theme.fontSizeLarge
                font.weight: Font.DemiBold
                elide: Text.ElideRight
            }
        }

        // The title's bottom padding lived on the title Text; it moves here so
        // the Row above can centre an icon against it without the padding
        // pushing the icon off-centre.
        Item {
            width: 1
            height: root.title === "" ? 0 : (root.subtitle === "" ? 10 : 3)
        }

        Text {
            width: parent.width
            visible: root.subtitle !== ""
            text: root.subtitle
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSizeSmall
            wrapMode: Text.WordWrap
            bottomPadding: 12
        }
    }
}