<!DOCTYPE html>
<html lang="en">
<head>
  <title>{{ storage_service_name }}: file formats count</title>
  <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dist/chart_formats_count/chart_formats_count.css') }}">
  <script type="module" language="javascript" src="{{ url_for('static', filename='dist/chart_formats_count/chart_formats_count.js') }}"></script>
  <script defer type="text/javascript" language="javascript" src="{{ url_for('static', filename='js/reporter/chart_formats_count.js') }}"></script>
  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
</head>
<body>

<div class="container-fluid" style="margin: 20px 0;">

<div class="alert alert-secondary">
  <a class="noprint" onClick="window.print();return false"><button type="button" class="btn btn-info" style="float:right;">Print</button></a>
  <strong>Report: file formats count</strong>
  <br>
  <strong>Storage Service:</strong> {{ storage_service_name }}
  <br>
  {% if storage_location_description %}
    <strong>Location:</strong> {{ storage_location_description }}
    <br>
  {% endif %}
  {{ originalsCount }} original files ingested between {{startdate}} and {{enddate}}
  <br>
  {{ differentFormats }} different formats
</div>

<div class="col-lg" id="formatChart" style="display: block; margin-top: 20px;">
    <canvas id="chart" style="width: 100%;" aria-label="Format pie chart" role="img">
      <!-- Fallback text -->
      <p>Canvas element not supported.</p>
    </canvas>
</div>

<textarea class="d-none" id="chart_labels">{{ labels | tojson }}</textarea>
<textarea class="d-none" id="chart_values">{{ values | tojson }}</textarea>

</div>
</body>
</html>
