{% extends "base_generic.html" %}

{% load report_tags bleach_tags humanize custom_tags %}

{% block pagetitle %}Report Template Detail{% endblock %}


{% block content %}
  <div class="template-detail-page">
    <header class="detail-page-heading resource-detail-heading">
      <div class="detail-page-heading-main resource-detail-heading-main">
        <span class="detail-eyebrow">Report Template</span>
        <h2 class="mb-0">{{ reporttemplate.name|bleach }}</h2>
        <div class="detail-tag-list mt-0" aria-label="Template properties and tags">
          <span class="library-tag {% if reporttemplate.doc_type.extension == 'docx' %}library-tag-word{% else %}library-tag-powerpoint{% endif %}">
            <i class="fas {% if reporttemplate.doc_type.extension == 'docx' %}fa-file-word{% else %}fa-file-powerpoint{% endif %}"
               aria-hidden="true"></i>
            <span>{% if reporttemplate.doc_type.extension == "docx" %}Word{% else %}PowerPoint{% endif %}</span>
          </span>
          {% if reporttemplate.protected %}
            <span class="library-tag library-tag-warning"><i class="fas fa-lock" aria-hidden="true"></i>Protected</span>
          {% endif %}
          {% if reporttemplate.doc_type.doc_type == "project_docx" %}
            <span class="library-tag library-tag-context"><i class="fas fa-project-diagram" aria-hidden="true"></i>Project document</span>
          {% endif %}
          <span class="library-tag library-tag-neutral">
            <i class="fas fa-arrows-alt-{% if reporttemplate.landscape %}h{% else %}v{% endif %}" aria-hidden="true"></i>
            {% if reporttemplate.landscape %}Landscape{% else %}Portrait{% endif %}
          </span>
          {% for tag in reporttemplate.tags.names %}
            <span class="library-tag library-tag-neutral">{{ tag|bleach }}</span>
          {% endfor %}
        </div>
      </div>

      <div class="dropdown detail-page-heading-actions">
        <button id="template-actions-button" type="button"
                class="btn btn-outline-primary btn-sm dropdown-toggle"
                data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span>Actions</span>
        </button>
        <div class="dropdown-menu dropdown-menu-end" aria-labelledby="template-actions-button">
          <a class="dropdown-item icon download-icon"
             href="{% url 'reporting:template_download' reporttemplate.id %}">Download template</a>
          {% if request.user|can_edit_report_template:reporttemplate or request.user|can_delete_report_template:reporttemplate %}
            <div class="dropdown-divider"></div>
          {% endif %}
          {% if request.user|can_edit_report_template:reporttemplate %}
            <button type="button" class="dropdown-item icon bug-icon js-lint-template"
                    lint-template-csrftoken="{{ csrf_token }}"
                    lint-template-url="{% url 'reporting:ajax_lint_report_template' reporttemplate.id %}">
              Run template lint
            </button>
            <a class="dropdown-item icon edit-icon"
               href="{% url 'reporting:template_update' reporttemplate.id %}">Edit template</a>
          {% endif %}
          {% if request.user|can_delete_report_template:reporttemplate %}
            <a class="dropdown-item icon trash-icon text-danger"
               href="{% url 'reporting:template_delete' reporttemplate.id %}">Delete template</a>
          {% endif %}
        </div>
      </div>
    </header>

    {% if reporttemplate.protected %}
      {% if request.user|can_edit_report_template:reporttemplate %}
        <div class="context-note detail-access-notice mt-3" role="note">
          <i class="fas fa-unlock" aria-hidden="true"></i>
          <div><strong>Protected template.</strong> You have permission to edit it.</div>
        </div>
      {% else %}
        <div class="alert detail-access-notice alert-danger icon lock-icon mt-3" role="alert">
          This template is protected – report template management permission is required to edit it.
        </div>
      {% endif %}
    {% elif not reporttemplate.client and not request.user|can_edit_report_template:reporttemplate %}
      <div class="alert detail-access-notice alert-danger icon lock-icon mt-3" role="alert">
        This is a global template – report template management permission is required to edit it.
      </div>
    {% endif %}

    <div class="detail-layout template-detail-layout">
      <section class="detail-panel" aria-labelledby="template-settings-heading">
        <div class="detail-panel-header">
          <div>
            <span class="detail-eyebrow">Render behavior</span>
            <h4 id="template-settings-heading">Template Settings</h4>
          </div>
          <i class="fas fa-sliders-h template-detail-section-icon" aria-hidden="true"></i>
        </div>
        <dl class="detail-grid template-settings-grid">
          <div class="detail-field">
            <dt>Client scope</dt>
            <dd>{% if reporttemplate.client %}{{ reporttemplate.client }}{% else %}Any client{% endif %}</dd>
          </div>
          <div class="detail-field">
            <dt>Uploaded by</dt>
            <dd>{% if reporttemplate.uploaded_by %}{{ reporttemplate.uploaded_by }}{% else %}<span class="detail-empty">Unknown</span>{% endif %}</dd>
          </div>
          <div class="detail-field">
            <dt>Uploaded</dt>
            <dd class="operator-data">{{ reporttemplate.upload_date|naturalday:"DATE_FORMAT" }}</dd>
          </div>
          <div class="detail-field">
            <dt>Last updated</dt>
            <dd class="operator-data">{{ reporttemplate.last_update|naturalday:"DATE_FORMAT" }}</dd>
          </div>
          {% if reporttemplate.doc_type.extension == "docx" %}
            <div class="detail-field">
              <dt>New paragraph style</dt>
              <dd>{% if reporttemplate.p_style %}{{ reporttemplate.p_style }}{% else %}Normal{% endif %}</dd>
            </div>
          {% endif %}
          <div class="detail-field">
            <dt>Evidence image width</dt>
            <dd>{% if reporttemplate.evidence_image_width is not None %}{{ reporttemplate.evidence_image_width }} inches{% else %}Global default{% endif %}</dd>
          </div>
          <div class="detail-field">
            <dt>Evidence alignment</dt>
            <dd>{{ reporttemplate.get_evidence_image_alignment_display }}</dd>
          </div>
          <div class="detail-field">
            <dt>BloodHound data</dt>
            <dd>{% if reporttemplate.contains_bloodhound_data %}Referenced{% else %}Not referenced{% endif %}</dd>
          </div>
        </dl>
      </section>

      <section class="detail-panel detail-panel-quiet" aria-labelledby="template-description-heading">
        <div class="detail-panel-header">
          <div>
            <span class="detail-eyebrow">Purpose</span>
            <h4 id="template-description-heading">Description</h4>
          </div>
        </div>
        {% if reporttemplate.description %}
          <div class="detail-prose rich-text-field-preview">{{ reporttemplate.description|bleach }}</div>
        {% else %}
          <div class="empty-state">
            <p class="empty-state-title">No description provided</p>
            <p class="empty-state-description">Add guidance that helps operators choose the right template.</p>
          </div>
        {% endif %}
      </section>

      <section id="template-lint-results" class="detail-panel template-detail-wide"
               js-update-results-url="{% url 'reporting:ajax_update_template_lint_results' reporttemplate.id %}">
        {% include "snippets/template_lint_results.html" %}
      </section>

      <section class="detail-panel template-detail-wide" aria-labelledby="template-changelog-heading">
        <div class="detail-panel-header">
          <div>
            <span class="detail-eyebrow">Release history</span>
            <h4 id="template-changelog-heading">Template Changelog</h4>
          </div>
          <i class="fas fa-history template-detail-section-icon" aria-hidden="true"></i>
        </div>
        {% if reporttemplate.changelog %}
          <div class="detail-prose rich-text-field-preview">{{ reporttemplate.changelog|bleach }}</div>
        {% else %}
          <div class="empty-state">
            <p class="empty-state-title">No changelog entries</p>
            <p class="empty-state-description">Record meaningful template changes so report authors know what changed.</p>
          </div>
        {% endif %}
      </section>
    </div>
  </div>
{% endblock %}

{% block morescripts %}
  <script>
    $('.js-lint-template').click(function () {
      const url = $(this).attr('lint-template-url');
      const csrftoken = $(this).attr('lint-template-csrftoken');
      displayToastTop({type: 'success', string: 'Template linting request submitted', title: 'Template Update'});
      $.ajaxSetup({
        beforeSend: function(xhr, settings) {
          if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader('X-CSRFToken', csrftoken);
          }
        }
      });
      $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        success: function (data) {
          if (data.result) {
            const lintResults = $('#template-lint-results');
            const updateUrl = lintResults.attr('js-update-results-url');
            if (updateUrl) {
              lintResults.load(updateUrl);
            }
          }
          if (data.message) {
            displayToastTop({type: data.result, string: data.message, title: 'Template Update'});
          }
        }
      });
    });
  </script>
{% endblock %}