import QtQuick 2.12

import "qrc:/globals"
import "qrc:/components"

Item { id: _root
    property string password   : ""

    readonly property string checkGreen : "qrc:/images/iCheckGreen"
    readonly property int titlePixelSize    : 25
    readonly property int delegatePixelSize : 22

    Text { id: passwordRequirementsLabel
        anchors.top     : parent.top
        font {
            pixelSize   : _root.titlePixelSize
            weight      : Font.Medium
        }
        width               : parent.width
        height              : Variables.contentHeight
        horizontalAlignment : Text.AlignLeft
        verticalAlignment   : Text.AlignVCenter
        wrapMode            : Text.Wrap
        color               : Colors.textMain
        text                : qsTr("The password must contain the following:")
    }

    Column { id: contentColumn
        anchors.top         : passwordRequirementsLabel.bottom
        anchors.topMargin   : Variables.defaultMargin
        spacing             : 5
        width               : _root.width
        height              : _root.height

        Repeater {
            model: [
                { name: qsTr("Upper Case"),         source: vSettings.passwordContainsUpperCase     (_root.password)    ? _root.checkGreen : "" },
                { name: qsTr("Lower Case"),         source: vSettings.passwordContainsLowerCase     (_root.password)    ? _root.checkGreen : "" },
                { name: qsTr("Digits"),             source: vSettings.passwordContainsDigit         (_root.password)    ? _root.checkGreen : "" },
                { name: qsTr("Symbols"),            source: vSettings.passwordContainsSymbol        (_root.password)    ? _root.checkGreen : "" },
                { name: qsTr("Character Limit"),    source: vSettings.passwordContainsCharacterLimit(_root.password)    ? _root.checkGreen : "" }
            ]

            delegate: Text { id: _delegate
                font.pixelSize  : _root.delegatePixelSize
                color           : Colors.textMain
                text            : modelData.name
                width           : parent.width / 2

                Image { id: _indicator
                    anchors {
                        right           : parent.right
                        verticalCenter  : parent.verticalCenter
                    }
                    source              : modelData.source
                    sourceSize.width    : parent.height - 5
                    sourceSize.height   : parent.height - 5
                }
            }
        }
    }
}