{% for label, messages in app.flashes %}
  {% for message in messages %}
    <div class="alert alert-{{ label }}">
      {{ message|nl2br }}
    </div>
  {% endfor %}
{% endfor %}

<div class="card mb-2 overflow-hidden">
	<div class="card-header d-flex justify-content-between">
    <div>
      {{ creating ? 'Create' : 'Edit' }} Template
    </div>
    <div>
      {% if not creating %}
        <button class="btn btn-danger" id="deleteButton">Delete</a>
      {% endif %}
    </div>
	</div>
	<div class="card-body">
		<form method="post" id="templateData">
			<div class="form-group">
				<label for="name">Name</label>
				<input type="text" class="form-control" name="name" placeholder="foobar" value="{{ name|default }}">
			</div>
			<div class="form-group mt-2">
				<label for="content">Content</label>
				<div id="editor" class="border rounded w-100" style="height: 250px;">{{ template|default }}</div>
				<input type="hidden" name="content" id="content" value="{{ template|default }}">
			</div>
			<div class="form-group mt-2">
				<button type="submit" class="btn btn-primary">{{ creating ? 'Create' : 'Update' }}</button>
			</div>
		</form>
	</div>
</div>

<div class="modal fade" id="templateError" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Error while saving template.</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body" id="templateErrorContent">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Dismiss</button>
      </div>
    </div>
  </div>
</div>

<script>
  {% if not creating %}
  if (document.getElementById('deleteButton')) {
    document.getElementById('deleteButton').addEventListener('click', function() {
      if (confirm('Are you sure you want to delete this template?')) {
        axios({
          method: 'delete',
          url: '{{ path('admin.template.delete', {'name': name}) }}',
        })

        .then(function(response) {
          window.location.href = '{{ path('admin.template') }}';
        })

        .catch(function(error) {
          Swal.fire({
            icon: 'error',
            title: 'Oops...',
            text: 'Something went wrong!',
          })
        })
      }
    });
  }

  var needSaveChange = false;
  document.querySelector("form").addEventListener("submit", function(event) {
    event.preventDefault();

    const form = JSON.stringify(Object.fromEntries((new FormData(this)).entries()))
    makeRequest({
      url: "{{ path('admin.template.edit', {'name': name}) }}",
      method: "POST",
      data: form,
      headers: {
        "Content-Type": "application/json"
      }
    })

    .then(function(response) {
      // trigger templateError modal
      if (!response.data.success) {
        document.getElementById('templateErrorContent').innerHTML = response.data.message + `<br><br><pre>` + response.data.raw_error + `</pre>`;
        var templateErrorModal = new bootstrap.Modal(document.getElementById('templateError'));
        templateErrorModal.show();
      } else {
        needSaveChange = false;
        Toast.fire({
          title: 'Template saved successfully',
          text: response.data.message,
          icon: 'success'
        });
      }
    })

    .catch(function(error) {
      Swal.fire({
        icon: 'error',
        title: 'Oops...',
        text: 'Something went wrong!',
      })
    });
  });
  {% endif %}

  ace.require("ace/ext/language_tools");
  var editor = ace.edit("editor", {
      theme: "ace/theme/github_dark",
      mode: "ace/mode/{{ ideMode }}",
  });

  editor.setOptions({
    enableSnippets: true,
    enableLiveAutocompletion: true,
  });

  editor.session.on('change', function(delta) {
    document.getElementById('content').value = editor.getValue();
  });

  function update() {
    needSaveChange = true;
    var shouldShow = !editor.session.getValue().length;
    var node = editor.renderer.emptyMessageNode;
    if (!shouldShow && node) {
        editor.renderer.scroller.removeChild(editor.renderer.emptyMessageNode);
        editor.renderer.emptyMessageNode = null;
    } else if (shouldShow && !node) {
        node = editor.renderer.emptyMessageNode = document.createElement("div");
        node.textContent = "enter your content here";
        node.className = "ace_emptyMessage"
        node.style.padding = "0 9px"
        node.style.position = "absolute"
        node.style.zIndex = 9
        node.style.opacity = 0.5
        editor.renderer.scroller.appendChild(node);
    }
  }
  editor.on("input", update);
  setTimeout(update, 100);

  window.onbeforeunload = function() {
    if (needSaveChange) {
      return "You have unsaved changes. Are you sure you want to leave?";
    }
  };
</script>