{% extends "layout.html" %}


{% block content %}
<!-- This example requires Tailwind CSS v2.0+ -->
<!-- This example requires Tailwind CSS v2.0+ -->
<div class="max-w-6xl mx-auto px-2 sm:px-6 lg:px-8 pt-4 px-4 sm:px-6 lg:px-8">
    <div class="sm:flex sm:items-center">
      <div class="sm:flex-auto">
        <br>
        <!-- <img class="w-1/3 mx-auto" src="https://raw.githubusercontent.com/koaning/skedulord/main/docs/full-logo.png"/> -->
        <h1 class="text-xl font-semibold text-gray-900">Jobs</h1>
        <p class="mt-2 text-sm text-gray-700">You can inspect all the logs from the tables below.</p>
      </div>
    </div>
    <div class="mt-8 flex flex-col">
      <div class="-my-2 -mx-4 overflow-x-auto sm:-mx-6 lg:-mx-8">
        <div class="inline-block min-w-full py-2 align-middle md:px-6 lg:px-8">
          <table class="min-w-full divide-y divide-gray-300">
            <thead>
              <tr>
                <th scope="col" class="py-3.5 pl-4 pr-3 text-left text-sm font-semibold text-gray-900 sm:pl-6 md:pl-0">Jobname</th>
                <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Status</th>
                <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Time Taken</th>
                <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Last Run</th>
                <th scope="col" class="py-3.5 px-3 text-left text-sm font-semibold text-gray-900">Runs</th>
              </tr>
            </thead>
            <tbody class="divide-y divide-gray-200">
              {% for job in jobs %}
                <tr>
                    <td class="whitespace-nowrap py-4 pl-4 pr-3 text-sm font-medium text-gray-900 sm:pl-6 md:pl-0">{{job['jobname']}}</td>
                    <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">
                        {% if job['status'] == 'success' %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-green-500"" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                        </svg>
                        {% endif %}
                        {% if job['status'] != 'success' %}
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 stroke-red-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                            <path stroke-linecap="round" stroke-linejoin="round" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                        {% endif %}
                        <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{job['timediff']}}s</td>
                    <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500">{{job['start']}}</td>
                    <td class="whitespace-nowrap py-4 px-3 text-sm text-gray-500 font-bold">
                        <a href="{{job['jobname']}}.html">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
                                <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                              </svg>
                        </a>
                    </td>
                </tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
  
{% endblock %}