{% extends "base.j2" %}

{% block workers %}active{% endblock %}

{% block content %}
<div class="container">
  <div class="row mb-3 mt-3">
    <div class="col-3">
      <div class="card text-light bg-secondary shadow">
        <div class="card-body">
          <h6 class="card-title">
            <div class="row">
              <div class="col-10">TRIES</div>
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
                  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/>
                </svg>
              </div>
            </div>
          </h6>
          <h5 class="card-subtitle mb-2">{{ "%.1f"|format(avg_tries|default(0)) }} tries</h5>
          <p class="card-text">average try count</p>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card text-dark bg-info shadow">
        <div class="card-body">
          <h6 class="card-title">
            <div class="row">
              <div class="col-10">WAIT TIME</div>
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
                  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/>
                </svg>
              </div>
            </div>
          </h6>
          <h5 class="card-subtitle mb-2">{{ "%.1f"|format(avg_wait_ms|default(0)) }} ms</h5>
          <p class="card-text">average wait time</p>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card text-dark bg-warning shadow">
        <div class="card-body">
          <h6 class="card-title">
            <div class="row">
              <div class="col-10">SLOWDOWN</div>
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
                  <path d="M2 1.5a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-1v1a4.5 4.5 0 0 1-2.557 4.06c-.29.139-.443.377-.443.59v.7c0 .213.154.451.443.59A4.5 4.5 0 0 1 12.5 13v1h1a.5.5 0 0 1 0 1h-11a.5.5 0 0 1 0-1h1v-1a4.5 4.5 0 0 1 2.557-4.06c.29-.139.443-.377.443-.59v-.7c0-.213-.154-.451-.443-.59A4.5 4.5 0 0 1 3.5 3V2h-1a.5.5 0 0 1-.5-.5m2.5.5v1a3.5 3.5 0 0 0 1.989 3.158C7.222 6.513 7.5 7.06 7.5 7.5v1c0 .44-.278.986-1.011 1.342A3.5 3.5 0 0 0 4.5 13v1h7v-1a3.5 3.5 0 0 0-1.989-3.158C8.778 9.487 8.5 8.94 8.5 8.5v-1c0-.44.278-.986 1.011-1.342A3.5 3.5 0 0 0 11.5 3V2z"/>
                </svg>
              </div>
            </div>
          </h6>
          <h5 class="card-subtitle mb-2">{{ "%.2f"|format(avg_slowdown|default(0)) }}x</h5>
          <p class="card-text">average bounded slowdown</p>
        </div>
      </div>
    </div>
    <div class="col-3">
      <div class="card text-white bg-success shadow">
        <div class="card-body">
          <h6 class="card-title">
            <div class="row">
              <div class="col-10">SUCCESS RATE</div>
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check2-square" viewBox="0 0 16 16">
                  <path d="M3 14.5A1.5 1.5 0 0 1 1.5 13V3A1.5 1.5 0 0 1 3 1.5h8a.5.5 0 0 1 0 1H3a.5.5 0 0 0-.5.5v10a.5.5 0 0 0 .5.5h10a.5.5 0 0 0 .5-.5V8a.5.5 0 0 1 1 0v5a1.5 1.5 0 0 1-1.5 1.5z"/>
                  <path d="m8.354 10.354 7-7a.5.5 0 0 0-.708-.708L8 9.293 5.354 6.646a.5.5 0 1 0-.708.708l3 3a.5.5 0 0 0 .708 0"/>
                  </svg>
              </div>
            </div>
          </h6>
          <h5 class="card-subtitle mb-2">{{ "%.1f"|format(success_rate|default(0)) }}%</h5>
          <p class="card-text">tasks completed without errors</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">
          <div class="row mb-3" style="max-height: 100%">
            <div class="col-8">
              <div class="row">
                <h3 class="card-title">Active Workers</h3>
              </div>
            </div>
          </div>
          <table class="table table-sm table-striped table-hover" id="tasks">
            <thead>
              <tr>
                <th scope="col" class="w-25">Worker ID</th>
                <th scope="col" class="w-75">Task Statistics</th>
              </tr>
            </thead>
            <tbody class="font-monospace">
              {% for key, worker in all %}
              <tr>
                <td>{{ key }}</td>
                <td>{{ worker }}</td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
