{% extends 'layout.html.twig' %}
{% block stylesheets %}
  {{parent()}}
  <link href="{{ asset('css/missions.css') }}" media="screen" rel="stylesheet" type="text/css">
{% endblock %}
{% block body %}
	{{ parent() }}
	<div class="container"> 
		{% if missionCategory|length > 0 %}
			{% for mc in missionCategory %}
				{% set lvl = false %}
				{% set lvlClass = "" %}
				{% for mcr in mc.usersMissionChestReferences|filter(mcr => mcr.user == app.user and mcr.opened == 0 and mcr.level == 'EASY' )%}
					{% set lvlClass = "bronze-background" %}
					{% set lvl = true %}
				{% endfor %}
				{% for mcr in mc.usersMissionChestReferences|filter(mcr => mcr.user == app.user and mcr.opened == 0 and mcr.level == 'MEDIUM' and lvl == false )%}
					{% set lvlClass = "silver-background" %}
					{% set lvl = true %}
				{% endfor %}
				{% for mcr in mc.usersMissionChestReferences|filter(mcr => mcr.user == app.user and mcr.opened == 0 and mcr.level == 'HARD' and lvl == false )%}
					{% set lvlClass = "gold-background" %}
					{% set lvl = true %}
				{% endfor %}
				{% if lvl == false %}
					{% set lvlClass = "completed-background" %}
				{% endif %}
				{% set description = "" %}
				{% set easyActive = 0 %}
				{% set mediumActive = 0 %}
				{% set hardActive = 0 %}
				{% for md in missionDescription %}
					{% if md['mcId'] == mc.id %}
						{% set description = md['mDescription'] %}
						{% if md['mLvl'] == "EASY" %}
							{% set easyActive = 1 %}
						{% elseif md['mLvl'] == "MEDIUM" %}
							{% set mediumActive = 1 %}
						{% else %}
							{% set hardActive = 1 %}
						{% endif %}
					{% endif %}
				{% endfor %}

				<div class="mission-category-content {{ lvlClass }}">
					<div class="mission-category-names">
						<div class="name">{{mc.name}}</div>					</div>
					<div class="mission-category-levels clearfix">
						<div class="easy {% if easyActive %}active{% endif %}">{% trans %}Easy{% endtrans %}</div>
						<div class="medium {% if mediumActive %}active{% endif %}">{% trans %}Medium{% endtrans %}</div>
						<div class="hard {% if hardActive %}active{% endif %}">{% trans %}Hard{% endtrans %}</div>
					</div>
					<div class="description">
						{{description}}
					</div>
					<a href="{{ path('missions', {id: mc.id}) }}">
						<div class="mission-category-btn">
								<div class="text">{% trans %}View{% endtrans %}</div>
						</div>
					</a>
				</div>
			{% endfor %}
		{% else %}
			<h2 style="text-align: center;margin: 40px 0;">{% trans %}There are not missions created{% endtrans %}</h2>
		{% endif %}
	</div>
{% endblock %}