import QtQuick 2.9
import QtQuick.Layouts 1.3
import QtQuick.Controls 1.4
import QtQuick.Controls 2.4

Row {
    id: reihe
    spacing: 20
    height: 200
    width: app.width
    Rectangle {
        id: content
        //color: "red"
        anchors.fill:parent
        //anchors: { left:parent.left; right:parent.right }
        //height: column.implicitHeight+ 5
        border.width: 2
        border.color: "lightsteelblue"
        radius: 10
        clip: true
        Behavior on scale { NumberAnimation { easing.type: Easing.OutQuad } }

        MouseArea {
            anchors.fill:parent
            onPressed: {
                parent.scale= 0.9
                image.opacity= 1

            }
            onReleased: {
                parent.scale= 1.0
                image.opacity= 0.3
            }
        }

        RowLayout{
            spacing: 10
            Rectangle{
                clip: true
                width: 200
                height: reihe.height
                //color: "red"
                Image {
                    id: image
                    anchors.fill: parent
                    source: modelData.image
                    smooth: true
                    fillMode: Image.PreserveAspectFit
                    opacity: 0.3
                    Behavior on opacity { NumberAnimation { easing.type:Easing.OutQuad }}
                }
            }
            Column {
                Text {
                    text: 'Name: ' + modelData.forename + ' ' + modelData.name
                }
                Text {
                    text: 'Studiengang: ' + modelData.course
                }
                Text {
                    text: 'Alter: ' + modelData.age
                }
                Text {
                    text: 'Matrikelnummer: ' + modelData.matriculationNumber
                }
                Text {
                    text: 'Semester: #' + modelData.semseter
                }


                //            Text {
                //                text: 'Model Index: ' + index
                //            }
            }

            ScrollView{
                visible: false
                height: reihe.height-5
                //ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
                Column{
                //ListModel{
                    Repeater{
                        model: modelData.modules
                        Column{
                            Text {
                                text: 'Modul: ' + modelData.name
                            }
                            Text {
                                text: 'Kürzel: ' + modelData.identificationCode
                            }
                            Text {
                                text: 'Schwierigkeit: ' + modelData.severity
                            }
                            Text {
                                text: 'Lerngruppe: ' + modelData.lernenGroup
                            }
                        }
                    }
                }
            }
        }
    }
}