{# @var _this \TelecentroTemplateBundle\Element\Listing\Curso\CursoListing #}

<style>
	.curso-progress:after {
		background-image: url("{{ asset('telecentro/img/circle.png') }}");
	}
	.curso[data-situacao="concluido"]:before {
		 background-image: url("{{ asset('telecentro/img/status/concluido.png') }}");
	 }
	.curso[data-situacao="andamento"]:before {
		 background-image: url("{{ asset('telecentro/img/status/andamento.png') }}");
	 }
	.curso[data-situacao="pendente"]:before {
		 background-image: url("{{ asset('telecentro/img/status/pendente.png') }}");
	 }
	.curso[data-situacao="bloqueado"]:before {
		cursor: not-allowed;
		 background-image: url("{{ asset('telecentro/img/status/bloqueado.png') }}");
	 }
</style>
<div class="cursos">
	{% for curso in _this.itens %}
		<a href="{{ curso.url }}" class="curso" data-situacao="{{ curso.situacao }}" data-nota="{{ curso.nota }}">
			<div class="curso-image">
				<img src="{{ asset(curso.image) }}" alt="">
			</div>
			<h3 class="ui blue header">
				{{ curso.nome|raw }}
				<span class="sub small header" style="padding-top: 0.3em; font-size: 0.6em">
					<b>{{ curso.situacao|upper|raw }}</b>
					{% for i in curso.info %}
						| {{ i|raw }}
					{% endfor %}
				</span>
			</h3>
			<div class="curso-progress">
				<div class="curso-progress-bar" style="width: {{ (curso.valor / curso.total * 100)|round }}%"></div>
			</div>
		</a>
	{% endfor %}
</div>
<div class="ui borderless blue menu">
	{% for p in 1.._this.pages %}
		<a href="?page={{ p }}" class="item{% if _this.isCurrentPage(p) %} active{% endif %}">{{ p }}</a>
	{% endfor %}
</div>
<script>
	document.addEventListener("DOMContentLoaded",function(){
		var max = 50;
		$('.curso').each(function(i,item){
			var h = $(item).height();

			if(h > max){
				max = h;
			}
		}).height(max+"px");
	})
</script>