// A Material surface with a title. Used everywhere instead of bare Panes so the
// pages share one radius, one padding and one elevation.
import QtQuick
import QtQuick.Controls.Material
import QtQuick.Layouts

Pane {
    id: card
    property string title: ""
    property string subtitle: ""
    default property alias content: inner.data

    Material.elevation: 1
    Material.roundedScale: Material.LargeScale
    padding: 18
    Layout.fillWidth: true

    background: Rectangle {
        radius: 18
        color: Material.dialogColor
        border.width: 1
        border.color: Material.dividerColor
    }

    ColumnLayout {
        anchors.fill: parent
        spacing: 10

        ColumnLayout {
            spacing: 2
            visible: card.title !== ""
            Layout.fillWidth: true
            Label { text: card.title; font.pixelSize: 16; font.weight: Font.DemiBold }
            Label {
                text: card.subtitle
                visible: card.subtitle !== ""
                font.pixelSize: 12
                opacity: 0.7
                Layout.fillWidth: true
                wrapMode: Text.WordWrap
            }
        }

        ColumnLayout {
            id: inner
            Layout.fillWidth: true
            Layout.fillHeight: true
            spacing: 10
        }
    }
}