import QtQuick
import qs.config

Item {
    id: root

    default property alias trailingData: trailing.data
    property string icon: ""
    property string label: ""
    property string detail: ""
    property string value: ""
    property bool divider: true
    property int controlWidth: 150

    width: parent ? parent.width : 620
    implicitHeight: Math.max(56, copy.implicitHeight + 20)

    Text {
        id: iconLabel
        anchors.left: parent.left
        anchors.verticalCenter: parent.verticalCenter
        width: root.icon === "" ? 0 : 28
        visible: root.icon !== ""
        text: root.icon
        color: Theme.accent
        font.family: Theme.fontMono
        font.pixelSize: 17
        horizontalAlignment: Text.AlignHCenter
    }

    Column {
        id: copy
        anchors.left: iconLabel.visible ? iconLabel.right : parent.left
        anchors.leftMargin: iconLabel.visible ? 10 : 0
        anchors.right: trailing.left
        anchors.rightMargin: 16
        anchors.verticalCenter: parent.verticalCenter
        spacing: 3

        Text {
            width: parent.width
            text: root.label
            color: Theme.fg
            font.family: Theme.fontFamily
            font.pixelSize: Theme.fontSize
            font.weight: Font.Medium
            elide: Text.ElideRight
        }

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

    Item {
        id: trailing
        anchors.right: parent.right
        anchors.verticalCenter: parent.verticalCenter
        width: root.controlWidth
        height: 32

        Text {
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            visible: root.value !== ""
            text: root.value
            color: Theme.fgDim
            font.family: Theme.fontFamily
            font.features: Theme.tabularFigures
            font.pixelSize: Theme.fontSize
        }
    }

    Rectangle {
        anchors.left: copy.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        height: 1
        visible: root.divider
        color: Theme.alpha(Theme.fg, 0.065)
    }
}