{% extends "base.html" %}
{% block title %}Tasks · Apex Console{% endblock %}
{% block body %}
<header class="topbar">
  <div>
    <h1>Tasks</h1>
    <p>{{ tasks|length }} task(s) match the current filters</p>
  </div>
</header>

<section class="panel task-browser">
  <div class="section-title">
    <h2>Task List</h2>
  </div>
  <form class="filters" method="get" action="{{ url_for('runtime_console_tasks') }}">
    <label>
      Device
      <select name="device_id">
        <option value="">All devices</option>
        {% for device in devices %}
        <option
          value="{{ device.id }}"
          {% if device.id == selected_device_id %}selected{% endif %}
        >{{ device.name or device.id }}</option>
        {% endfor %}
      </select>
    </label>
    <label>
      Status
      <select name="status">
        <option value="">All statuses</option>
        {% for status_name in task_statuses %}
        <option
          value="{{ status_name }}"
          {% if status_name == selected_status %}selected{% endif %}
        >{{ status_name }}</option>
        {% endfor %}
      </select>
    </label>
    <noscript><button class="icon-text-button" type="submit"><span>Apply</span></button></noscript>
  </form>

  {% if not tasks %}
  <div class="empty-state compact">
    <span>No tasks match the current filters.</span>
  </div>
  {% else %}
  {% for task in tasks %}
  <a
    class="task-row"
    href="{{ url_for('runtime_console_task_detail', task_id=task.id) }}"
  >
    <span class="task-goal">{{ task.goal }}</span>
    <span class="task-meta">
      {{ device_names.get(task.device_id, task.device_id) }}
    </span>
    <span class="status-pill {{ task.status }}">{{ task.status }}</span>
  </a>
  {% endfor %}
  {% endif %}
</section>
{% endblock %}