{% extends 'baseTemplate.html' %}

{% load i18n %}
{% load hashtags %}

{% block title %}{% trans "Counters" %}{% 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">
		{# 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" {% if myCounter.likeCount %} data-toggle="tooltip" data-placement="top" title="{{ myCounter.likersString }}" {% endif %}>
								<span class="glyphicon glyphicon-heart"></span>&emsp;{{ 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>{% trans "No seum yet" %}.</strong><br />
						{% else %}
							<strong>
								{% if myCounter.lastReset.selfSeum %}
									{% trans "I got the seum" %} {{ myCounter.lastReset.formatted_delta }}.
								{% else %}
									{{ myCounter.lastReset.who.trigramme }} {% trans "threw me the seum" %} {{ myCounter.lastReset.formatted_delta }}.
								{% endif %}
							</strong><br />
						{% endif %}
						<p>{{ myCounter.lastReset.reason | hashtag }}</p>
						<div class="text-center" id="button{{myCounter.id}}">
							<button class="btn btn-default btn-danger" type="button" onclick="revealSeumForm({{myCounter.id}})">
								{% trans "Reset the counter" %}
							</button>
						</div>
						{# reset form for my counter #}
						<form style="display:none" id="counter{{myCounter.id}}" action="{% url 'reset-counter' %}" method="post">
							{% csrf_token %}
							<div class="form-group">
								<label for="reason">{% trans "Motive of the 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">{% trans "I've got the seum" %}</button>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
		{# QuickSeum #}
		<div class="col-sm-6">
			<div class="panel panel-primary">
				<div class="panel-heading">
					<h2 class="panel-title"><b>QuickSeum™</b> <small>{% trans "Break the seum wall" %}</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">{% trans "Trigram" %}</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">{% trans "Motive" %}</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">{% trans "Throw the 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>
	{# Counters panel #}
	<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" {% if counter.likeCount > 0 %} data-toggle="tooltip" data-placement="top" title="{{ counter.likersString }}" {% endif %}>
										<span class="glyphicon glyphicon-ok"></span>&emsp;{{ counter.likeCount }}
									</span>
								{% elif counter.id == myCounter.id or counter.lastReset.who.id == myCounter.id %}
			                		<span class="pull-right badge" {% if counter.likeCount > 0 %} data-toggle="tooltip" data-placement="top" title="{{ counter.likersString }}" {% endif %}>
			                    		<span class="glyphicon glyphicon-heart"></span>&emsp;{{ counter.likeCount }}
			                		</span>
								{% else %}
									<a class="pull-right badge" onclick="document.forms['like{{counter.id}}'].submit();">
										<span class="glyphicon glyphicon-heart"></span>&emsp;{{ counter.likeCount }}
									</a>
								{% endif %}
							{% endif %}
						</h2>
					</form>
				</div>
				<div class="seum-counter panel-body">
					{% if counter.lastReset.noSeum %}
						<strong>{% trans "Has not got the seum yet" %}</strong><br />
					{% else %}
						<strong>
							{% if counter.lastReset.selfSeum %}
								{% trans "Got the seum" %} {{ counter.lastReset.formatted_delta }}.
							{% else %}{% blocktrans with trigram=counter.lastReset.who.trigramme time_ago=counter.lastReset.formatted_delta %}Seum thrown by {{ trigram }} {{ time_ago }}.{% endblocktrans %}
							{% endif %}
						</strong><br />
					{% endif %}
					<p>{{ counter.lastReset.reason | hashtag }}</p>
				</div>
			</div>
		</div>
		{% endfor %}
	</div>
	{# Graphs #}
	<div class="row">
		<div class="col-sm-12">
			<div class="panel panel-info">
				<div class="panel-heading">
					<h2 class="panel-title">{% trans "Timeline of the 24h of the seum" %}{# Timeline des 24 heures du seum #}</h2>
				</div>
				<div class="panel-body timeline graphs">
					{% if noTimeline %}
						<div class="text-center text-muted">
							<p>{% trans "No seum in the last past 24h..." %}</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">{% trans "Best seumers" %}</h2>
				</div>
				<div class="panel-body graphs">
					{% if noBestSeum %}
						<div class="text-center text-muted">
							<p>{% trans "Nobody got the 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">{% trans "Most liked seumers" %}</h2>
				</div>
				<div class="panel-body graphs">
					{% if noBestLikees %}
						<div class="text-center text-muted">
							<p>{% trans "Nobody liked..." %}</p>
						</div>
					{% else %}
						{{ likees_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">{% trans "Most popular hashtags" %}</h2>
				</div>
				<div class="panel-body graphs">
					{% if noBestHashtags %}
						<div class="text-center text-muted">
							<p>{% trans "Nobody used any hashtag..." %}</p>
						</div>
					{% else %}
						{{ hashtags_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">{% trans "Best likers of seum" %}</h2>
				</div>
				<div class="panel-body graphs">
					{% if noBestLikers %}
						<div class="text-center text-muted">
							<p>{% trans "Nobody liked..." %}</p>
						</div>
					{% else %}
						{{ likers_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">{% trans "Seum activity" %}</h2>
				</div>
				<div class="panel-body graphs">
					{% if noSeumActivity %}
						<div class="text-center text-muted">
							<p>{% trans "Nobody got the 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">{% trans "Logout" %}</a>
	<a href="{% url 'password_change' %}" class="btn btn-warning">{% trans "Change password" %}</a>
	<a href="{% url 'toggle_email_notifications' %}" class="btn btn-info">
		{% if myCounter.email_notifications %}
			{% trans "Deactivate email notifications" %}
		{% else %}
			{% trans "Activate email notifications" %}
		{% endif %}
	</a>
	<a href="{% url 'toggle_sort_score' %}" class="btn btn-success">
		{% if myCounter.sort_by_score %}
			{% trans "Sort seums by date" %}
		{% else %}
			{% trans "Sort seums by score" %}
		{% endif %}
	</a>
</div>

<script>
$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})
</script>
{% endblock %}