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

Flickable {
	id: flickable
	property alias header: header
	property alias detailImage: image
	property alias detailPrice: price
	property alias detailOriginalPrice: originalPrice
	property alias detailDiscount: discount
	property alias detailTime: time
	property alias detailTrial: trial
	property alias detailBuy: buy
	property bool doesntEmbed: Qt.platform.os === "android"
				|| Qt.platform.os === "linux"
				|| Qt.platform.os === "osx"
				|| Qt.platform.os === "unix"
				|| Qt.platform.os === "windows"
	contentHeight: body.height

	ColumnLayout {
		id: body
		anchors {
			top: parent.top
			left: parent.left
			right: parent.right
		}

		Header {
			id: header
			Layout.fillWidth: true
		}

		FontLoader {
			id: heebo
			source: "Heebo/Heebo-Bold.ttf"
		}

		FontLoader {
			id: bold
			source: doesntEmbed ? "" : "Roboto/Roboto-Bold.ttf"
		}

		FontLoader {
			id: medium
			source: doesntEmbed ? "" : "Roboto/Roboto-Medium.ttf"
		}

		FontLoader {
			id: regular
			source: doesntEmbed ? "" : "Roboto/Roboto-Regular.ttf"
		}

		Item {
			Layout.fillWidth: true
			implicitHeight: width * 1.2

			DropShadow {
				source: rectangle
				color: Qt.rgba(.113, .227, .325, .15)
				anchors.fill: rectangle
			}

			Rectangle {
				id: rectangle
				radius: 10
				anchors {
					top: parent.top
					topMargin: 25.6
					left: parent.left
					leftMargin: 12.8
					right: parent.right
					rightMargin: 12.8
					bottom: parent.bottom
				}

				Image {
					id: image
					source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg"
					width: parent.width - 16
					height: parent.width * 3 / 4
					anchors {
						top: parent.top
						topMargin: 8
						horizontalCenter: parent.horizontalCenter
					}
					layer.enabled: true
					layer.effect: OpacityMask {
						maskSource: Rectangle {
							width: image.width
							height: image.height
							radius: 10
						}
					}
				}

				ColumnLayout {
					width: parent.width - 16
					anchors {
						top: image.bottom
						horizontalCenter: parent.horizontalCenter
						bottom: parent.bottom
						bottomMargin: 8
					}

					RowLayout {
						Layout.topMargin: 16
						Layout.bottomMargin: 16

						ColumnLayout {
							spacing: 8
							RowLayout {
								Label {
									id: price
									text: "$150"
									font {
										family: heebo.name
										pointSize: 23
									}
								}

								Label {
									id: originalPrice
									text: "$350"
									color: "#4d000000"
									font {
										family: doesntEmbed
											? "Roboto"
											: regular.name
										pointSize: 15
										strikeout: true
									}
								}

								Rectangle {
									id: discountLabel
									implicitWidth: discount.width
									implicitHeight: discount.height
									radius: 6
									color: "#fd7e14"
									Label {
										id: discount
										text: qsTr("60% off")
										color: "white"
										font {
											family: doesntEmbed
												? "Roboto"
												: regular.name
											pointSize: 13.6
										}
										horizontalAlignment: Text.AlignHCenter
										verticalAlignment: Text.AlignVCenter
										topPadding: 4.46
										leftPadding: 8.29
										rightPadding: 8.29
										bottomPadding: 4.46
									}
								}
							}

							RowLayout {
								id: time

								Label {
									text: qsTr("5 days left at this price")
									color: "#d6293e"
									font {
										family: doesntEmbed
											? "Roboto"
											: regular.name
										pointSize: 15
									}
								}
							}
						}
					}

					RowLayout {
						Layout.topMargin: 16
						Layout.fillWidth: true
						spacing: 16

						Button {
							id: trial
							text: qsTr("Free trial")
							horizontalPadding: 16
							verticalPadding: 8
							contentItem: Text {
								horizontalAlignment: Text.AlignHCenter
								text: trial.text
								color: trial.down ? "#ffffff" : "#066ac9"
								font {
									family: doesntEmbed
										? "Roboto"
										: medium.name
									weight: Font.Medium
									pointSize: 15
								}
							}
							background: Rectangle {
								color: trial.down ? "#066ac9" : "#ffffff"
								radius: 5.2
								border {
									color: "#066ac9"
									width: 1
								}
							}
						}

						Button {
							id: buy
							text: qsTr("Buy course")
							horizontalPadding: 16
							verticalPadding: 8
							contentItem: Text {
								horizontalAlignment: Text.AlignHCenter
								text: buy.text
								color: "#ffffff"
								font {
									family: doesntEmbed
										? "Roboto"
										: medium.name
									weight: Font.Medium
									pointSize: 15
								}
							}
							background: Rectangle {
								color: buy.down ? "#0aa073" : "#0cbc87"
								radius: 5.2
								border {
									color: buy.down ? "#0a966c" : "#0cbc87"
									width: 1
								}
							}
						}
					}
				}
			}
		}
	}
}