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

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

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

{% block sidebar %}
  {{ block.super }}
    <form action="" method="get" class="form-horizontal px-3">
      <label for="submit-form" class="mt-3 btn btn-success btn-block">Enregistrer</label>
      <h4 class="sidebar-heading mt-4">Choisir une autre période</h4>
      {% bootstrap_form select_form layout='horizontal' %}
      {% bootstrap_button "Choisir" button_type="submit" button_class="btn btn-dark btn-sm btn-block" %}
    </form>
{% endblock %}

{% block page_content %}
<form method="post" action="{% url 'maraudes:planning' %}?month={{month}}&year={{year}}">
  <input type="submit" id="submit-form" class="invisible" />
  {% csrf_token %}
  {{ formset.management_form }}
<table class="table table-responsive">
  <tr class="thead-dark">
    {% for weekday in weekdays %}<th>{{weekday}}</th>{% endfor %}
  </tr>
  {% for week in weeks %}
  <tr>
    {% for day, form in week %}
    <td {% if form %}class="table-{% if form.instance.id %}success{%else%}warning{%endif%}"{% endif %}>
        {% if day %}<strong class="float-left">{{ day }}</strong>
          {% if form %}
            {% bootstrap_field form.id %}
            {% bootstrap_field form.date %}
            <div class="d-flex form-group row pl-3">
              {% bootstrap_field form.heure_debut size="small" show_label=False %}
              {% bootstrap_field form.binome size="small" show_label=False %}
              {% bootstrap_field form.referent size="small" show_label=False %}
            </div>
            {% endif %}
      {% endif %}
    </td>
    {% endfor %}
  </tr>
  {% endfor %}
</table>
</form>
{% endblock %}