/****************************************************************************
**
** Copyright (C) 2022 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the Qt Safe Renderer module
**
** $QT_BEGIN_LICENSE:COMM$
**
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** $QT_END_LICENSE$
**
**
**
**
**
**
**
**
****************************************************************************/
import QtQuick 2.8
import Qt.SafeRenderer 2.0

Rectangle {
    id: root
    width: 640
    height: 480
    color: "black"
    property alias text: safeText.text

    LeftIndicators {
        id: leftindicators
    }

    RightIndicators {
        id: rightIndicators
    }

    SafeText {
        id: safeText
        objectName: "safetextitem"
        x: 256
        y: 208
        width: 100
        height: 34
        color: "#8ae234"
        fillColor: "black"
        text: "0km/h"
        font.family: "Lato"
        horizontalAlignment: Text.AlignLeft
        font.pixelSize: 32
        runtimeEditable: true
    }

    SafeImage {
        id: park
        objectName: "park"
        x: 216
        y: 318
        width: 40
        height: 50
        source: "parking.png"
        fillColor: "#000000"
    }

    SafeImage {
        id: neutral
        objectName: "neutral"
        x: 360
        y: 318
        width: 40
        height: 50
        source: "neutral.png"
        fillColor: "#000000"
    }

    SafeImage {
        id: reverse
        objectName: "reverse"
        x: 286
        y: 248
        width: 40
        height: 50
        source: "reverse.png"
        fillColor: "#000000"
    }

    SafeImage {
        id: drive
        objectName: "drive"
        x: 286
        y: 388
        width: 40
        height: 50
        source: "drive.png"
        fillColor: "#000000"
    }

    states: [
        State {
            name: "park"
            PropertyChanges {
                target: park
                x: 276
                y: 313
                width: 60
                height: 60
                fillColor: "#000000"
            }
        },
        State {
            name: "neutral"
            PropertyChanges {
                target: neutral
                x: 276
                y: 313
                width: 60
                height: 60
                fillColor: "#000000"
            }
        },
        State {
            name: "reverse"
            PropertyChanges {
                target: reverse
                x: 276
                y: 313
                width: 60
                height: 60
                fillColor: "#000000"
            }
        },
        State {
            name: "drive"
            PropertyChanges {
                target: drive
                x: 276
                y: 313
                width: 60
                height: 60
                fillColor: "#000000"
            }
        }
    ]
    transitions: [
        Transition {
            from: "*"
            to: "*"
            NumberAnimation {
                properties: "x,y,width,height"
                duration: 500
                easing.type: Easing.InOutQuad
            }
        }
    ]
}