{% macro dprChartDetails(id, details) %}
  <div class="chart-tabs-details">
    {% set headlines = details.headlines %}
    {% set meta = details.meta %}

    <div id="dpr-{{ id }}-tooltip-details" class="chart-tabs-details__item chart-tabs-details__item--tooltip">
      <h4 id="dpr-{{ id }}-label" class="govuk-heading-s dpr-chart-details-label">init</h4>
      <p id="dpr-{{ id }}-value" class="govuk-body dpr-chart-details-value">init</p>
    </div>

    <div id="dpr-{{ id }}-headline-values" class="chart-tabs-details__item chart-tabs-details__item--headlines">
      {% for headline in headlines %}
        {% set label = headline.label %}
        {% set value = headline.value %}
        {% set legend = headline.legend %}

        <h4 class="govuk-heading-s dpr-chart-details-label">{{ headline.label }}</h4>
        <p class="govuk-body dpr-chart-details-value">{{ headline.value }}</p>
        {% if legend %}
          <p class="govuk-body-s dpr-chart-details-legend">{{ headline.legend }}</p>
        {% endif -%}
      {% endfor -%}
    </div>

    <div class="chart-tabs-details__item chart-tabs-details__item--meta">
      {% for m in meta %}
        <h4 id="dpr-{{ id }}-label" class="govuk-heading-s dpr-chart-details-label">{{ m.label }}</h4>
        <p id="dpr-{{ id }}-value" class="govuk-body-s">{{ m.value }}</p>
      {% endfor -%}
    </div>
  </div>
{% endmacro %}