{% from "table_search.html" import table_search with context %}
{% from "components/metadata_tables.html" import kv_table, resource_cost_table, collapsible_li, job_status_table %}
{% from "utils.html" import
batch_state_indicator, job_state_indicator, danger_button, submit_button, link, auto_refresh
%}
{% extends "layout.html" %}
{% block title %}Batch {{ batch['id'] }}{% endblock %}
{% block head %}
<script defer src="{{ base_path }}/common_static/focus_on_keyup.js"></script>
<script defer src="{{ base_path }}/batch/static/js/auto_refresh.js"></script>
{% endblock %}
{% block content %}
<div class='flex flex-wrap justify-around pt-8 gap-y-4'>
  <div class='drop-shadow-sm w-full md:basis-2/3 lg:basis-1/3'>
    <ul class='border border-collapse divide-y bg-slate-50 rounded'>
      <li class='p-4'>
        <div class='flex w-full justify-between items-center'>
          <div class='text-xl font-light'>Batch {{ batch['id'] }}</div>
          {{ batch_state_indicator(batch) }}
        </div>
        <div class='text-xl font-light py-2 overflow-auto'>
          {% if 'attributes' in batch and 'name' in batch['attributes'] %}
          {{ batch['attributes']['name'] }}
          {% endif %}
        </div>
        {% if not batch['complete'] %}
        {{ auto_refresh() }}
        {% endif %}
        <div class='flex justify-between items-center'>
          <div>
            <div class='font-light text-zinc-500'>Submitted by {{ batch['user'] }}</div>
            <div class='font-light text-zinc-500'>Billed to {{ batch['billing_project'] }}</div>
          </div>
          {% if not batch['complete'] and batch['state'] != 'Cancelled' %}
          <form action="{{ base_path }}/batches/{{ batch['id'] }}/cancel" method="post">
            <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
            {% if q is not none %}
            <input type="hidden" name="q" value="{{ q }}" />
            {% endif %}
            {{ danger_button('Cancel') }}
          </form>
          {% elif batch['complete'] %}
          <form action="{{ base_path }}/batches/{{ batch['id'] }}/delete" method="post">
            <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
            {{ danger_button('Delete') }}
          </form>
          {% endif %}
        </div>
      </li>

      {% call collapsible_li(true, 'Jobs', batch['n_jobs']) %}
      {{ job_status_table(batch, base_path) }}
      {% endcall %}

      {% if 'attributes' in batch and batch['attributes'] %}
      {% call collapsible_li(false, 'Attributes', '') %}
      {{ kv_table(batch['attributes']) }}
      {% endcall %}
      {% endif %}

      {% call collapsible_li(false, 'Duration', batch.get('duration') or '') %}
      {{ kv_table({
      'Created': batch.get('time_created') or '',
      'Completed': batch.get('time_completed') or '',
      })}}
      {% endcall %}

      {% call collapsible_li(false, 'Cost', batch.get('cost')) %}
      {{ resource_cost_table(batch['cost_breakdown'] or {}) }}
      {% endcall %}
    </ul>
  </div>
  <div class="flex flex-col w-full lg:basis-3/5">
    {{ table_search("job-search", base_path ~ "/batches/" ~ batch["id"]) }}
    <div class='flex flex-col mt-4'>
      <table class="table-auto w-full" id="batch">
        <thead>
          <th class='h-12 bg-slate-200 font-light text-md text-left px-4 rounded-tl'>ID</th>
          <th class='h-12 bg-slate-200 font-light text-md text-left rounded-tr md:rounded-tr-none'>
            Name</th>
          <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Exit Code</th>
          <th class='h-12 bg-slate-200 font-light text-md text-left hidden lg:table-cell'>Duration</th>
          <th class='h-12 bg-slate-200 font-light text-md text-left hidden md:table-cell rounded-tr'>Cost</th>
        </thead>
        <tbody class='border border-collapse border-slate-50'>
          {% for job in batch['jobs'] %}
          <tr class='border border-collapse hover:bg-slate-100'>
            <td class='font-light pl-4 w-20'>
              {{ link(base_path ~ '/batches/' ~ job['batch_id'] ~ '/jobs/' ~ job['job_id'], job['job_id']) }}
            </td>
            <td class='py-1 block overflow-x-auto'>
              <div class='flex flex-col space-x-0 md:space-x-2 md:flex-row md:flex-wrap'>
                {% if 'name' in job and job['name'] is not none %}
                <div class='text-wrap'>
                  {{ link(base_path ~ '/batches/' ~ job['batch_id'] ~ '/jobs/' ~ job['job_id'], job['name']) }}
                </div>
                {% else %}
                <div class='text-wrap text-zinc-400 italic'>
                  {{ link(base_path ~ '/batches/' ~ job['batch_id'] ~ '/jobs/' ~ job['job_id'], 'no name') }}
                </div>
                {% endif %}
                <div class='flex items-center'>
                  {{ job_state_indicator(job) }}
                </div>
              </div>
            </td>
            <td class='hidden lg:table-cell font-light'>
              {{ job.get('exit_code', '') }}
            </td>
            <td class='hidden lg:table-cell font-light'>
              {{ job.get('duration') or '' }}
            </td>
            <td class='hidden md:table-cell font-light'>
              {{ job.get('cost') or '' }}
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>

    <div class='pt-2 flex w-full justify-end'>
      {% if batch['jobs'] and batch['jobs'][0]['job_id'] is not none and batch['jobs'][0]['job_id'] > 1 %}
        <form method="GET" action="{{ base_path }}/batches/{{ batch['id'] }}">
          {% if q is not none %}
          <input type="hidden" name="q" value="{{ q }}" />
          {% endif %}
          {% if batch['jobs'][0]['job_id'] < 52 %}
          <input type="hidden" name="last_job_id" value="0" />
          {% else %}
          <input type="hidden" name="last_job_id" value="{{ batch['jobs'][0]['job_id'] - 51 }}" />
          {% endif %}
          {{ submit_button('Previous page') }}
        </form>
      {% endif %}
      {% if last_job_id is not none %}
        <form method="GET" action="{{ base_path }}/batches/{{ batch['id'] }}">
          {% if q is not none %}
          <input type="hidden" name="q" value="{{ q }}" />
          {% endif %}
          <input type="hidden" name="last_job_id" value="{{ last_job_id }}" />
          {{ submit_button('Next page') }}
        </form>
      {% endif %}
    </div>
  </div>
</div>
{% endblock %}