{% include "header" %}
<main class="np-main np-certificates np-subpage-container">
	<h1 class="np-resource-title">
		<span data-lang="DE">{{custom_page.headline}}</span>
		<span data-lang="EN">Awards</span>

	</h1>
	<div class="np-resource-subtitle"></div>
	
	<div class="badges-section">
		<div class="row">
			{% assign number_of_badges = 0 %}
			{% for course in courses.in_catalog %}			
				{% unless course.properties.course_badge == "none" or course.properties.course_badge == "" %}
					<div class="col-xs-12 col-sm-6 col-md-3 badge-column" data-lang="{{course.properties.course_language}}">
						<a href="{% route course, id: course.id %}" class="badge-container">
							
							<img src="{{course.properties.course_badge}}" class="{% if course.progress < 100 %}inactive{% endif %}" />
							<div class="badge-course-title">{{course.name}}</div>
						</a>
					</div>
					{% assign number_of_badges = number_of_badges | plus: 1 %}
				{% endunless %}
			{% endfor %}

			{% if number_of_badges == 0 %}
				<div class="np-dashboard-resources-container">
					<img class="np-zero-state-courses" alt="" />
				</div>
			{% endif %}
		</div>
	</div>
</main>
{% include "footer" %}

<style>
	body[data-lang='EN'] .badge-column[data-lang='DE'],
	body[data-lang='DE'] .badge-column[data-lang='EN'] {
			display: none !important;
	}

	body[data-lang='EN'] .badge-column[data-lang='EN'],
	body[data-lang='DE'] .badge-column[data-lang='DE'] {
			display: block !important;
	}

	.badge-column[data-lang='DE'] {display:block;}
	.badge-column[data-lang='EN'] {display:none;}

	.np-resource-title {
		text-transform:none;
	}

	.badges-section {
		margin-top:32px;
	}

	.badge-container {
		text-align:center;
		padding: 32px;
    background: #fff;
    box-shadow: rgb(141 148 158 / 80%) 0px 4px 12px;
    border-radius: 16px;
    margin: 0 16px 32px;
		display: block;
		text-decoration:none;
	}
	
	.badge-container img {
		max-width:100%;
	}

	.badge-container img.inactive {
    opacity: 0.4;
	}

	.badge-course-title {
		line-height: 1.3;
    color: #333333;
		font-weight:700;
		font-size: 20px;
	}

	@media (min-width:768px) {
		.badge-course-title {
			font-size: 24px;
		}
	}
</style>