import QtQuick

Rectangle {
    id: root
    property alias imgSrc: image.source
    property alias temperature: tempValue.text
    property alias humidity: humidityValue.text
    property alias precipitation: precipValue.text
    property alias windSpeed: windValue.text

    property double rightMargin: root.width * 0.05

    Rectangle
    {
        id: imageRect
        width: parent.width * 0.2
        height: parent.height
        anchors.left: parent.left
        anchors.top: parent.top
        radius: 15
        color: "black"
        Image
        {
            id: image
            fillMode: Image.PreserveAspectFit
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
        }
    }
    Rectangle
    {
        id: tempRect
        width: parent.width * 0.4
        height: parent.height * 0.5
        anchors.left: imageRect.right
        anchors.top: parent.top
        Text
        {
            id: tempLabel
            text: "Temp (C):"
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
        }
        Text
        {
            id: tempValue
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.rightMargin: root.rightMargin
        }
    }
    Rectangle
    {
        id: humidityRect
        width: parent.width * 0.4
        height: parent.height * 0.5
        anchors.left: tempRect.right
        anchors.top: parent.top
        Text
        {
            id: humidityLabel
            text: "Humidity (%):"
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
        }
        Text
        {
            id: humidityValue
            anchors.right: parent.right
            anchors.rightMargin: root.rightMargin
            anchors.verticalCenter: parent.verticalCenter
        }
    }
    Rectangle
    {
        id: precipRect
        width: parent.width * 0.4
        height: parent.height * 0.5
        anchors.left: imageRect.right
        anchors.top: tempRect.bottom
        Text
        {
            id: precipLabel
            text: "Precipitation (mm)"
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter

        }
        Text
        {
            id: precipValue
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.rightMargin: root.rightMargin
        }
    }
    Rectangle
    {
        id: windRect
        width: parent.width * 0.4
        height: parent.height * 0.5
        anchors.left: tempRect.right
        anchors.top: humidityRect.bottom
        Text
        {
            id: windLabel
            text: "Wind (km/h):"
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
        }
        Text
        {
            id: windValue
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
            anchors.rightMargin: root.rightMargin
        }
    }
}