{% extends base_template %}
{% load static %}
{% load string_filters %}

{% block content %}
  <div class="row mb-3">
    <div class="col col-md-6">
      <div class="card">
        <h5 class="card-header">{{ instance|meta:"verbose_name"|bettertitle }}</h5>
        <table class="table table-hover attr-table">
          <tr>
            <th scope="row">Device</th>
            <td>{{ instance.device|linkify }}</td>
          </tr>
          <tr>
            <th scope="row">Status</th>
            <td>{% badge instance.get_status_display bg_color=instance.get_status_color %}</td>
          </tr>
        </table>
      </div>
    </div>
    {% if instance.error %}
      <div class="col col-md-6">
        <div class="card">
          <h5 class="card-header">Error</h5>
          <pre class="block">{{ instance.error }}</pre>
        </div>
      </div>
    {% endif %}
  </div>
  {% if instance.diff %}
    <div class="row mb-3">
      <div class="col col-md-12">
        <div class="card">
          <h2 class="card-header">Diff
            {% if statistics %}
              <div class="card-actions">
                <span style="color: #1a7f37;">{{ statistics.0 }}</span> line(s) missing,
                <span style="color: #d1242f;">{{ statistics.1 }}</span> extra line(s)
              </div>
            {% endif %}
          </h2>
          <div class="card-body" id="diffElement"></div>
        </div>
      </div>
    </div>
  {% endif %}
{% endblock content %}

{% block javascript %}
  <script type="text/javascript" src="{% static 'netbox_config_diff/diff2html-ui.min.js' %}"></script>
  <script type="text/javascript">
    var link = document.createElement('link');
    link.type = 'text/css';
    link.rel = 'stylesheet';
    const colorMode = localStorage.getItem("netbox-color-mode");
    if (colorMode === 'dark') {
      link.href = `{% static 'netbox_config_diff/diff2html.dark.min.css' %}`
    } else {
      link.href = `{% static 'netbox_config_diff/diff2html.min.css' %}`
    };
    document.head.appendChild(link);
    document.addEventListener('DOMContentLoaded', () => {
      var configuration = {
          drawFileList: false,
          fileListToggle: false,
          fileListStartVisible: false,
          fileContentToggle: false,
          matching: 'lines',
          outputFormat: 'side-by-side',
          synchronisedScroll: true,
          highlight: true,
          renderNothingWhenEmpty: false,
          stickyFileHeaders: false,
          drawFileList: false,
      };
      const jsonDiff = `{{ instance.diff|escapejs|safe|replace:'${,\${' }}`;
      var targetElement = document.getElementById('diffElement');
      var diff2htmlUi = new Diff2HtmlUI(targetElement, jsonDiff, configuration);
      diff2htmlUi.draw();
      document.querySelector(".d2h-file-header").remove();
      diff2htmlUi.highlightCode();
    });
  </script>
{% endblock javascript %}