{{ define "settings" }}
  <section class="p-5">
    <form action="/settings/checks/{{ .Check.Id }}" method="post">
      <h2>Configuration</h2>
      <label for="workergroups">Worker Groups</label>
      <input
        type="text"
        name="workergroups"
        id="workergroups"
        value="{{ range .Check.WorkerGroups }}{{ . }}{{ end }}"
        required
      />
      <p>Worker groups are used to distribute the check to specific workers.</p>
      <label for="schedule">Schedule</label>
      <input
        type="text"
        name="schedule"
        id="schedule"
        value="{{ .Check.Schedule }}"
        required
      />
      <p>
        Schedule is a cron expression that defines when the check should be
        executed.
        <br />
        You can also use <code>@every [interval]</code> where interval is a
        duration like 5m, 1h, 60s. Or use <code>@hourly</code>,
        <code>@daily</code>, <code>@weekly</code>, <code>@monthly</code>,
        <code>@yearly</code>.
      </p>
      <label for="filter">Filter</label>
      <textarea required id="filter" name="filter" class="h-12">
{{ ScriptUnescapeString .Check.Filter }}</textarea
      >
      <div
        id="editor-filter"
        class="hidden block w-full h-12 rounded-lg border border-gray-300 overflow-hidden"
      ></div>
      <p>
        With filter we specify what targets the check will run on. For whole
        grammar on what the filter query can look like, please read the
        <a
          target="_blank"
          href="https://github.com/hashicorp/mql/blob/main/GRAMMAR.md"
          >MQL Grammar</a
        >
        documentation.
      </p>
      <label for="script">Script</label>
      <textarea required id="script" name="script" class="h-96">
{{ ScriptUnescapeString .Check.Script }}</textarea
      >
      <div
        id="editor-script"
        class="block w-full h-96 rounded-lg border border-gray-300 overflow-hidden hidden"
      ></div>
      <p>
        Script is what determines the status of a service. You can read more
        about it on
        <a target="_blank" href="https://k6.io/docs/using-k6/http-requests/"
          >k6 documentation</a
        >.
      </p>
      <button type="submit" onclick="save()">Save</button>
    </form>
  </section>

  <div class="flex md:flex-row flex-col gap-4 h-min">
    <section class="p-5 flex-1">
      <h2 class="mb-2 flex flex-row gap-2">
        State
        {{ if eq .Check.State "ACTIVE" }}
          <span
            class="self-center h-fit w-fit px-2 text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800"
          >
            ACTIVE
          </span>
        {{ else if eq .Check.State "PAUSED" }}
          <span
            class="self-center h-fit w-fit px-2 text-xs leading-5 font-semibold rounded-full bg-yellow-100 text-yellow-800"
          >
            PAUSED
          </span>
        {{ end }}
      </h2>
      <p class="text-sm mb-2">
        Pausing the check will stop it from executing. This can be useful in
        cases of expected downtime. Or when the check is not needed anymore.
      </p>
      {{ if eq .Check.State "ACTIVE" }}
        <a
          class="block text-center py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100"
          href="/settings/checks/{{ .Check.Id }}/disable"
          >Pause</a
        >
      {{ else if eq .Check.State "PAUSED" }}
        <a
          class="block text-center py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100"
          href="/settings/checks/{{ .Check.Id }}/enable"
          >Resume</a
        >
      {{ end }}
    </section>

    <section class="p-2 flex-1 border-4 border-red-300">
      <h2 class="mb-2">Danger Zone</h2>
      <p class="text-sm mb-2">Permanently delete this check.</p>
      <a
        class="block text-center focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2"
        href="/settings/checks/{{ .Check.Id }}/delete"
        >Delete</a
      >
    </section>
  </div>

  <section>
    <table>
      <caption>
        History
        <p>Last 10 executions of check script.</p>
      </caption>
      <thead>
        <tr>
          <th>Check ID</th>
          <th>Status</th>
          <th>Worker Group</th>
          <th>Created At</th>
          <th>Duration</th>
          <th>Note</th>
        </tr>
      </thead>
      <tbody>
        {{ range .History }}
          {{ if eq .Status "Running" }}
            <tr>
              <td>{{ .CheckId }}</td>
              <td>
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ if eq .Status "SUCCESS" }}
                    bg-green-100 text-green-800
                  {{ else }}
                    bg-red-100 text-red-800
                  {{ end }}"
                >
                  {{ .Status }}
                </span>
              </td>
              <td>
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"
                >
                  { .WorkerGroupName }
                </span>
              </td>
              <td>{ .CreatedAt.Time.Format "2006-01-02 15:04:05" }</td>
              <td>/</td>
              <td class="whitespace-normal">/</td>
            </tr>
          {{ else }}
            <tr>
              <td>{{ .CheckId }}</td>
              <td>
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full {{ if eq .Status "SUCCESS" }}
                    bg-green-100 text-green-800
                  {{ else }}
                    bg-red-100 text-red-800
                  {{ end }}"
                >
                  {{ .Status }}
                </span>
              </td>
              <td>
                <span
                  class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-blue-100 text-blue-800"
                >
                  { .WorkerGroupName }
                </span>
              </td>
              <td>{ .CreatedAt.Time.Format "2006-01-02 15:04:05" }</td>
              <td>{{ .Duration }}</td>
              <td class="whitespace-normal">{ .Note }</td>
            </tr>
          {{ end }}
        {{ end }}
      </tbody>
    </table>
  </section>

  <script src="/static/monaco/vs/loader.js"></script>
  <script>
    const items = [
      { name: "filter", language: "" },
      { name: "script", language: "javascript" },
    ];

    function save() {
      for (const { name } of items) {
        const elem = window.editors[name].getValue();
        document.getElementById(name).value = elem;
      }
    }

    window.editors = {};
    for (const { name, language } of items) {
      const textarea = document.getElementById(name);
      const editor = document.getElementById("editor-" + name);

      editor.classList.remove("hidden");
      textarea.hidden = true;

      require.config({ paths: { vs: "/static/monaco/vs" } });
      require(["vs/editor/editor.main"], function () {
        window.editors[name] = monaco.editor.create(editor, {
          value: textarea.value,
          language: language,
          minimap: { enabled: false },
          codeLens: false,
          contextmenu: false,
          scrollBeyondLastLine: false,
        });

        const resizeObserver = new ResizeObserver((entries) => {
          window.editors[name].layout();
        });
        resizeObserver.observe(editor);
      });
    }
  </script>
{{ end }}