{% load bleach_tags extra_fields %}

{% with field_value=extra_fields|get_extra_field:field_spec %}
  {% if field_spec.type == "checkbox" %}
    {% if field_value %}
      <span class="align-middle healthy"><i class="fas fa-check"></i></span>
    {% else %}
      <span class="align-middle burned"><i class="fas fa-times"></i></span>
    {% endif %}
	  {% elif field_spec.type == "rich_text" %}
	    <div class="rich-text-field-preview">{{ field_value|rich_text_preview:preview_report }}</div>
  {% elif field_spec.type == "json" %}
    <pre><code></code></pre>
    {% with data_element_id="extra-field-json-"|add:field_spec.internal_name %}
      {{ field_value|json_script:data_element_id }}
      <script>
        (function (script) {
          const dataElement = script.previousElementSibling;
          const previewElement = dataElement.previousElementSibling.querySelector('code');
          $(previewElement).jsonView({
            '{{ field_spec.display_name|escapejs }}': JSON.parse(dataElement.textContent)
          });
        })(document.currentScript);
      </script>
    {% endwith %}
  {% else %}
    {%  if field_value is None %}No Value Set{% else %}{{ field_value }}{% endif %}
  {% endif %}
{% endwith %}