{% extends "maraudes/base.html" %}
{% load bootstrap4 staticfiles %}

{% block title %} {{ block.super }} Compte-rendu du {{ object.date }} {% endblock %}

{% block breadcrumbs %}
  <h6 class="navbar-text my-2 text-white">Compte-rendu</h6>
  <p class="navbar-text my-2 pl-2">{{ object.date }}</p>
{% endblock %}

{% block sidebar %}
    {{ block.super }}
    <hr />
    <h4 class="sidebar-heading px-3 mt-4 mb-1">Création</h4>
    <div class="btn-group px-3" role="group" aria-label="Creation">
      <button id="new-sujet" class="btn btn-dark">Sujet</button>
      <button id="new-lieu" class="btn btn-dark">Lieu</button>
    </div>
    <h4 class="sidebar-heading px-3 mt-4 mb-1">Finaliser</h4>
    <div class="px-3">
      <a class="btn btn-success btn-block" href="{% url 'maraudes:finalize' maraude.pk %}">Terminer</a>
    </div>
{% endblock %}

{% block page_content %}
<!-- Modal and button linking -->
<div class="modal fade" id="form-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
     <div class="modal-content">
       <div class="modal-header">
         <h4 class="modal-title">Modal title</h4>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div id="form-modal-body" class="modal-body">
         <div class="alert alert-warning">Content should be there...</div>
       </div>
     </div>
   </div>
</div>
<script type="text/javascript" src="{% static 'scripts/bootstrap-modal.js' %}"></script>
<script type="text/javascript" src="{% static "scripts/jquery.formset.js" %}"></script>
<script type="text/javascript">
  /* Dynamic Formsets */
  $(function() {
    $.fn.onAddForm = function(row) {
      // Load django_select2 fields
      row.find('.django-select2').djangoSelect2();
    };

    $.fn.onDeleteForm = function(row) {
      /*
      * Custom code when deleting dynamic form
      */
      console.log(row);
    };
  });
  
  $(function() {
    $('.dynamic-formset').formset({
        prefix: '{{ inline_formset.prefix }}',
        addText: 'Ajouter une personne',
        deleteText: 'Supprimer',
        addCssClass: 'card-link btn-add',
        deleteCssClass: 'btn-link btn-sm btn-delete pb-3',
        added: $.fn.onAddForm,
        removed: $.fn.onDeleteForm
    });

    var text = $('a.btn-add').text();
    $('a.btn-add').html('(+) ' + text);
    var text = $('a.btn-delete:first').text();
    $('a.btn-delete').html('(-) ' + text);
  });
</script>

      <div class="d-flex flex-fill card mx-auto border-dark shadow">
        <div class="card-header py-2 bg-dark text-white">
          Nouvelle rencontre
        </div>
        <div class="card-body">
        <form method="post" action="{% url 'maraudes:create' maraude.pk %}">
        {% csrf_token %}
          {% include "maraudes/compterendu_form.html" %}
          {% bootstrap_button "Enregistrer" button_type="submit" button_class="btn btn-success btn-sm btn-block mt-3 mb-0" %}
        </form>
        {{ form.media.js }}{{ form.media.css }}
        </div>
      </div>
    </div>
  </div>
<div class="row">
  <div class="container-fluid">
    <div class="card-columns m-4">
      {% for rencontre in rencontres %}<div class="card">
        <div class="card-header py-2 bg-dark text-white">{{ rencontre }}</div>
        <div class="card-body">{% for observation in rencontre.observations.all %}
           <a class="card-link btn-sm my-0" href="{% url "notes:details-sujet" observation.sujet.pk %}" id="sujet-name-{{observation.sujet.pk}}">{{observation.sujet}}</a>
           <button class="btn btn-sm btn-outline-dark py-0 float-right" onclick="$.fn.openModal('/statistiques/update/{{observation.sujet.pk}}', 'Statistiques')">
             <span aria-hidden="true" class="oi oi-pie-chart"></span>
             <span class="sr-only">Mise à jour</span></button>
           <hr />
           <span class="text-justify">{{observation.text | linebreaks }}</span>
         {% endfor %}</div>
      </div>{% endfor %}
    </div>
  </div> <!-- Container -->
<script type="text/javascript">
  $(function(){
      $.fn.openModalEvent('new-sujet',
      '{% url "notes:create-sujet" %}?next={% url "maraudes:create" pk=maraude.pk %}',
      'Nouveau sujet');

      $.fn.openModalEvent('new-lieu',
      '{% url "maraudes:lieu-create" %}?next={% url "maraudes:create" pk=maraude.pk %}',
      'Nouveau lieu');
  });
</script>

{% endblock %}