{% load bleach_tags report_tags %}

<div class="modal fade detail-preview-modal evidence-detail-preview-modal" id="evidence_detail_{{ evidence.id }}" tabindex="-1" role="dialog"
     aria-labelledby="evidence_detail_{{ evidence.id }}_label" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <div>
          <span class="detail-preview-modal-eyebrow">Report evidence</span>
          <h2 class="modal-title" id="evidence_detail_{{ evidence.id }}_label">{{ evidence.friendly_name }}</h2>
        </div>
        <button type="button" class="btn-close detail-preview-modal-close" data-bs-dismiss="modal" aria-label="Close">
        </button>
      </div>
      <div class="modal-body">
        <div class="detail-preview-modal-content">
          {% if evidence|get_file_type == "image" %}
            <div class="text-center mb-3">
              <img
                src="{% url 'reporting:evidence_download' evidence.id %}"
                alt="{{ evidence.friendly_name }}"
                class="img-fluid evidence-detail-image evidence-preview-clickable js-open-lightbox"
                data-evidence-name="{{ evidence.friendly_name }}"
                data-evidence-url="{% url 'reporting:evidence_download' evidence.id %}"
                data-evidence-type="image"
                data-modal-id="evidence_detail_{{ evidence.id }}"
                title="Click to view full size"
              >
              <p class="text-muted mt-2 small">
                <i class="fas fa-search-plus"></i> Click image to view full size
              </p>
            </div>
          {% else %}
            <div class="text-center mb-3">
              <div
                class="evidence-preview-placeholder evidence-detail-text-placeholder evidence-preview-clickable js-open-lightbox"
                data-evidence-name="{{ evidence.friendly_name }}"
                data-evidence-url="{% url 'reporting:evidence_download' evidence.id %}"
                data-evidence-type="text"
                data-modal-id="evidence_detail_{{ evidence.id }}"
                title="Click to view full content"
                tabindex="0" role="button"
                onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}"
              >
                <div>
                  <i class="fas fa-file-code fa-3x text-muted mb-2"></i>
                  <p class="text-muted mb-0 small">
                    <i class="fas fa-search-plus"></i> Click to view full file content
                  </p>
                </div>
              </div>
            </div>
          {% endif %}

          <table class="table evidence-detail-metadata">
            <tr>
              <td class="evidence-detail-metadata-label">Filename:</td>
              <td class="text-start">{{ evidence.filename }}</td>
            </tr>
            <tr>
              <td class="evidence-detail-metadata-label">Upload Date:</td>
              <td class="text-start">{{ evidence.upload_date|date:"DATE_FORMAT" }}</td>
            </tr>
            <tr>
              <td class="evidence-detail-metadata-label">Uploaded By:</td>
              <td class="text-start">{{ evidence.uploaded_by }}</td>
            </tr>
            {% if evidence.description %}
              <tr>
                <td class="evidence-detail-metadata-label align-top">Description:</td>
                <td class="text-start">{{ evidence.description|bleach }}</td>
              </tr>
            {% endif %}
          </table>
        </div>
      </div>
      <div class="modal-footer detail-preview-modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Close</button>
        <a href="javascript:void(0)"
           onclick="downloadEvidence({{ evidence.id }}, '{{ evidence.filename|escapejs }}')"
           class="btn btn-outline-secondary icon download-icon">Download</a>
      </div>
    </div>
  </div>
</div>