{% extends 'baseTemplate.html' %} {% block title %}{{counter.trigramme}}{% endblock %} {% block content %}
<div class="text-center">
  <h1>
      {{counter.trigramme}} <small>{{ counter.name }}</small>
  </h1>
</div>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-3">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h2 class="panel-title">Dernier seum {% if not counter.lastReset.noSeum %}<span class="badge pull-right">{{ counter.seumCount }}</span>{% endif %}</h2>
        </div>
        <div class="seum-counter panel-body" style="height:125px" id="container{{counter.id}}">
          {% 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';getElementById('container{{counter.id}}').style.height='225px';">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 'counter' id_counter=counter.id %}"></input>
            <div class="text-center">
              <button type="submit" class="btn btn-default btn-success">Foutre le seum</button>
            </div>
          </form>
        </div>
      </div>
    </div>
    <div class="col-md-9">
      <div class="panel panel-primary">
        <div class="panel-heading">
          <h2 class="panel-title">Timeline du seum</h2>
        </div>
        <div class="graphs timeline panel-body">
            {% if counter.lastReset.noSeum %}
            <div class="text-center text-muted">
                <p>Pas encore de timeline du seum...</p>
            </div>
            {% else %}
            {{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">Historique du seum <small class="pull-right">Temps moyen entre deux seums : {{seumFrequency}}</small></h2>
        </div>
        <div class="panel-body">
          <table class="table table-striped">
            <thead>
              <tr>
                <th>Date</th>
                <th>Motif</th>
              </tr>
            </thead>
            <tbody>
              {% for reset in resets %}
              <tr>
                <td>{{ reset.date }}</td>
                <td>{{ reset.reason }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="row">
  <div class="text-center">
    <a class="btn btn-success" href="{% url 'home' %}">Retour à la liste des compteurs</a>
  </div>
</div>
</div>
{% endblock %}