import QtQuick
import QtQuick.Controls

Page {
  id: root
  header: ToolBar {
    Label {
      text: qsTr("Olympia 2024 Events")
      font.pixelSize: 20
      anchors.centerIn: parent
    }
  }

  Column {
    anchors.fill: parent
    anchors.topMargin: 24
    anchors.leftMargin: 48
    anchors.bottomMargin: 48
    anchors.rightMargin: 48
    spacing: 24
    
    Row {
      // width: parent.width
      // height: 50
      spacing: 20


      ComboBox {
        width: 200
        height: 50

        displayText: "Disziplin: " + currentText
        model: myListModel

        ListModel {
          id: myListModel
          ListElement { key: "Archerie" }
          ListElement { key: "Shooting" }
          ListElement { key: "Break-Dance" }
          ListElement { key: "More" }
        }
      }
      ComboBox {
        width: 200
        height: 50

        displayText: "Sort by: " + currentText
        model: ["hu", "hi"]

      }

      ComboBox {
        width: 200
        height: 50

        displayText: "Filter: " + currentText
        model: ["hu", "hi"]

      }
    }

    ListView {
      id: listView
      // anchors.fill: parent
      // topMargin: 48
      height: parent.height
      width: parent.width
      spacing: 20
      model: sports
      delegate: ItemDelegate {
        required property string eventName
        required property list<string> competitors
        text: eventName
        width: listView.width - listView.leftMargin - listView.rightMargin
        height: avatar.height 
        leftPadding: avatar.width + 16
        onClicked: root.StackView.view.push("EventInfoPage.qml", { eventName, competitors })

        Image {
          id: avatar
          height: 32
          width: 32
          source: "qrc:/qt/qml/itat/res/pictograms/ARC_small.svg"
        }
      }
    }

  }
}