{% extends "_base.html" %}
{% load static %}
{% load filters %}

{% block styles %}
{{ block.super }}
<!-- DataTables -->
<link rel="stylesheet" href="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.css' %}">
{% endblock styles %}

{% block page_title %}'subjects'{% endblock page_title %}
{% block page_header %}List of visits{% endblock page_header %}
{% block page_description %}{% endblock page_description %}

{% block title %}{{ block.super }} - List of subject's visits {% endblock %}

{% block breadcrumb %}
{% include "subjects/breadcrumb.html" %}
{% endblock breadcrumb %}

{% block maincontent %}

{% block content %}
<div class="box box-info">
  <div class="box-header with-border">
    <a href="{% url 'web.views.visits' %}" class="btn btn-block btn-default" onclick="history.back()">Back</a>
  </div>

  <div class="box-body">
    <form class="form-horizontal">
      {% for element in display %}
          <div class="box box-widget widget-user-2">
            <div class="widget-user-header bg-green">
              <h3 class="widget-user-username">Visit {{ forloop.counter }}</h3>
              <h5 class="widget-user-desc">
                {% if element.2 %}(Finished)
                {% else %}(Not finished)
                {% endif %}
              </h5>
            </div>
            <div class="box-footer">
              {% for field in element.0 %}
              <div class="col-md-6 form-group  {% if field.errors %}has-error{% endif %}">
                <label class="col-sm-4 control-label">{{ field.label }}</label>

                <div class="col-sm-8">
                  {{ field|add_class:'form-control' }}
                </div>

                {% if field.errors %}<span class="help-block">{{ field.errors }}</span>{% endif %}
              </div>
              {% endfor %}
            </div>
          </div>

          <div class="box box-widget widget-user-2">
            <div class="widget-user-header bg-default">
              <h3 class="widget-user-username">Visit's assignments</h3>
              <!--<h5 class="widget-user-desc">
              </h5>-->
            </div>
            <div class="box-footer">
              {% if element.1 %}
              <table id="table" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>No.</th>
                    <th>Type</th>
                    <th>Date</th>
                    <th>Time</th>
                    <th>Length [min]</th>
                    <th>Responsible</th>
                    <th>Plan/Modify</th>
                  </tr>
                </thead>
                <tbody>
                  {% for app in element.1 %}
                  <tr>
                    <td>{{ forloop.counter }}</td>
                    <td>{{ app.appointment_type }}</td>
                    <td>{{ app.datetime_when | date:"d-M-Y" }}</td>
                    <td>{{ app.datetime_when | time:"H:i" }}</td>
                    <td>{{ app.length }}</td>
                    <td>
                      {% if app.flying_team %}{{ app.worker_assigned.first_name }} {{app.worker_assigned.last_name}}
                      {% else %} {{ app.flying_team }}
                      {% endif %}
                    </td>
                    <td>
                      <a href="{% url 'web.views.assignment_edit' app.id %}" type="button" class="btn btn-block btn-default">Edit</a>
                    </td>
                  </tr>
                  {% endfor %}

                </tbody>
              </table>
              {% else %}
                No appointments found.
              {% endif %}
            </div>
          </div>

      {% endfor %}
    </form>
  </div><!-- /.box-body -->

</div>

{% endblock %}


{% endblock maincontent %}

{% block scripts %}
{{ block.super }}

<script src="{% static 'AdminLTE/plugins/datatables/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'AdminLTE/plugins/datatables/dataTables.bootstrap.min.js' %}"></script>

{% endblock scripts %}