{% extends 'base.html' %}

{% block content %}
<a href="/">«back</a>
<div class="grid" x-data="{ newCronJobName: null }">
  <div><h1>{% block title %}CronJobs in {{ namespace }} {% endblock %}</h1></div>
  <div style="text-align: right;"><div role="button"
    @click="newCronJobName = prompt('New CronJob Name:', 'example-cronjob');
      window.location.href = `/namespaces/{{namespace}}/cronjobs/${newCronJobName}`;"
    >Create CronJob</div></div>
</div>
{% for cronjob in cronjobs %}
<div x-cloak x-data="{jobs: [], isLoading: true, failing: false, cloneJobName: null, wrapLogs: false}" x-init="async () => {
  const response = apiClient('{{namespace}}', 'cronjobs', '{{cronjob.metadata.name}}', 'getJobs')
    .then( jobsArray => {
      jobs = jobsArray;
      isLoading = false;
      for (let job in jobsArray) {
        if (jobsArray[job].status.failed) {
          failing = true;
        }
      }
    });
  };
  ">
  <article>
    <table>
      <tr>
        <th><strong>{{ cronjob.metadata.name }}</strong></th>
        <th><strong x-show="failing" style="color:red">Failures!</strong></th>
        <th>
          <div x-data="{ suspended: {{cronjob.spec.suspend | lower }} }">
            <label>
              Suspend
              <input type="checkbox" role="switch"
                @click="apiClient('{{namespace}}', 'cronjobs', '{{cronjob.metadata.name}}', 'suspend', 'POST', '')"
                x-model="suspended" />
            </label>
          </div>
        </th>
        <th>
          <div role="button"
            @click="apiClient('{{namespace}}', 'cronjobs', '{{cronjob.metadata.name}}', 'trigger', 'POST', '', true)">
            Trigger
          </div>
        </th>
        <th>
          <a role="button" href="/namespaces/{{namespace}}/cronjobs/{{cronjob.metadata.name}}">Edit</a>
        </th>
        <th>
          <div role="button"
            @click="cloneJobName = prompt('New CronJob Name:', '{{cronjob.metadata.name}}');
              let data = JSON.stringify({name: cloneJobName});
              console.log(data);
              apiClient('{{namespace}}', 'cronjobs', '{{cronjob.metadata.name}}', 'clone', 'POST', data, false)
              .then(response => {
                window.location.href = `/namespaces/{{namespace}}/cronjobs/${cloneJobName}`;
              });">
            Clone
          </div>
        </th>
        <th>
          <div role="button"
            @click="confirm('Are you sure?') ? apiClient('{{namespace}}', 'cronjobs', '{{cronjob.metadata.name}}', 'delete', 'POST', '', true) : false;">
            Delete
          </div>
        </th>
      </tr>
    </table>
    <p>
      Schedule: <code>{{ cronjob.spec.schedule }}</code><br />
      Last Scheduled: <code>{{ cronjob.status.lastScheduleTime }}</code><br />
      {% if cronjob.status.lastSuccessfulTime %}
        Last Successful Run: <code>{{ cronjob.status.lastSuccessfulTime }}</code><br /></p>
      {% endif %}
    </p>
    <details id="{{cronjob.metadata.name}}-detail">
      <summary>details</summary>
      <p>image: <code>{{ cronjob.spec.jobTemplate.spec.template.spec.containers[0].image }}</code><br />
      {% if cronjob.spec.jobTemplate.spec.template.spec.containers[0].command %}
        command: <code>{{cronjob.spec.jobTemplate.spec.template.spec.containers[0].command | join(' ') }}</code><br />
      {% endif %}
      {% if cronjob.spec.jobTemplate.spec.template.spec.containers[0].args %}
        args: <code>{{cronjob.spec.jobTemplate.spec.template.spec.containers[0].args | join(' ') }}</code><br />
      {% endif %}
      <p>Jobs and Pods</p>
      <p>
      <ul>
        <template x-for="job in jobs.reverse()">
          <div>
            <li><code x-text="job.metadata.name"></code>
              <small x-text="'Age: ' + job.status.age"></small>
              <span x-show="job.status.failed" style="color:red">Failed!</span>
              <a href="#{{cronjob.metadata.name}}-detail"
                @click="confirm('Are you sure?') ? apiClient('{{namespace}}', 'jobs', job.metadata.name, 'delete', 'POST', '', true) : false;">
                [delete]</a>
            </li>
            <ul>
              <template x-for="pod in job.pods.reverse()">
                <div>
                  <li>
                    <code x-text="pod.metadata.name"></code>
                    <small x-text="'Age: ' + pod.status.age"></small>
                  </li>
                  <div style="overflow:auto;" x-data="fetchLogs()">
                    <details x-on:click="if (!logs) { getLogs('{{namespace}}', pod.metadata.name) }">
                      <summary class="secondary" role="button">Logs</summary>
                      <button class="outline" @click="wrapLogs = ! wrapLogs">Wrap Text</button>
                      <template x-if="logs">
                        <code>
                          <pre
                            x-bind:style="wrapLogs ? 'overflow-wrap: anywhere; white-space: pre-wrap;' : 'white-space: pre;'"
                            x-text="logs">
                          </pre>
                        </code>
                      </template>
                    </details>
                  </div>
                </div>
              </template>
            </ul>
          </div>
        </template>
      </ul>
      </p>
    </details>
  </article>
</div>
{% endfor %}
<script>
  function fetchLogs() {
    return {
      isLoading: false,
      logs: null,
      getLogs(namespace, podname) {
        this.isLoading = true;
        fetch(`/api/namespaces/${namespace}/pods/${podname}/logs`)
          .then(res => res.text())
          .then(data => {
            this.isLoading = false;
            this.logs = data;
          })
      }
    }
  };

  function apiClient(namespace, objectType, objectName, action, callMethod = 'GET', data = null, refresh = false) {
    return (
      fetch(`/api/namespaces/${namespace}/${objectType}/${objectName}/${action}`,
        {
          method: callMethod,
          body: data,
          headers: { 'Content-Type': 'application/json' }
        })
        .then(response => response.json())
        .then(result => {
          if (refresh) {
            location.reload();
          }
          return result;
        })
        .catch(err => {
          alert(`Something went wrong: ${err}`);
        })

    )
  };
</script>
{% endblock %}