{% extends "./base.html" %}

{% block background %}./img/bg_home_2.jpg{% endblock %}
{% block color %}red{% endblock %}
{% block title %}Your one-stop shop for WarioWare DIY{% endblock %}


{% block desc %}

<span style="font-size:20px;">👇 Latest News 👇</span>
<div class="white-text z-depth-2"
	style="border-radius:16px; margin-top: 10px; background: linear-gradient(to bottom, #f44336 0%, #b43a3a 100%);">
	<span style="font-size:18px"> {{ news }} </span>
</div>

<style>
	body {
		background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.2) 100%),
			url('./img/bg_home_2.jpg') !important;
	}
</style>
{% endblock %}


{% block content %}

<div class="row">

	<img class="col l4 m4 hide-on-small-only" src="./img/truck3D.png"
		style="animation: shake 10s; animation-iteration-count: infinite; cursor:pointer;" onclick="truckClicked()" />

	<div class="col l8 m8 s12 white-text center">

		<h5>The DoujinSoft Store presents a selection of games, music and comics created with the 2010 Nintendo DS game
			<a href="https://en.wikipedia.org/wiki/WarioWare_D.I.Y.">WarioWare DIY</a>, available to play with and
			transfer to your own copies of the
			game.<br /><br />
			Select any of the categories in the upper menu to start exploring! <br />Or you could look at our curated
			selections below. Make sure to check the <a href="./about">FAQ</a> for more info!
		</h5>

	</div>

	<div class="col l8 m12 s6 white-text center">

		<div class="card selection-card">
			<div class="card-content white-text">
				<span class="card-title">Now hosting:</span>
				<span class="center"
					style="display:flex; font-family:'warioware'; justify-content: space-around; flex-wrap: wrap">
					<h4 class="green-text tooltipped" data-tooltip="{{ totalGames }} Games" data-position="bottom">
						<object data="./img/fc-cart.svg" type="image/svg+xml" style="height:25px;"></object>
						{{ totalGames }}
					</h4>
					<h4 class="pink-text tooltipped" data-tooltip="{{ totalRecords }} Records" data-position="bottom">
						<i style="font-size:34px;" class="material-icons pink-text prefix">album</i>
						{{ totalRecords }}
					</h4>
					<h4 class="blue-text tooltipped" data-tooltip="{{ totalComics }} Comics" data-position="bottom">
						<i style="font-size:34px;" class="material-icons blue-text prefix">local_library</i>
						{{ totalComics }}
					</h4>
				</span>
			</div>
		</div>

	</div>

	<img style="margin-top:20px;" src="./img/truck3D.png" class="col center hide-on-med-and-up s6"
		style="animation: shake 10s; animation-iteration-count: infinite; cursor:pointer;" onclick="truckClicked()" />

</div>

{% endblock %}

{% block footdata %}

<!-- Collections go here, as cards. Maybe generate those dynamically later ? -->
<h2 class="white-text">Our selections:</h2>

{% for collection in collections %}

<div class="col s12 m6 l4">
	<a class="card selection-card waves-effect waves-light" href="./collection?id={{collection.id}}"
		style="width:100%; background-image:linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url('{{collection.background_pic}}') !important;">
		<div class="card-content white-text">
			<i class="material-icons {{collection.collection_color}}-text"
				style="font-size: 35px">{{collection.collection_icon}}</i>
			<span class="card-title" style="height:32px">{{collection.collection_name}}</span>
		</div>
	</a>
</div>

{% else %}

<h5 class="white-text">We don't have any selections currently available. <br /> You can still look at the entire
	catalogue through the main menu!</h5>

{% endfor %}


{% endblock %}