import QtQuick
import QtQuick.Templates as T
import QtQuick.Controls

T.ComboBox
    {
    id: control

    font: Typography.body
    implicitHeight: background.height
    padding: Dimensions.m

    background: Rectangle
    {
        border.color: Colors.interactive
        border.width: 1
        color: Colors.mantle
        height: 47
        radius: Dimensions.radius
    }
    contentItem: T.TextField {
        autoScroll: control.editable
        color: Colors.foreground
        enabled: control.editable
        font: Typography.body
        inputMethodHints: control.inputMethodHints
        readOnly: control.down
        selectByMouse: control.selectTextByMouse
        text: control.editable ? control.editText : control.displayText
        validator: control.validator
    }
    delegate: MenuItem {
        id: menuItem

        required property int index
        required property var model

<<<<<<< HEAD
    delegate: T.ItemDelegate
    {
        width: control.width
        height: implicitContentHeight + topPadding + bottomPadding
        padding: Dimensions.s
        leftPadding: control.leftPadding
        contentItem: Label
        {
            text: control.textRole ? model[control.textRole] : modelData
            color: Colors.foreground
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
=======
>>>>>>> main
        highlighted: control.highlightedIndex === index
        hoverEnabled: control.hoverEnabled
        text: model[control.textRole]
        width: control.width

        background: Rectangle {
            color: menuItem.down || menuItem.highlighted ? Colors.primary : "transparent"
            height: menuItem.height
            width: menuItem.width
        }
    }
<<<<<<< HEAD
    indicator: Label
    {
        x: control.width - width
=======
    indicator: Label {
>>>>>>> main
        height: control.height
        horizontalAlignment: Text.AlignHCenter
        padding: Dimensions.s
        text: "▼"
        verticalAlignment: Text.AlignVCenter
        width: contentWidth + Dimensions.s * 2
        x: control.width - width

<<<<<<< HEAD
        background:  Rectangle
        {
=======
        background: Rectangle {
>>>>>>> main
            anchors.fill: parent
            border.color: Colors.interactive
            bottomRightRadius: Dimensions.radius
            color: Colors.primary
            topRightRadius: Dimensions.radius
        }
    }
<<<<<<< HEAD

    popup: T.Popup
    {
        y: control.height
        z: 2
        width: control.width
        contentItem: ListView
        {
=======
    popup: T.Popup {
        width: control.width
        height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
        topMargin: 6
        bottomMargin: 6
        padding: 1

        background: Rectangle {
            border.color: Colors.interactive
            color: Colors.mantle
            radius: Dimensions.radius
        }
        contentItem: ListView {
>>>>>>> main
            clip: true
            currentIndex: control.highlightedIndex
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            
            T.ScrollBar.vertical: ScrollBar { }

            highlight: Rectangle
            {
                color: Colors.primary
                opacity: Colors.highlightOpacity
            }
<<<<<<< HEAD

            ScrollIndicator.vertical: ScrollIndicator {}
        }

        background: Rectangle
        {
            color: Colors.mantle
            border.color: Colors.interactive
            radius: Dimensions.radius
=======
>>>>>>> main
        }
    }
}