{{ define "settings" }}
  <section class="p-5">
    <form action="/settings/monitors/create" method="post">
      <label for="name">Name</label>
      <input type="text" name="name" id="name" placeholder="Github.com" />
      <p>Name of the monitor can be anything.</p>
      <label list="existing-groups" for="group">Monitor Group</label>
      <input
        type="text"
        name="group"
        id="group"
        placeholder="default"
        value="default"
        required
      />
      <datalist id="existing-groups">
        <option value="default"></option>
      </datalist>
      <p>
        Group monitors together. This affects how they are presented on the
        homepage.
      </p>
      <label for="workergroups">Worker Groups</label>
      <input
        type="text"
        name="workergroups"
        id="workergroups"
        placeholder="NA EU"
        required
      />
      <p>
        Worker groups are used to distribute the monitor to specific workers.
      </p>
      <label for="schedule">Schedule</label>
      <input
        type="text"
        name="schedule"
        id="schedule"
        placeholder="@every 1m"
        value="@every 1m"
        required
      />
      <p>
        Schedule is a cron expression that defines when the monitor 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="script">Script</label>
      <textarea required id="script" name="script" class="h-96">
{{ ScriptUnescapeString .Example }}</textarea
      >
      <div
        id="editor"
        class="hidden block w-full h-96 rounded-lg border border-gray-300 overflow-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()">Create</button>
    </form>
  </section>

  <script src="/static/monaco/vs/loader.js"></script>
  <script>
    function htmlDecode(input) {
      var doc = new DOMParser().parseFromString(input, "text/html");
      return doc.documentElement.textContent;
    }
    script = htmlDecode("{{ .Example }}");

    document.getElementById("editor").classList.remove("hidden");
    document.getElementById("script").hidden = true;

    function save() {
      const script = window.editor.getValue();
      document.getElementById("script").value = script;
    }

    require.config({ paths: { vs: "/static/monaco/vs" } });
    require(["vs/editor/editor.main"], function () {
      window.editor = monaco.editor.create(document.getElementById("editor"), {
        value: script,
        language: "javascript",
        minimap: { enabled: false },
        codeLens: false,
        contextmenu: false,
      });

      const divElem = document.getElementById("editor");
      const resizeObserver = new ResizeObserver((entries) => {
        window.editor.layout();
      });
      resizeObserver.observe(divElem);
    });
  </script>
{{ end }}