{% extends "base.j2" %}

{% block content %}
<div class="container">
  <div class="row mb-3 mt-3">
    <div class="col-3">
      <div class="card text-white bg-secondary shadow">
        <div class="card-body">
          <h6 class="card-title">
            <div class="row">
              <div class="col-10">SCHEDULED</div>
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-calendar3" viewBox="0 0 16 16">
                  <path d="M14 0H2a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2M1 3.857C1 3.384 1.448 3 2 3h12c.552 0 1 .384 1 .857v10.286c0 .473-.448.857-1 .857H2c-.552 0-1-.384-1-.857z"/>
                  <path d="M6.5 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m-9 3a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2m3 0a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
                </svg>
              </div>
            </div>
          </h6>
          <h5 class="card-subtitle mb-2">{{ scheduled }}</h5>
          <p class="card-text">tasks deferred</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">QUEUED</div>
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-stack" viewBox="0 0 16 16">
                  <path d="m14.12 10.163 1.715.858c.22.11.22.424 0 .534L8.267 15.34a.6.6 0 0 1-.534 0L.165 11.555a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0l5.317-2.66zM7.733.063a.6.6 0 0 1 .534 0l7.568 3.784a.3.3 0 0 1 0 .535L8.267 8.165a.6.6 0 0 1-.534 0L.165 4.382a.299.299 0 0 1 0-.535z"/>
                  <path d="m14.12 6.576 1.715.858c.22.11.22.424 0 .534l-7.568 3.784a.6.6 0 0 1-.534 0L.165 7.968a.299.299 0 0 1 0-.534l1.716-.858 5.317 2.659c.505.252 1.1.252 1.604 0z"/>
                </svg>
              </div>
            </div>
          </h6>
          <h5 class="card-subtitle mb-2">{{ queued }}</h5>
          <p class="card-text">tasks enqueued</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">RUNNING</div>
              <div class="col-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-repeat" viewBox="0 0 16 16">
                  <path d="M11.534 7h3.932a.25.25 0 0 1 .192.41l-1.966 2.36a.25.25 0 0 1-.384 0l-1.966-2.36a.25.25 0 0 1 .192-.41m-11 2h3.932a.25.25 0 0 0 .192-.41L2.692 6.23a.25.25 0 0 0-.384 0L.342 8.59A.25.25 0 0 0 .534 9"/>
                  <path fill-rule="evenodd" d="M8 3c-1.552 0-2.94.707-3.857 1.818a.5.5 0 1 1-.771-.636A6.002 6.002 0 0 1 13.917 7H12.9A5 5 0 0 0 8 3M3.1 9a5.002 5.002 0 0 0 8.757 2.182.5.5 0 1 1 .771.636A6.002 6.002 0 0 1 2.083 9z"/>
                </svg>
              </div>
            </div>
          </h6>
          <h5 class="card-subtitle mb-2">{{ running }}</h5>
          <p class="card-text">tasks in execution</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">DONE</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">{{ finished }}</h5>
          <p class="card-text">tasks finished</p>
        </div>
      </div>
    </div>
  </div>
  <div class="row mb-3">
    <div class="col-12">
      <div class="card shadow">
        <div class="card-body">
          <form hx-patch="{{tasks_filter_url}}" hx-trigger="change" hx-target="#tasks">
            <div class="row mb-3" style="max-height: 100%">
              <div class="col-8">
                <h3 class="card-title">streaQ</h3>
              </div>
              <div class="col-2">
                <label for="function">Function</label>
                <select name="functions" class="form-select" multiple id="function">
                  {% for fn in functions %}
                  <option value="{{fn}}">{{ fn }}</option>
                  {% endfor %}
                </select>
              </div>
              <div class="col-2">
                <label for="status">Status</label>
                <select name="statuses" class="form-select" multiple id="status">
                  <option value="scheduled">SCHEDULED</option>
                  <option value="queued">QUEUED</option>
                  <option value="running">RUNNING</option>
                  <option value="done">DONE</option>
                </select>
              </div>
            </div>
          </form>
          <table class="table table-sm table-striped table-hover" id="tasks">
            <thead>
              <tr>
                <th scope="col">Enqueue time</th>
                <th scope="col">Function name</th>
                <th scope="col">Status</th>
                <th scope="col">Task ID</th>
              </tr>
            </thead>
            <tbody class="font-monospace">
              {% for task in tasks %}
              <tr>
                <td>{{ task.enqueue_time }}</td>
                <td>{{ task.fn_name }}</td>
                <td><span class="badge bg-{{task.color}} text-uppercase text-{{task.text_color}}">{{ task.status.value }}</span></td>
                <td><a href="{{task.url}}">{{ task.task_id }}</a></td>
              </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}
