{% load i18n %}
{% if reports %}
  <div class="section" id="csp-reports">
    <h3>{% trans "Security reports" %}
      {% blocktrans count count=reports.count %}({{ count }} report){% plural %}({{ count }} reports){% endblocktrans %}</h3>
    <table class="main csp-reports">
      <thead>
        <tr>
          <th>{% trans "Last seen" %}</th>
          <th>{% trans "First seen" %}</th>
          <th>{% trans "Source" %}</th>
          <th>{% trans "Violated directive" %}</th>
        </tr>
      </thead>
      <tbody>
        {% for report in reports %}
          <tr{% if report.error %} class="error"{% endif %} title="{{ report.formatted_content }}">
            <td class="csp-reports--last-seen">{{ report.last_seen }}</td>
            <td class="csp-reports--first-seen">{{ report.first_seen }}</td>
            <td class="csp-reports--source">
              {% if report.inline %}
                Inline:
              {% endif %}
              {{ report.source|urlizetrunc:110 }}
              {% if report.inline %}
                Line: {{ report.line }} Column: {{ report.column }}
              {% endif %}
              {% if report.error %}<span title="error">⚠</span>{% endif %}
            </td>
            <td class="csp-reports--directive"><tt>{{ report.violated_directive }}</tt></td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
    <div>
      <form action="." method="post" id="csp-reports-form">
        <div class="buttons">
          <button name="clean-reports">{% trans "Clean reports" %}</button>
        </div>
      </form>
    </div>
{% endif %}