{% extends "notes/details.html" %}
{% load bootstrap4 %}

{% block title %}
  {{ block.super }} {{ sujet }}
{% endblock %}

{% block breadcrumbs %}
  <h6 class="navbar-text text-white my-2">{{ sujet }}</h6>
{% endblock %}

{% block top_block %}
  <div class="card card-body p-1 mb-2">
    {% include "notes/details_sujet_inner.html" %}
  </div>
{% endblock %}

{% block pagination %}
  <div class="d-flex justify-content-center">
    {% if notes.has_other_pages %}<ul class="pagination">
      {% for num in notes.paginator.page_range %}
        <li class="page-item {% if notes.number == num %}active{%endif%}"><a class="page-link" href="?page={{num}}">{{num}}</a></li>
      {%endfor%}
    </ul>{% endif %}
  </div>
{% endblock %}

{% block right_column %}
  <div class="card mt-2">
    <h6 class="card-header">Statistiques</h6>
    <div id="stats-content">
      {% include "statistiques/fiche_stats_details.html" with object=sujet.statistiques %}
    </div>
    <div class="panel-footer text-right">
      <span class="text-right" id="normal-buttons">
        <p>{{ sujet.statistiques.info_completed }}%&nbsp;
        <span class="btn btn-primary btn-sm" id="update-stats">Mettre à jour</span></p>
      </span>
      <span class="text-right" id="update-buttons">
        <label for="submit-form" class="btn btn-primary">Enregistrer</label>
        <span class="btn btn-primary btn-sm" id="cancel">Annuler</span>
      </span>

    </div>
  </div>
<script type="text/javascript">
  $(function() {
    $("#update-buttons").hide();
    $("#update-stats").click(function() {
      $("#stats-content").load("{% url "statistiques:update" sujet.pk %}");
      $("#normal-buttons").hide();
      $("#update-buttons").show();
    });
    $("#cancel").click(function() {
      $("#stats-content").load("{% url "statistiques:details" sujet.pk %}");
      $("#update-buttons").hide();
      $("#normal-buttons").show();
    });
  });
</script>
{% endblock %}

{% block sidebar %}
{{ block.super }}
    <h6 class="sidebar-heading mt-4 px-3 text-danger">TODO: Ajouter une note</h6>
{% if user.is_superuser %}
    <h6 class="sidebar-heading mt-4 px-3">Administration</h6>
    <div class="px-3 btn-group-vertical d-flex justify-content-center" role="group" aria-label="...">
      <a href="{% url 'admin:notes_note_changelist' %}?sujet__exact={{sujet.pk}}" class="btn btn-primary btn-sm">Éditer les notes</a>
      <a href="{% url 'notes:sujets-merge' pk=object.pk %}" class="btn btn-danger btn-sm">Fusionner</a>
    </div>
{% endif %}
{% endblock %}