{% extends 'baseTemplate.html' %} {% block title %}Compteurs{% endblock %} {% block content %}
<div class="text-center">
	<h1>SeumBook™</h1>
</div>
<div class="container-fluid">
	<div class="row">
		{% for counter in counters %}
		<div class="col-md-4 col-sm-6 col-lg-3">
			<div class="panel panel-{{counter.CSSclass}}" style="opacity:{{counter.opacity}}">
				<div class="panel-heading">
					<a class="counter-link" href="{% url 'counter' id_counter=counter.id %}">
						<h2 class="panel-title">{{ counter.trigramme }} <small>{{ counter.name }}</small>
							{% if not counter.lastReset.noSeum %}<span class="pull-right badge">{{ counter.seumCount }}</span>{% endif %}
						</h2>
					</a>
				</div>
				<div class="seum-counter panel-body">
					{% if counter.lastReset.noSeum %}
					<strong>N'a pas encore eu le seum.</strong>
					<br> {% else %}
					<strong>N'a pas eu le seum depuis {{ counter.lastReset.formatted_delta }}.</strong>
					<br> {% endif %}

					<p>{{ counter.lastReset.reason }}</p>
					<div class="text-center">
						<button id="button{{counter.id}}" class="btn btn-default btn-danger" type="button" onclick="getElementById('counter{{counter.id}}').style.display='inline';getElementById('button{{counter.id}}').style.display='none';">Remettre à zéro</button>
					</div>
					<form style="display:none" id="counter{{counter.id}}" action="{% url 'reset-counter' %}" method="post">
						{% csrf_token %}
						<div class="form-group">
							<label for="reason">Motif du seum :</label>
							<textarea class="form-control" name="reason"></textarea>
						</div>
						<input type="hidden" name="counter" value="{{counter.id}}"></input>
						<input type="hidden" name="redirect" value="{% url 'home' %}"></input>
						<div class="text-center">
							<button type="submit" class="btn btn-default btn-success">Foutre le seum</button>
						</div>
					</form>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h2 class="panel-title">Timeline des 24 heures du seum</h2>
				</div>
				<div class="panel-body timeline graphs">
					{% if noTimeline %}
					<div class="text-center text-muted">
						<p>Pas de seum dans les dernières 24 heures...</p>
					</div>
					{% else %} {{ line_chart.as_html }} {% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h2 class="panel-title">Graphe des jours sans seum</h2>
				</div>
				<div class="panel-body graphs">
					{% if noGraph %}
					<div class="text-center text-muted">
						<p>Personne n'a le seum...</p>
					</div>
					{% else %} {{ col_chart.as_html }} {% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h2 class="panel-title">Meilleurs seumeurs</h2>
				</div>
				<div class="panel-body graphs">
					{% if noBestSeum %}
					<div class="text-center text-muted">
						<p>Personne n'a eu le seum...</p>
					</div>
					{% else %} {{ best_chart.as_html }} {% endif %}
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-default">
				<div class="panel-heading">
					<h2 class="panel-title">Activité seumesque</h2>
				</div>
				<div class="panel-body graphs">
					{% if noSeumActivity %}
					<div class="text-center text-muted">
						<p>Personne n'a eu le seum...</p>
					</div>
					{% else %} {{ activity_chart.as_html }} {% endif %}
				</div>
			</div>
		</div>
	</div>
</div>
{% endblock %}