
<table class="table bootstrap-datatable datatable">
      <thead>
        <tr>
{% if not services %}
        <div class="col-xs-11 col-xs-offset-1">
        <hr></hr>
            No services configured
        </div>
        </tr>
{% else %}
          <th>Name</th>
          <th>Overall</th>
          <th>Active checks</th>
          <th>Disabled checks</th>
          <th>Acknowledgment</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
      {% for service in services %}
        <tr class="{% if service.alerts_enabled %}enabled{% else %}warning{% endif %}">
          <td>
            <a href="{% url "service" pk=service.id %}" title="Alerts {% if service.alerts_enabled %}enabled{% else %}disabled{% endif %}">{{service.name}} </a>
          </td>
          <td>
            <span class="label label-{% if not service.alerts_enabled %}warning{% else %}{% if service.overall_status == service.PASSING_STATUS %}success{% else %}danger{% endif %}{% endif %}">{% if service.alerts_enabled %}{{ service.overall_status|lower|capfirst }}{% else %}Disabled{% endif %}</span>
          </td>
          <td>
            <span class="label label-{% if service.active_status_checks.all.count > 0 %}{% if service.overall_status != service.PASSING_STATUS %}danger{% else %}success{% endif %}{% else %}default{% endif %}">{{ service.active_status_checks.all.count }}</span>
          </td>
          <td>
            <span class="label label-{% if service.inactive_status_checks.all.count > 0 %}warning{% else %}default{% endif %}">{{ service.inactive_status_checks.all.count }}</span>
          </td>
          <td>
  {% if service.overall_status != service.PASSING_STATUS %}
{#  <div class="col-xs-12 alert alert-warning">#}
  <div>
    <div class="row">
    {% if service.unexpired_acknowledgement %}
      <div class="col-xs-10">
        <a href="{% url 'remove-acknowledgement' pk=service.id %}" class="btn btn-xs btn-warning btn-block"><i class="glyphicon glyphicon-play"></i> Re-enable alerts</a>
      </div>
    {% else %}
      <div class="col-xs-10">
        <a class="btn btn-success btn-block btn-xs" href="{% url 'acknowledge-alert' pk=service.id %}"><i class="glyphicon glyphicon-pause"></i> Acknowledge alert</a>
      </div>
    {% endif %}
    </div>
  </div>
  {% endif %}
          </td>
          <td class="text-right">
            <a class="btn btn-xs" href="{% url "update-service" pk=service.id %}" role="button">
              <i class="glyphicon glyphicon-edit"></i>
            </a>
          </td>
        </tr>
      {% endfor %}
      </tbody>
{% endif %}
    </table>
