{% extends 'extras/exporttemplate/_base.html' %}
{% load helpers %}
{% block subcontent %}
<div class="row">
  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header"><strong>Details</strong></div>
      <table class="card-body table table-hover attr-table mb-0">
        <tr>
          <td>Name</td>
          <td>{{ instance.name }}</td>
        </tr>
        <tr>
          <td>Description</td>
          <td>{{ instance.description|render_none }}</td>
        </tr>
        <tr>
          <td>Object type</td>
          <td>{{ instance.content_type }}</td>
        </tr>
        <tr>
          <td>Last update</td>
          <td>{{ instance.updated|date_span }}</td>
        </tr>
        {% if instance.data_source %}
        <tr>
          <td>Data source</td>
          <td>{{ instance.data_source|as_link }}</td>
        </tr>
        {% endif %}
        {% if instance.data_file or instance.data_path %}
        <tr>
          <td>Data file</td>
          <td>
            {% if instance.data_file %}
            {{ instance.data_file|as_link }}
            {% elif instance.data_path %}
            <div class="float-end text-warning">
              <i class="fa-solid fa-triangle-exclamation" title="The data file associated with this configuration has been deleted."></i>
            </div>
            <span class="text-monospace">{{ instance.data_path }}</span>
            {% endif %}
          </td>
        </tr>
        {% endif %}
      </table>
    </div>
    <div class="card mb-3">
      <div class="card-header">
        <strong>Jinja2 Properties</strong>
        <div class="float-end">
          <a href="https://peering-manager.readthedocs.io/en/{{ settings.VERSION | doc_version }}/templating/" target="_blank"><i class="fa fa-info-circle"></i></a>
        </div>
      </div>
      <table class="card-body table table-hover attr-table mb-0">
        <tr>
          <td>Trim</td>
          <td>{{ instance.jinja2_trim|boolean_as_icon }}</td>
        </tr>
        <tr>
          <td>Lstrip</td>
          <td>{{ instance.jinja2_lstrip|boolean_as_icon }}</td>
        </tr>
      </table>
    </div>
    <div class="card mb-3">
      <div class="card-header"><strong>Template</strong></div>
      <pre class="pre-scrollable">{{ instance.template }}</pre>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card mb-3">
      <div class="card-header">
        <strong>Rendered data</strong>
        <div class="float-end">
          <button type="button" class="btn btn-xs btn-secondary" id="clipboard">
            <i class="fa fa-clipboard"></i> Copy
          </button>
        </div>
      </div>
      <div id="rendered"></div>
    </div>
  </div>
</div>
{% endblock %}
{% block javascript %}
<script>
  $('#clipboard').click(function () {
    var temp = $('<textarea>');
    $('body').append(temp);
    temp.val($('#result').text()).select();
    document.execCommand('copy');
    temp.remove();
  });

  function exportDoneHandler(r) {
    switch (r['status']['value']) {
      case 'pending':
      case 'running':
        setTimeout(function() {
          PeeringManager.pollJob(r, exportDoneHandler);
        }, 2000);
        break;
      case 'completed':
        var formatted;
        var output = r['output'];
        if (output == "") {
          formatted = '<div class="card-body"><p class="card-text">Rendering result is empty.</p></div>';
        } else {
          formatted = '<pre class="pre-scrollable" id="result">' + PeeringManager.escapeHTML(output) + '</pre>';
        }
        $('#rendered').html(formatted);
        break;
      case 'errored':
      case 'failed':
      default:
        $('#rendered').html('<div class="card-body"><p class="card-text">An error occured while rendering the export template.</p></div>');
        break;
    }
  }

  $(document).ready(function () {
    $.ajax({
      method: 'get',
      url: "{% url 'extras-api:exporttemplate-render' pk=instance.pk %}"
    }).done(function (r) {
      $('#rendered').html('<div class="text-center" style="font-size: 2rem;"><i class="fa-fw fa-solid fa-rotate fa-spin"></i> Working</div>');
      exportDoneHandler(r);
    }).fail(function () {
      $('#rendered').html('<div class="card-body"><p class="card-text">Unable to render the export template.</p></div>');
    });
  });
</script>
{% endblock %}