import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import QtGraphicalEffects 1.15

Item {
	id: item1
	DropShadow {
		color: "#4d000000"
		source: cardItem
		verticalOffset: 4
		radius: 40
		samples: 81
		anchors.fill: cardItem
	}
	Rectangle {
		id: cardItem
		anchors.fill: parent
		anchors.rightMargin: 16
		anchors.leftMargin: 16
		anchors.bottomMargin: 16
		anchors.topMargin: 16
		Layout.minimumWidth: 300
		Layout.minimumHeight: 475
		radius: 8
		ColumnLayout {
			id: columnLayout
			anchors.fill: parent
			spacing: 0
			Rectangle {
				id: cardItemImage
				radius: 8
				Layout.fillHeight: true
				Layout.preferredHeight: 255
				Layout.fillWidth: true
				Layout.preferredWidth: 300
				Image {
					id: cardItemImageSource
					source: "https://eduport.webestica.com/assets/images/courses/4by3/08.jpg"
					fillMode: Image.PreserveAspectCrop
					width: parent.width
					height: parent.height
					visible: false
				}
				OpacityMask {
					id: cardItemImageMask
					anchors.fill: cardItemImage
					source: cardItemImageSource
					maskSource: cardItemImage
				}

				Rectangle {
					id: rectangle
					width: cardItemImageMask.width
					height: 5
					color: "#ffffff"
					anchors.bottom: cardItemImageMask.bottom
					anchors.bottomMargin: 0
				}
			}
			ColumnLayout {
				id: cardItemBody
				Layout.rightMargin: 20
				Layout.leftMargin: 20
				Layout.bottomMargin: 16
				Layout.topMargin: 16
				Layout.fillHeight: true
				Layout.fillWidth: true
				Item {
					id: badgeAndFavorite
					height: favorite.height
					Layout.fillWidth: true
					Label {
						id: badge
						color: "#0cbc87"
						text: "All level"
						anchors.left: parent.left
						verticalAlignment: Text.AlignVCenter
						Layout.fillWidth: false
						rightPadding: 6
						leftPadding: 6
						bottomPadding: 4
						topPadding: 4
						font.pointSize: 12
						font.family: "Roboto"
						background: Rectangle {
							color: "#4d0cbc87"
							radius: 8
						}
					}

					Button {
						id: favorite
						width: 24
						height: 24
						text: qsTr("Button")
						anchors.right: parent.right
						anchors.rightMargin: 0
						padding: 0
						rightPadding: 0
						leftPadding: 0
						bottomPadding: 0
						topPadding: 0
						icon.source: "Material/svg/outlined/heart.svg"
						display: AbstractButton.IconOnly
						flat: true

						Connections {
							target: favorite
							onClicked: item1.state = "favorite pressed"
						}
					}
				}
			}

			Label {
				id: cardTitle
				color: "#24292d"
				text: qsTr("Course title")
				wrapMode: Text.Wrap
				Layout.fillWidth: true
				Layout.bottomMargin: 20
				font.styleName: "Medium"
				font.pointSize: 21
				font.family: "Roboto"
				Layout.rightMargin: 20
				Layout.leftMargin: 20
			}
		}
	}
	states: [
		State {
			name: "favorite pressed"
			when: favorite.pressed

			PropertyChanges {
				target: favorite
				icon.color: "#d6293e"
				icon.source: "Font-Awesome/svgs/solid/heart.svg"
			}

			PropertyChanges {
				target: favorite
				layer.enabled: true
			}
		}
	]
}