{% extends 'base.html' %}

<br><br><br>

{% block content %}
<div class="row">

  <!-- Activity list table -->
  <div class="col-md-9">
    <div class="panel panel-default">
      <div class="panel-heading text-center">
        <strong>Activities ({{ quantity }})</strong>
      </div>

      <div class="panel-body">

        <table border="1" class="table">

          <br>

          <tr style="background-color: #eee">
            <th>Type</th>
            <th>Actor</th>
            <th>When</th>
            <th>Description</th>
          </tr>

          {% for activity in activity_list %}
            <tr>
              <td>{{ activity.type }}</td>
              <td>
                {% for actor in activity.actor.all %}
                  {{ actor.name }}<br/>
                {% endfor %}
              </td>
              <td>{{ activity.when|date }}</td>
              <td>{{ activity.description }}</td>
            </tr>
          {% endfor %}

        </table>
      </div>
    </div>
  </div>

  <!-- Activity filter form -->
  <div class="col-md-3 text-center">
    <div class="panel panel-default">
      <div class="panel-heading">
        <span class="fa fa-search" aria-hidden="true"></span>
        <strong>Filter</strong>
      </div>

      <div class="panel-body">
        <form action="{% url 'plugins:conectividadeapp:activity_list' %}" method="get" class="form-inline">
          {% csrf_token %}

          <div class="form-group">
            <label>Month</label>
            <input type="month" max="{{ current_year }}-{{ current_month }}" name="year_month" class="form-control" placeholder="{{ current_year }}-{{ current_month }}" value="{{ current_year }}-{{ current_month }}">
          </div>

          <div class="text-right">
            </br>
            <button type="submit" class="btn btn-primary">
              <span class="fa fa-search" aria-hidden="true"></span> Apply
            </button>
            <a href="{% url 'plugins:conectividadeapp:activity_list' %}" class="btn btn-default">
              <span class="fa fa-remove" aria-hidden="true"></span> Clear
            </a>
          </div>

        </form>
      </div>
    </div>
  </div>

</div>

{% endblock %}