{% load extra_fields %}

{% if field_spec.type == "rich_text" or field_spec.type == "json" %}
  <div id="field_spec_{{ field_spec.internal_name }}" class="modal fade extra-field-preview-modal" tabindex="-1" role="dialog" aria-labelledby="field-spec-title-{{ field_spec.internal_name }}">
    <div class="modal-dialog modal-super-sized modal-dialog-scrollable" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <div>
            <span class="detail-eyebrow">Custom field preview</span>
            <h5 class="modal-title" id="field-spec-title-{{ field_spec.internal_name }}">{{ field_spec.display_name }}</h5>
            {% if field_spec.type == "rich_text" %}
              <p class="extra-field-preview-intro">
                This preview closely approximates report output using the report configuration and selected Word template settings.
              </p>
            {% endif %}
          </div>
          <button type="button" class="btn-close extra-field-preview-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body extra-field-modal-content"{% if field_spec.type == "json" and lazy_json_url %} data-lazy-json-url="{{ lazy_json_url }}" data-json-field-name="{{ field_spec.display_name }}"{% elif field_spec.type == "rich_text" and lazy_richtext_url %} data-lazy-richtext-url="{{ lazy_richtext_url }}"{% endif %}>
          {% if field_spec.type == "json" and lazy_json_url %}
            <p class="extra-field-preview-loading mb-0">JSON content will load when this preview opens.</p>
          {% elif field_spec.type == "rich_text" and lazy_richtext_url %}
            <p class="extra-field-preview-loading mb-0">Rich text preview will load when this preview opens.</p>
          {% else %}
            {% include "user_extra_fields/field.html" with extra_fields=extra_fields field_spec=field_spec preview_report=preview_report %}
          {% endif %}
        </div>
        <div class="modal-footer extra-field-preview-footer">
          <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        </div>
      </div>
    </div>
  </div>
{% endif %}