{% from "../../_charts/chart-card/view.njk" import dprChartCard %}
{% from "../scorecard-group/view.njk" import dprScoreCardGroup %}
{% from "../dashboard-list/view.njk" import dprDashboardList %}
{% from "../dashboard-visualisation/view.njk" import dprDashboardVisualisation %}

{% macro dprDashboardSection(section, loopIndex) %}
  {% set id = section.id %}
  {% set title = section.title %}
  {% set description = section.description %}
  {% set visualisations = section.visualisations %}
  {% set sectionLabelId = "section-title-" + loopIndex %}

  <hr class="dashboard-section-break" />
  <div class="dpr-dashboard-section" id="{{ id }}-dashboard-section" . aria-labelledby="{{ sectionLabelId }}">
    <h2 id="{{ sectionLabelId }}" class="govuk-heading-l">{{ title }}</h2>

    {% if description %}
      <p class="govuk-body">{{ description | dpr.safe }}</p>
    {% endif %}

    <div class="dashboard-section-container">
      {% for visualisation in visualisations %}
        {{ dprDashboardVisualisation(visualisation, loop.index) }}
      {% endfor %}
    </div>
  </div>
{% endmacro %}