{% extends "base.html" %}

{% load static %}


{% block title %}Roms{% endblock %}
{% block nav_rom_class %}is-active{% endblock %}


{% block content %}
<div class="rom-overview">
	<div class="columns">
		<div class="column">
			<div class="box">
				<strong>Kategorie:</strong>
				<a href="{% url 'romlist' %}"><span class="tag is-medium categorie {% if filter_tag == None %}is-primary{% endif %}">Alle</span></a>
				{% for tag in tags %}
				<a href="{% url 'romlist' tag=tag.slug %}"><span class="tag is-medium categorie {% if filter_tag == tag.slug %}is-primary{% endif %}">{{tag.name}}</span></a>
				{% endfor %}
			</div>
		</div>
	</div>

	<div class="columns">
	{% for rom in roms %}
			<div class="column is-one-quarter">
				<a class="box has-text-centered" href="{% url 'romdetails' id=rom.pk %}">
					<img src="{% get_media_prefix %}/{{rom.cover.small}}" />
					<h1 class="title is-4">{{ rom.name }}</h1>
				</a>
			</div>
	{% if forloop.counter|divisibleby:4 %}
	</div>
	<div class="columns">
	{% endif %}

	{% endfor %}
	</div>
</div>
{% endblock %}
