{% extends "combo/manager_base.html" %}
{% load i18n gadjo %}

{% block breadcrumb %}
  {{ block.super }}
  <li class="ariane--list-item">
    <a class="ariane--link" href="{% url 'combo-manager-test-tool' %}">{% trans "Template test tool" %}</a>
  </li>
{% endblock %}

{% block appbar %}
  <h2>{% trans 'Template test tool' %}</h2>
  {% if orig_page %}
    <span class="actions">
      <a href="{% url 'combo-manager-page-view' pk=orig_page.id %}">{% trans "Go back to page" %}</a>
      <a href="{% url 'combo-manager-page-inspect' pk=orig_page.id %}">{% trans "Go back to inspect" %}</a>
    </span>
  {% endif %}
{% endblock %}

{% block content %}
  <div id="test-tool" class="section">
    <div>

      <form action="{% url 'combo-manager-test-tool-test-template' %}" id="test-tool-test-template" method="post">
        {% csrf_token %}
        {{ test_tool_form|with_template }}
        <button id="test-tool-test-template-submit" class="submit-button submit">
          {% trans "Test template"%}
        </button>
      </form>

      <div hidden id="test-tool-test-template-div">
        <div class="infonotice">
          <p class="pk-notice--title">{% trans "Information" %}</p>
          <h3>{% trans "Template result" %}</h3>
          <div id="test-tool-test-template-result"></div>
        </div>
        <div class="infonotice">
          <p class="pk-notice--title">{% trans "Information" %}</p>
          <h3>{% trans "HTML sources" %}</h3>
          <pre id="test-tool-test-template-result-html"></pre>
        </div>
        <div id="test-tool-page-variables" class="infonotice">
          <p class="pk-notice--title">{% trans "Information" %}</p>
          <h3>{% trans "Page variables" %}</h3>
          <table id="test-tool-page-variables-table" class="main">
          </table>
        </div>
      </div>
      <div class="errornotice" hidden id="test-tool-test-template-error-div">
        <p class="pk-notice--title">{% trans "Error" %}</p>
        <h3>{% trans "Template rendering error" %}</h3>
        <div id="test-tool-test-template-error"></div>
      </div>
    </div>
  </div>

  <script>
    document.body.onload = function() {
      function ajax_cllbck() {
        const res_div = document.getElementById('test-tool-test-template-div');
        const res_result = document.getElementById('test-tool-test-template-result');
        const res_result_html = document.getElementById('test-tool-test-template-result-html');
        const page_variables_div = document.getElementById('test-tool-page-variables');
        const page_variables_table = document.getElementById('test-tool-page-variables-table');
        const error_div = document.getElementById('test-tool-test-template-error-div')
        const error_reason = document.getElementById('test-tool-test-template-error')
        const result = JSON.parse(this.responseText)

        if('error' in result) {
          error_reason.textContent = result['error'];
          res_div.setAttribute('hidden', 'true');
          error_div.removeAttribute('hidden');
        } else {
          res_result.innerHTML = result['result'];
          res_result_html.textContent = result['result'];
          error_div.setAttribute('hidden', 'true');
          if ('page_variables' in result) {
            $(page_variables_table).empty();
            for (var key in result['page_variables']) {
              var $row = $('<tr><td class="key">XX</td><td class="value"></td></tr>');
              $row.find('.key').text(key);
              $row.find('.value').text(result['page_variables'][key]);
              $row.appendTo(page_variables_table);
            }
            page_variables_div.removeAttribute('hidden');
          } else {
            page_variables_div.setAttribute('hidden', 'true');
          }
          res_div.removeAttribute('hidden');
        }
      }

      function submit_btn_click(ev) {
        if (ev) { ev.preventDefault() }
        const csrf_token = document.getElementsByName('csrfmiddlewaretoken')[0].value
        const django_template = document.getElementsByName('django_template')[0].value
        const url = document.getElementsByName('url')[0].value
        var querystring = "csrfmiddlewaretoken=" + encodeURIComponent(csrf_token) + "&django_template=" + encodeURIComponent(django_template);

        const xhttp = new XMLHttpRequest();
        if (url) { querystring += '&url=' + encodeURIComponent(url) }
        xhttp.onload = ajax_cllbck
        xhttp.open("POST", "{% url 'combo-manager-test-tool-test-template' %}", true);
        xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        xhttp.send(querystring);
        return false;
      }

      const submit_btn = document.getElementById('test-tool-test-template-submit')
      submit_btn.addEventListener('click', submit_btn_click)
      const textarea = document.getElementById('id_django_template')
      textarea.addEventListener('keypress', function(ev) {
        if (ev.ctrlKey && ev.key == 'Enter') {
          submit_btn_click()
        }
      })
    }
  </script>
{% endblock %}