import QtQuick 2.2
import Sailfish.Silica 1.0

// Riga "titolo + sottotitolo" a sinistra e valore grande a destra: e' la forma
// delle schede dell'app ufficiale (temperatura della casa, acqua calda...).
Item {
    id: row

    property string title: ""
    property string subtitle: ""
    property string value: ""
    property color valueColor: Theme.primaryColor

    width: parent ? parent.width : 0
    height: Math.max(testo.height, valore.height)

    Column {
        id: testo
        anchors {
            left: parent.left
            right: valore.left
            rightMargin: Theme.paddingMedium
            verticalCenter: parent.verticalCenter
        }
        spacing: 0

        Label {
            width: parent.width
            text: row.title
            color: Theme.primaryColor
            font.pixelSize: Theme.fontSizeSmall
            wrapMode: Text.Wrap
        }
        Label {
            width: parent.width
            visible: row.subtitle.length > 0
            text: row.subtitle
            color: Theme.secondaryColor
            font.pixelSize: Theme.fontSizeExtraSmall
            wrapMode: Text.Wrap
        }
    }

    Label {
        id: valore
        anchors {
            right: parent.right
            verticalCenter: parent.verticalCenter
        }
        text: row.value
        color: row.valueColor
        font.pixelSize: Theme.fontSizeLarge
    }
}