{% extends 'baseTemplate.html' %} {% block title %}Compteurs{% endblock %} {% block content %}
<div class="text-center">
	<h1><a class="counter-link" href="{% url 'home' %}">SeumBook™</a></h1>
</div>
<div class="container-fluid">
	<div class="row" id="my-counter">
		<div class="col-sm-6">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h2 class="panel-title">
						<a class="counter-link panel-title" href="{% url 'counter' id_counter=myCounter.id %}">
							<b>{{ myCounter.trigramme }}</b> <small>{{ myCounter.name }}</small>
						</a>
						{% if not myCounter.lastReset.noSeum %}
							<span class="pull-right badge">
								<span class="glyphicon glyphicon-fire" />&nbsp;{{ myCounter.likeCount }}
							</span>
						{% endif %}
						</h2>
				</div>
				<div class="primary-counter panel-body" id="container{{myCounter.id}}">
					<div style="width:100%;">
						{% if myCounter.lastReset.noSeum %}
						<strong>N'a pas encore eu le seum.</strong>
						<br> {% else %}
						<strong>
						{% if myCounter.lastReset.selfSeum %}
						J'ai eu le seum il y a {{ myCounter.lastReset.formatted_delta }}.
						{% else %}
						{{myCounter.lastReset.who.trigramme}} m'a foutu le seum il y a {{ myCounter.lastReset.formatted_delta }}.
						{% endif %}
					</strong>
						<br> {% endif %}

						<p>{{ myCounter.lastReset.reason }}</p>
						<div class="text-center" id="button{{myCounter.id}}">
							<button class="btn btn-default btn-danger" type="button" onclick="revealSeumForm({{myCounter.id}})">Remettre à zéro</button>
						</div>
						<form style="display:none" id="counter{{myCounter.id}}" action="{% url 'reset-counter' %}" method="post">
							{% csrf_token %}
							<div class="form-group">
								<label for="reason">Motif du seum</label>
								<input id="reason{{myCounter.id}}" type="text" class="form-control" name="reason"></input>
							</div>
							<input type="hidden" name="counter" value="{{myCounter.id}}"></input>
							<input type="hidden" name="redirect" value="{% url 'home' %}"></input>
							<input type="hidden" name="who" value="{{myCounter.id}}"></input>
							<div class="text-center">
								<button type="submit" class="btn btn-default btn-success">J'ai le seum</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		<div class="col-sm-6">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h2 class="panel-title"><b>QuickSeum™</b> <small>Brise le mur du seum</small></h2>
				</div>
				<div class="primary-counter panel-body">
					<form class="form-horizontal" action="{% url 'reset-counter'%}" method="POST" style="width:100%;">
						{% csrf_token %}
						<div class="form-group">
							<label for="id_quicktrigramme" class="col-sm-3 control-label">Trigramme</label>
							<div class="col-sm-9">
								<input id="id_quicktrigramme" maxlength="3" type="text" class="form-control text-uppercase" name="trigramme" onkeyup="this.value=this.value.toUpperCase();" required />
							</div>
						</div>
						<div class="form-group">
							<label for="id_quickreason" class="col-sm-3 control-label">Motif</label>
							<div class="col-sm-9">
								<input type="text" class="form-control" id="id_quickreason" name="reason" />
							</div>
						</div>
						<div class="form-group">
							<div class="col-sm-offset-3 col-sm-9">
								<button type="submit" class="btn btn-danger">Foutre le seum</button>
							</div>
						</div>
						<input type="hidden" name="who" value="{{myCounter.id}}"></input>
						<input type="hidden" name="redirect" value="{% url 'home' %}"></input>
					</form>
				</div>
			</div>
		</div>
	</div>
	<div class="row">
		{% for counter in counters %}
		<div class="col-md-4 col-sm-6 col-lg-3">
			<div class="panel panel-{{counter.CSSclass}}">
				<div class="panel-heading">
					<form action="{% url 'like' %}" method="POST" name="like{{counter.id}}">
						{% csrf_token %}
						<input type="hidden" name="liker" value="{{myCounter.id}}" />
						<input type="hidden" name="redirect" value="{% url 'home' %}" />
						<input type="hidden" name="reset" value="{{counter.lastReset.id}}" />
						<h2 class="panel-title">
							<a class="counter-link panel-title" href="{% url 'counter' id_counter=counter.id %}">
								<b>{{ counter.trigramme }}</b> <small>{{ counter.name }}</small>
							</a>
							{% if not counter.lastReset.noSeum %}
							{% if counter.alreadyLiked %}
							<span class="pull-right badge">
								<span class="glyphicon glyphicon-ok" />&nbsp;{{ counter.likeCount }}
							</span>
							{% elif counter.id == myCounter.id %}
			                <span class="pull-right badge">
			                    <span class="glyphicon glyphicon-fire" />&nbsp;{{ counter.likeCount }}
			                </span>
							{% else %}
							<a class="pull-right badge" onclick="document.forms['like{{counter.id}}'].submit();">
								<span class="glyphicon glyphicon-fire" />&nbsp;{{ counter.likeCount }}
							</a>
							{% endif %}
							{% endif %}
						</h2>
					</form>
				</div>
				<div class="seum-counter panel-body">
					{% if counter.lastReset.noSeum %}
					<strong>N'a pas encore eu le seum.</strong>
					<br> {% else %}
					<strong>
					{% if counter.lastReset.selfSeum %}
						A eu le seum il y a {{ counter.lastReset.formatted_delta }}.
					{% else %}
						{{ counter.lastReset.who.trigramme }} lui a foutu le seum il y a {{ counter.lastReset.formatted_delta }}.
					{% endif %}
					</strong>
					<br> {% endif %}

					<p>{{ counter.lastReset.reason }}</p>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-info">
				<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-info">
				<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-info">
				<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-info">
				<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>
<div class="row text-center">
	<a href="{% url 'logout' %}" class="btn btn-danger">Se déconnecter</a>
	<a href="{% url 'password_change' %}" class="btn btn-warning">Changer de mot de passe</a>
	<a href="{% url 'toggle_email_notifications' %}" class="btn btn-info">
		{% if myCounter.email_notifications %}
		Désactiver les notifications par mail
		{% else %}
		Activer les notifications par mail
		{% endif %}
	</a>
</div>
{% endblock %}