{% assign isAuthenticatedUser = false %}

{% for group in current_person.groups %}
	{% if group.name == "All Users" or group.id == "6331d115-ea74-418a-99b2-af5c81208fe1" or group.name == "Internal
	  Zenjob Testing" or group.id == "940a5d24-32af-45f1-8ed4-8a6b4689d9c9" %}
		{% assign isAuthenticatedUser = true %}
	{% endif %}
{% endfor %}

{% if current_person.email contains "+preview" %}
  {% assign isAuthenticatedUser = true %}
{% endif %}

{% unless isAuthenticatedUser %}
	<main class="np-main np-homepage unauthorized">
		<div class="np-homepage-content">
			<div class="np-homepage-hero-content">
				<div class="np-homepage-headline" style="color: #fff">
					{{ homepage.headline }}
				</div>
				<div class="np-homepage-subheadline">
            Entschuldigung! Es scheint, dass deine E-Mail-Adresse {{current_person.email}} nicht den richtigen Zugang erhalten hat. Es kann nach der Registrierung bis zu 24h dauern, bis du freigeschalten wirst. Sollte das Problem danach weiterhin bestehen, wende dich an talents@zenjob.com, um den Zugang zu den vollständigen Lerninhalten anzufragen.
				</div>
			</div>
		</div>
	</main>
{% endunless %}

{% if isAuthenticatedUser %}
	{% assign catalog_courses = courses.in_catalog %}
	{% include "header", current_page_orgin: "false" %}

	<main class="np-main np-homepage">
		<div class="np-homepage-content">
			<div class="np-homepage-hero-content">
				<div class="np-homepage-headline" style="color: #fff">
					{{ homepage.headline }}
				</div>
				<div class="np-homepage-subheadline">
					<span>Hallo {{ current_person.first_name }}, hier bereiten wir dich auf alles vor, was du für deine erste Schicht als
						<div class="dropdown homepage-content-dropdown">
							<button class="dropbtn">Job auswählen</button>
							<div class="dropdown-content">
								<a href="#kassierer-in" data-category="087ea56d-888b-4e0f-af1f-68627318c841">Kassierer*in</a>
								<a href="#kellner-in" data-category="9be55234-19c5-4df4-bd1d-03e93f0faf83">Kellner*in</a>
								<a href="#warenverräumer-in" data-category="6580e10e-eacf-402d-a330-51d202721cce">Warenverräumer*in</a>
								{% comment %} <a href="#" data-category="a63019c7-0a46-40bd-bc1b-935c887a4380">Logistikhelfer*in</a> {% endcomment %}
							</div>
						</div>
						wissen musst.
					</span>
				</div>
			</div>

			<div class="homepage-cards-section row np-max-width">
				{% for course in catalog_courses %}
					{% if course.properties.homepage_course %}
						{% for cat in course.categories %}
							{% if cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" %}
								<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{cat.id}}">
									<a href="{% route course, id: course.id %}" class="homepage-card">
										<div class="homepage-card-content">
											<div class="homepage-card-img">
												<img src="https://s3.amazonaws.com/static.northpass.com/zenjob/FINAL+-+Zenjob+(Purple+Cashier).png" alt="">
											</div>
											<div class="homepage-card-title-wrapper">
												<div>{{course.name}}</div>
											</div>
										</div>
									</a>
								</div>
							{% endif %}
						{% endfor %}
					{% endif %}
				{% endfor %}

				{% for learning_path in learning_paths.available %}
					{% for learning_path_cat in learning_path.categories %}
							{% if learning_path_cat.id == "087ea56d-888b-4e0f-af1f-68627318c841" or learning_path_cat.id == "9be55234-19c5-4df4-bd1d-03e93f0faf83" or learning_path_cat.id == "6580e10e-eacf-402d-a330-51d202721cce" or learning_path_cat.id == "a63019c7-0a46-40bd-bc1b-935c887a4380" %}
								<div class="col-xs-12 col-sm-6 col-md-3 homepage-card-column" style="display:none;" data-category="{{learning_path_cat.id}}">
									<a href="{% route learning_path, id: learning_path.id %}" class="homepage-card">
										<div class="homepage-card-content">
											<div class="homepage-card-img">
												<img src="https://s3.amazonaws.com/static.northpass.com/zenjob/opened-book.png" alt="">
											</div>
											<div class="homepage-card-title-wrapper">
												<div>{{learning_path.name}} <span>(optional)</span></div>
											</div>
										</div>
									</a>
								</div>
							{% endif %}
					{% endfor %}
				{% endfor %}
			</div>
			</div>
			</div>
		</main>
		{% include "footer" %}
	{% endif %}

<style>
	.np-header {
		background: transparent;

	}

	main.np-homepage {
		background-color: rgba(118,37,247,1);
		background: linear-gradient(90deg, rgba(62,17,145,1) 0%, rgba(118,37,247,1) 50%, rgba(139,120,250,1) 100%);
		background-size: cover;
		animation: gradient 15s ease-in-out infinite;
		height: 100%;
		padding-top: 100px;
		margin-bottom:0;
		position: absolute;
    width: 100%;
    top: 0;
    left: 0;
	}

	main.np-homepage.unauthorized {
		padding-top:0;
	}

	.np-homepage-content {
		align-items: center;
		display: flex;
		position: relative;
		height: 100%;
		flex-direction: column;
		padding-bottom: 60px;
	}

	.unauthorized .np-homepage-content {
		justify-content:center;
	}

	.np-homepage-hero-content {
		position: unset;
		padding-bottom: 2.5rem;
		text-align: center;
	}
	.np-homepage-content .np-homepage-headline {
		font-size: 1.75rem;
		color: #fff;
		line-height: 1.1;
	}
	.np-homepage-content .np-homepage-subheadline {
		font-size: 1.25rem;
		line-height: 1.1;
		color: #fff;
		opacity: 100%;
	}

	@keyframes gradient {
		0% {
			background-position: 0% 79%;
		}
		50% {
			background-position: 100% 22%;
		}
		100% {
			background-position: 0% 79%;
		}
	}

	.homepage-content-dropdown {
		margin-right: 13px;
	}

	.dropbtn {
		background-color: transparent;
		color: #fff;
		border: black;
		text-decoration: underline;
		font-weight: 700;
		position:relative;
		cursor:pointer;
		padding: 0 4px 0 0;
	}

	.dropbtn:after {
		content:"▼";
		position:absolute;
    right: -13px;
    top: 8px;
    font-size: 14px;
	}

	.dropdown {
		position: relative;
		display: inline-block;
	}

	.dropdown-content {
		display: none;
		position: absolute;
		background-color: #E1E2E5;
		color:#707483;
		min-width: 100%;
		box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.2);
		z-index: 100;
	}

	.dropdown-content a {
		color: black;
		padding: 12px 16px;
		text-decoration: none;
		display: block;
	}

	.dropdown:hover .dropdown-content {display: block;}

	.dropdown:hover .dropbtn {background-color: #635bff60;}


	/* CARDS SECTION */
	.homepage-cards-section {
		padding: 0 24px;
		width:100%;
	}

	.homepage-card {
		margin: 0 auto 24px;
		max-width: 350px;
		text-decoration:none;
		display:block;
	}

	.homepage-card-content {
		display:flex;
		align-items:center;
		background-color: #fff;
    border-radius: 16px;
		box-shadow: rgb(141 148 158 / 30%) 0px 4px 12px;
	}

	.homepage-card-title-wrapper {
		width:65%;
		color: #3E1191;
		font-weight:700;
		text-align:center;
		padding:16px;
		transition:all 0.2s;
	}

	.homepage-card:hover .homepage-card-title-wrapper {
		color:#7625F7;
	}

	.homepage-card-img {
		width:45%;
		border-right: 1px solid #e0f3ff;
		padding:24px 16px;
		text-align:center;
	}

	.homepage-card-img img {
    max-width: 90px;
    width: 100%;
    height: auto;
	}

	@media (min-width:768px) {
		.np-homepage-hero-content {
			padding-top: 5rem;
			padding-bottom: 3rem;
			max-width:1170px;
		}
		.np-homepage-content .np-homepage-headline {
			font-size: 2.5rem;
		}
		.np-homepage-content .np-homepage-subheadline {
			font-size: 2rem;
		}

		.homepage-content-dropdown {
			margin-right: 22px;
		}

		.dropbtn:after {
			right: -21px;
			top: 12px;
			font-size: 20px;
		}

		.homepage-cards-section {
			margin-top: 16px;
		}

		.homepage-card {
			max-width: 275px;
			height: 100%;
    	margin-bottom: 0;
		}

		.homepage-card-content {
			flex-direction: column-reverse;
			height: 100%;
		}

		.homepage-card-title-wrapper {
			font-size: 18px;
    	line-height: 22px;
			width:100%;
			border-bottom:1px solid #e0f3ff;
			flex: 1;
		}

		.homepage-card-img {
			width: 100%;
    	border: none;
			padding: 40px 16px;
		}

		.homepage-card-img img {
			width: 120px;
			height:120px;
			max-width:120px;
		}
	}
</style>

<script>

	if (window.location.hash) {
		filterCoursesByHash(window.location.hash)
	} else {
			$(".homepage-card-column[data-category='087ea56d-888b-4e0f-af1f-68627318c841']").show()
	}

	$(".dropdown-content a").click(function() {
		$(".dropbtn").text($(this).text())

		filterCoursesBySelectedJob($(this))
	})

	function filterCoursesBySelectedJob(selection) {
		const selectedCategoryId = $(selection).data("category")

		$(".homepage-card-column").hide()
		$(`.homepage-card-column[data-category='${selectedCategoryId}']`).show()
	}

	function filterCoursesByHash(urlHash) {

		$(".dropdown-content a").each(function() {
			if ($(this).attr('href') == urlHash) {
				$(".dropbtn").text($(this).text())
				filterCoursesBySelectedJob($(this))
			}
		})
	}
</script>