/*************************************************************/
/*                                                           */
/* Copyright (C) Microsoft Corporation. All rights reserved. */
/*                                                           */
/*************************************************************/

import Colors 1.0
import Fonts 1.0
import QtQuick 2.7
import QtQuick.Window 2.2
import QtQml 2.2

import "fabricMdl2.js" as FabricMDL

// Message below the Header that notifies users they are "up to date" with syncing files
Rectangle {
    id: upToDateStatusRect
    height: 16
    color: "transparent"

    Accessible.role: Accessible.StaticText
    Accessible.name: syncStatusPrimary.text
    Accessible.readOnly: true
    Accessible.focusable: true

    // Note: make sure element is *not* focusable if using StaticText as an accessible role.
    // Otherwise, won't be recognized by JAWS.
    Accessible.ignored: !(upToDateStatusRect.visible || headerModel.showHiddenNodesInAccTree)

    Rectangle {
        id: upToDateStatusInner
        color: "transparent"

        anchors.fill: parent
        Rectangle {
            id: upToDateIconContainer
            width: 20
            height: 12
            anchors.left: parent.left
            anchors.verticalCenter: syncStatusPrimary.verticalCenter
            color: "transparent"

            Image {
                id: upToDateIcon
                width: 12
                height: 12
                anchors.horizontalCenter: parent.horizontalCenter

                source: "file:///" + imageLocation + "SyncStatusSynced.svg"
                sourceSize.width: 12
                sourceSize.height: 12
                visible: parent.visible
            }
        }

        Text {
            id: syncStatusPrimary
            color: Colors.activity_center.common.text
            text: headerModel.upToDateTextPrimary
            font.family: Fonts.standard
            font.pixelSize: 12
            wrapMode: Text.WordWrap
            horizontalAlignment: Text.AlignLeft

            anchors.left: upToDateIconContainer.right
            anchors.leftMargin: 2
            anchors.right: parent.right
            anchors.verticalCenter: parent.verticalCenter
        }
    }
}