// Qt
import QtQuick 2.12

//  Qml imports
import "qrc:/components"
import "qrc:/globals"

Item { id: _root
    Text { id: _sdCardText
        anchors.top     : parent.top
        anchors.left    : parent.left
        color           : Colors.dialogText
        text            : ("%1").arg(qsTr("SD-Card"))

        font.pixelSize  : Fonts.fontPixelDialogText
    }

    ProgressBar { id: _progress
        anchors {
            top         : _sdCardText.bottom
            topMargin   : Variables.defaultMargin
        }

        minimum : 0
        maximum : _GuiView.sdTotal
        value   : _GuiView.sdTotal - _GuiView.sdAvail
        width   : parent.width
        height  : 10
        radius  : height
        bgColor : Colors.dialogShadowColor
        color   : Colors.highlightProgressBar
        border.width        : 0
        minText .visible    : false
        maxText .visible    : false
        marker  .visible    : false
        progress.border.width: 0
    }

    Text { id: _sdInfo
        anchors {
            right       : _progress.right
            top         : _progress.bottom
            topMargin   : 10
        }
        color           : "grey"
        font.pixelSize  : Fonts.fontPixelTouchAreaTitle
        text            : ("%1 of %2")  .arg(("%1 %2 %3")   .arg(Variables.sizeConverted( _GuiView.sdAvail, 1000, 3))   .arg(qsTr("Free")).arg(qsTr("MB")))
                                        .arg(("%1 %2")      .arg(Variables.sizeConverted( _GuiView.sdTotal, 1000, 3))   .arg(qsTr("MB")))
    }

    Item { id: _sdUsedContainer
        anchors {
            bottom      : _progress.top
            bottomMargin: _sdInfo.anchors.topMargin
            right       : _progress.right
        }
        width   : _sdInfoText.contentWidth
        height  : 20

        Rectangle { id: _sdCircle
            anchors.right       : _sdInfoText.left
            anchors.rightMargin : Variables.defaultMargin
            color   : Colors.highlightProgressBar
            width   : 12
            height  : width
            radius  : height
        }

        Text { id: _sdInfoText
            anchors {
                right           : parent.right
                verticalCenter  : _sdCircle.verticalCenter
            }
            color           : "grey"
            font.pixelSize  : Fonts.fontPixelTouchAreaTitle
            text            : ("%1 %2 %3")  .arg(Variables.sizeConverted(  _GuiView.sdTotal - _GuiView.sdAvail, 1000, 3))
                                            .arg(qsTr("MB"))
                                            .arg(qsTr("Used"))
        }
    }
}