{% load i18n %}
<div class="pb-dashboard">
  <div class="dashboard-report">
    <h3>{{display_name}}</h3>

    {% if header_html %}
    <div class="report-header">
      {{ header_html|safe }}
    </div>
    {% endif %}

    {% if visual_repr %}
    <div class="pb-dashboard-visual">
      <svg width="{{visual_repr.width}}" height="{{visual_repr.height}}" role="img" aria-labelledby="pb-dashboard-vr-title-{{visual_repr.unique_id}} pb-dashboard-vr-desc-{{visual_repr.unique_id}}">
        <title id="pb-dashboard-vr-title-{{visual_repr.unique_id}}">{{visual_repr.title}}</title>
        <desc id="pb-dashboard-vr-desc-{{visual_repr.unique_id}}">{{visual_repr.desc}}</desc>
        <!-- Filter definitions -->
        {% for layer in visual_repr.layers %}
          {% if layer.color %}
            <filter id="{{layer.id}}">
              <feFlood flood-color="{{layer.color}}" result="flood" />
              <feBlend in="flood" in2="SourceGraphic" mode="multiply" />
            </filter>
            <mask id="{{layer.id}}-mask" maskUnits="userSpaceOnUse" x="0" y="0" width="100%" height="100%">
              <image xlink:href="{{layer.url}}" x="0" y="0" height="100%" width="100%" />
            </mask>
          {% endif %}
        {% endfor %}
        <!-- Layer images -->
        {% for layer in visual_repr.layers %}
          {% if layer.color %}
            <rect x="0" y="0" height="100%" width="100%" fill="{{layer.color}}" mask="url(#{{layer.id}}-mask)" />
          {% else %}
            <image xlink:href="{{layer.url}}" x="0" y="0" height="100%" width="100%" />
          {% endif %}
        {% endfor %}
      </svg>
    </div>
    {% endif %}


    {% for block in blocks %}
      <table>
        <thead>
          <th colspan=2>{{ block.display_name }}</th>
        </thead>
        <tbody>
          {% for mcq in block.mcqs %}
            <tr>
              <th class="desc">{{ mcq.display_name }}</th>
              <td class="value" {% if mcq.color %} style="border-right-color: {{mcq.color}};"{% endif %}>
                {% if mcq.value and show_numbers %}
                  <span aria-hidden="true">{{ mcq.value }}</span>
                {% endif %}
                <span class="sr">{{ mcq.accessible_value }}</span>
              </td>
            </tr>
          {% endfor %}
          {% if block.has_average %}
           <tr class="avg-row">
              <th class="desc">{{ block.average_label }}</th>
              <td class="value" {% if block.average_color %} style="border-right-color: {{block.average_color}};"{% endif %}>
                {% if show_numbers %}
                  <span aria-hidden="true">{{ block.average|floatformat }}</span>
                {% endif %}
                <span class="sr">{{ block.accessible_average }}</span>
              </td>
            </tr>
          {% endif %}
        </tbody>
      </table>
    {% endfor %}
    {% if footer_html %}
    <div class="report-footer">
      {{ footer_html|safe }}
    </div>
    {% endif %}
  </div>

  {% if blocks %}
    <br>
    <p><a class="report-download-link" href="#report_download" download="report.html">{% trans "Download report" %}</a></p>
  {% endif %}
</div>
