{% extends "::layout.html.twig" %}

{% block body %}
  <div class="page-header">
    <h1>Paginated project list</h1>
    <p class="lead">Pagination with sorters and custom filters.</p>
  </div>

  <table class="table table-hover">
    <thead>
      <tr>
        <th>#</th>
        <th>{{ sorter_link(projects, "p.code", "Code") }}</th>
        <th>{{ sorter_link(projects, "p.name", "Name") }}</th>
        <th>{{ sorter_link(projects, "p.hoursSpent", "Hours Spent") }}</th>
        <th>{{ sorter_link(projects, "l.code", "Language") }}</th>
        <th></th>
      </tr>

      <tr role="row" class="filter">
        <td></td>
        <td></td>
        <td>{{ filter_search(projects, "p.name") }}</td>
        <td>{{ filter_select(projects, "p.hoursSpent", spentTimeGroups) }}</td>
        <td>{{ filter_select(projects, "l.code", languages) }}</td>
        <td></td>
      </tr>
    </thead>
    <tbody>
      {% for project in projects %}
        <tr>
          <td>
            <i class="fa {% if project.enabled %}fa-check text-success{% else %}fa-times text-muted{% endif %}"></i>
            {{ project.id }}
          </td>
          <td>{{ project.code }}</td>
          <td>{{ project.name }}</td>
          {% if project.isOverDeadline %}
            <td class="text-danger">{{ project.hoursSpent }}</td>
          {% else %}
            <td class="text-success">{{ project.hoursSpent }}</td>
          {% endif %}
          <td>{{ project.language.code }}</td>
          <td>
            <a href="{{ path("project_toggle", projects.query|merge({id: project.id})) }}" class="btn btn-xs btn-default">
              {% if project.enabled %}Disable{% else %}Enable{% endif %}
            </a>
          </td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  <div class="panel-footer">
    {{ pagination(projects) }}
  </div>
{% endblock %}