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

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

{% block breadcrumbs %}
  {{ block.super }}
  <li><a href="{% url "notes:liste-sujet" %}">Sujets</a></li>
  <li>{{ sujet }}</li>
{% endblock %}

{% block pre_content %}
    <div id="collapseNotes" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="notesHeading">
{% endblock %}

{% block post_content %}
    {% if notes.has_other_pages %}<div class="panel-footer text-center">
      <ul class="pagination">
      {% for num in notes.paginator.page_range %}
        <li {% if notes.number == num %} class="active" {%endif%}><a href="?page={{num}}">{{num}}</a></li>
      {%endfor%}
      </ul>
    </div>{% endif %}
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="notesAjoutHeading">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseNotesAjout" aria-expanded="false" aria-controls="collapseTwo">
          {% bootstrap_icon "plus" %} Ajouter une note
        </a>
      </h4>
    </div>
    <div id="collapseNotesAjout" class="panel-collapse collapse" role="tabpanel" aria-labelledby="notesAjoutHeading">
      <div class="panel-body">
        <form method="POST" action="">{% csrf_token %}
        {% bootstrap_form note_form show_label=False %}
      </div>
      <div class="panel-footer text-right">
        {% bootstrap_button "Enregistrer" button_type="submit" %}
        </form>
      </div>
      </div>
{% endblock %}

{% block right_column %}
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">Informations</h4>
    </div>
    {% include "notes/details_sujet_inner.html" %}
  </div>

  <div class="panel panel-default">
    <div class="panel-heading"><h4 class="panel-title">Statistiques</h4></div>
    <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>{% bootstrap_icon "tasks" %} {{ 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">{% bootstrap_icon "floppy-save" %} 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 }}
{% if user.is_superuser %}
    <hr />
    <div class="panel panel-primary text-right"><div class="panel-heading"><h4 class="panel-title"><strong>Administration :</strong></h4></div>
    <div class="panel-body text-center">
    <div class="btn-group-vertical" role="group" aria-label="...">
      <a href="{% url 'admin:notes_note_changelist' %}?sujet__exact={{sujet.pk}}" class="btn btn-primary">{% bootstrap_icon "pencil" %} Éditer les notes</a>
      <a href="{% url 'notes:sujets-merge' pk=object.pk %}" class="btn btn-danger">{% bootstrap_icon "paste" %} Fusionner</a>
    </div>
    </div>
    </div>
{% endif %}
{% endblock %}