{% extends "base.html" %}
{% block title %}{{ t('config.title') }} · {{ t('wordmark') }}{% endblock %}
{% block head %}
<link rel="stylesheet" href="/static/vendor/codemirror.min.css">
<script src="/static/vendor/codemirror.min.js"></script>
<script src="/static/vendor/codemirror-yaml.min.js"></script>
{% endblock %}
{% block content %}
<div class="page-head">
  <h1>{{ t('config.title') }}</h1>
  <nav class="button-row" aria-label="Files">
    {% for name in files %}
    <a class="button{% if name != file %} quiet{% endif %}" href="/config?file={{ name }}">{{ name }}.yaml</a>
    {% endfor %}
  </nav>
</div>
{% if not reachable %}
  {% include "partials/unreachable.html" %}
{% else %}
  {% if empty_directory %}
  <div class="notice">
    {{ t('config.empty') }}
    <form method="post" action="/actions/config/init" style="display:inline"><button class="button" type="submit">{{ t('config.init') }}</button></form>
  </div>
  {% endif %}
  <div id="config-job">{% for job in pending %}{% include "partials/job.html" %}{% endfor %}</div>
  <p id="config-changed" class="notice" hidden>{{ t('config.changed') }}</p>
  <form id="editor-form" class="field" hx-target="#config-result" hx-swap="innerHTML">
    <input type="hidden" name="file" value="{{ file }}">
    <label for="editor">{{ file }}.yaml{% if missing %} <span class="dim">({{ t('config.missing') }})</span>{% endif %}</label>
    <textarea id="editor" name="text" rows="24" spellcheck="false">{{ text_body }}</textarea>
    <div class="button-row">
      <button class="button" type="button" hx-post="/actions/config/validate" hx-include="#editor-form">{{ t('config.validate') }}</button>
      <button class="button" type="button" hx-post="/actions/config/save" hx-include="#editor-form" hx-target="#config-job" hx-swap="innerHTML" hx-confirm="{{ t('config.save.confirm', file=file) }}" data-job-guard="config"{% if pending %} disabled{% endif %}>{{ t('config.save') }}</button>
      <span class="dim">{{ t('config.help') }}</span>
    </div>
  </form>
  <div id="config-result"></div>
{% endif %}
{% endblock %}
{% block scripts %}
{% if reachable %}
<script>
  const area = document.getElementById('editor');
  const editor = CodeMirror.fromTextArea(area, {
    mode: 'yaml', lineNumbers: true, indentUnit: 2, tabSize: 2, indentWithTabs: false,
    viewportMargin: Infinity, lineWrapping: true
  });
  // htmx reads the form before htmx:configRequest, so the textarea follows
  // the editor at every change rather than being filled at the request
  editor.on('change', function () { editor.save(); });
  function clearMarks() {
    for (let i = 0; i < editor.lineCount(); i++) editor.removeLineClass(i, 'background', 'line-error');
  }
  function findLine(subject, key) {
    const lines = editor.getValue().split('\n');
    let start = 0;
    if (subject) {
      const s = lines.findIndex(l => l.match(new RegExp('^\\s*-?\\s*(name:\\s*)?' + subject.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s*:?\\s*$')));
      if (s >= 0) start = s;
    }
    if (key) {
      const last = key.split('.').pop();
      for (let i = start; i < lines.length; i++) {
        if (lines[i].match(new RegExp('^\\s*-?\\s*' + last.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s*:'))) return i;
      }
    }
    return subject ? start : -1;
  }
  // the errors of a validation or of a failed save, marked at their keys
  function markErrors() {
    clearMarks();
    document.querySelectorAll('#config-result [data-key], #config-result [data-subject], #config-job [data-key], #config-job [data-subject]').forEach(function (el) {
      if (el.dataset.file && el.dataset.file !== '{{ file }}') return;
      const line = findLine(el.dataset.subject || '', el.dataset.key || '');
      if (line >= 0) editor.addLineClass(line, 'background', 'line-error');
    });
  }
  document.body.addEventListener('htmx:afterSettle', markErrors);
  // When a write of this file ends, an editor nobody has changed since it
  // was loaded is filled from the file on disk; a changed one keeps its text.
  let loaded = editor.getValue();
  const changedNote = document.getElementById('config-changed');
  document.body.addEventListener('job-finished', function (event) {
    const job = event.detail || {};
    if (job.operation !== 'config' || job.file !== '{{ file }}' || job.state !== 'done') return;
    fetch('/api/v1/config/{{ file }}', { headers: { Accept: 'application/yaml' } })
      .then(function (answer) { return answer.ok ? answer.text() : Promise.reject(answer.status); })
      .then(function (written) {
        // a form sends its text with CRLF line breaks; the editor holds LF
        const onDisk = written.replace(/\r\n/g, '\n');
        const current = editor.getValue();
        if (current === onDisk) {
          changedNote.hidden = true;
        } else if (current === loaded) {
          editor.setValue(onDisk);
          changedNote.hidden = true;
        } else {
          changedNote.hidden = false;
          return;
        }
        loaded = onDisk;
      })
      .catch(function () {});
  });
</script>
{% endif %}
{% endblock %}