{% from "table_search.html" import table_search with context %}
{% from "utils.html" import batch_state_indicator, submit_button, link, truncated_link %}
{% extends "layout.html" %}
{% block title %}Batches{% endblock %}
{% block head %}
<script defer src="{{ base_path }}/common_static/focus_on_keyup.js"></script>
{% endblock %}
{% block content %}
<div class='flex-col m-auto w-full space-y-4'>
  <h1 class="text-2xl font-light">Batches</h1>
  {{ table_search("batch-search", base_path ~ "/batches") }}
  <table class='table-fixed w-full' id='batches'>
    <thead>
      <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none' style='width:1rem'></th>
      <th class='h-12 bg-slate-200 font-light text-md text-center rounded-tl rounded-tr md:rounded-tr-none' style='width:6rem'>ID</th>
      <th class='h-12 bg-slate-200 font-light text-md rounded-tr text-left md:rounded-tr-none'>Batch Name</th>
      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Billing Project</th>
      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Job Statuses</th>
      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:12rem'>Created</th>
      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:12rem'>Completed</th>
      <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell' style='width:8rem'>Duration</th>
      <th class='h-12 bg-slate-200 font-light text-md text-left hidden md:table-cell rounded-tr' style='width:6rem'>Cost</th>
    </thead>
    <tbody class='border border-collapse border-slate-50'>
      {% for batch in batches %}
      <tr class='border border-collapse hover:bg-slate-100'>
        <td class='table-cell'>
            {{ batch_state_indicator(batch) }}
        </td>
        <td class='table-cell'>
          <div class='flex justify-center font-light'>
            {{ link(base_path ~ "/batches/" ~ batch['id'], batch['id']) }}
          </div>
        </td>
        <td class='table-cell'>
          <div class='space-y-1 md:flex-row md:flex-wrap md:items-center md:space-y-0'>
            {% if 'attributes' in batch and 'name' in batch['attributes'] %}
              {{ truncated_link(base_path ~ "/batches/" ~ batch['id'], batch['attributes']['name']) }}
            {% else %}
            <div class='text-wrap pr-4 text-zinc-400 italic'>
              {{ truncated_link(base_path ~ "/batches/" ~ batch['id'], 'no name') }}
            </div>
            {% endif %}
          </div>
        </td>
        <td class='hidden lg:table-cell'>
          <div class='font-light text-zinc-500 truncating-text'>{{ batch['billing_project'] }}</div>
        </td>
        <td class='hidden lg:table-cell overflow-hidden'>
          <div class='flex items-center font-light'>
            {% set statuses = [] %}
            {% if batch['n_jobs'] - batch['n_completed'] != 0 %}
            {% do statuses.append((batch['n_jobs'] - batch['n_completed'])|string ~ ' pending') %}
            {% endif %}
            {% if batch['n_succeeded'] != 0 %}
            {% do statuses.append(batch['n_succeeded'] ~ ' succeeded') %}
            {% endif %}
            {% if batch['n_cancelled'] != 0 %}
            {% do statuses.append(batch['n_cancelled'] ~ ' cancelled') %}
            {% endif %}
            {% if batch['n_failed'] != 0 %}
            {% do statuses.append(batch['n_failed'] ~ ' failed') %}
            {% endif %}
            {{ statuses|join(', ') }}
          </div>
        </td>
        <td class='hidden lg:table-cell font-light'>
          {{ batch.get('time_created') or '' }}
        </td>
        <td class='hidden lg:table-cell font-light'>
          {{ batch.get('time_completed') or '--' }}
        </td>
        <td class='hidden lg:table-cell font-light'>
          {{ batch.get('duration') or '' }}
        </td>
        <td class='hidden md:table-cell font-light'>
          {{ batch.get('cost') or '' }}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
  {% if last_batch_id is not none %}
  <div class='pt-2 flex w-full justify-end'>
    <form method="GET" action="{{ base_path }}/batches">
      {% if q is not none %}
      <input type="hidden" name="q" value="{{ q }}" />
      {% endif %}
      <input type="hidden" name="last_batch_id" value="{{ last_batch_id }}" />
      {{ submit_button('Next page') }}
    </form>
  </div>
  {% endif %}
</div>
{% endblock %}