{% extends "base.html" %}

{% load i18n icons translations user_display %}

{% block breadcrumbs %}
  {% if object %}
    {% path_object_breadcrumbs object %}
    <li class="breadcrumb-item">
      <a href="{{ object.get_absolute_url }}#reports">{% translate "Translation reports" %}</a>
    </li>
  {% else %}
    <li class="breadcrumb-item">
      <a href="{% url 'home' %}#reports">{% translate "Translation reports" %}</a>
    </li>
  {% endif %}
  <li class="breadcrumb-item">{{ report.get_kind_display }}</li>
{% endblock breadcrumbs %}

{% block content %}
  <div class="card">
    <div class="card-header">
      <h4 class="card-title">{{ report.get_kind_display }}</h4>
    </div>
    <table class="table table-striped" id="report-metadata">
      <tr>
        <th scope="row">{% translate "Generated by" %}</th>
        <td>{% user_display report.creator %}</td>
      </tr>
      <tr>
        <th scope="row">{% translate "Generated on" %}</th>
        <td>{{ report.created|date:"DATETIME_FORMAT" }}</td>
      </tr>
    </table>
    <div class="card-footer" id="report-downloads">
      <a class="btn btn-primary"
         href="{% url 'api:report-json' pk=report.pk %}">{% icon "download.svg" %} {% translate "Download JSON" %}</a>
      <a class="btn btn-primary"
         href="{% url 'api:report-html' pk=report.pk %}">{% icon "download.svg" %} {% translate "Download HTML" %}</a>
      <a class="btn btn-primary"
         href="{% url 'api:report-rst' pk=report.pk %}">{% icon "download.svg" %} {% translate "Download reStructuredText" %}</a>
    </div>
  </div>

  <div class="card" id="report-content">
    <div class="card-header">
      <h4 class="card-title">{% translate "Report" %}</h4>
    </div>
    <div class="card-body">{{ report_html }}</div>
  </div>
{% endblock content %}