{% from "govuk/components/fieldset/macro.njk" import govukFieldset %}
{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes %}
{% from "govuk/components/accordion/macro.njk" import govukAccordion %}
{% from "govuk/components/hint/macro.njk" import govukHint %}
{% from "govuk/components/error-message/macro.njk" import govukErrorMessage %}
{% from "../question-format-hint/macro.njk" import digitalmarketplaceQuestionFormatHint %}

{% set name = params.question.id %}
{% set questionText = params.question.question + " (" + (params.question.optional_text if params.question.optional_text else "optional") + ")" if params.question.optional else params.question.question %}
{% set errorMessage = params.errors[name] %}
{% set values = params.data[name] or [] %}

<div class="govuk-form-group {%- if errorMessage %} govuk-form-group--error{% endif %}">
  {% call govukFieldset({
    legend: {
      html: questionText,
      classes: "govuk-fieldset__legend--m"
    },
    classes: 'dm-checkbox-tree-large',
    attributes: {
      'aria-describedby': "input-" + name if errorMessage
    }
  }) %}
    {% if params.question.hint or params.question.question_advice %}
      {{ govukHint({
        html: digitalmarketplaceQuestionFormatHint(params.question)
      }) }}
    {% endif %}

    {% if errorMessage %}
      {{ govukErrorMessage({
        text: errorMessage["message"],
        id: "input-" + name
      }) }}
    {% endif %}

    <div class="govuk-grid-row">
      <div class="dm-checkbox-tree-large__summary govuk-grid-column-full">
        {% set accordionItems = [] %}

        {% for option in params.question.options %}
          {% set checkboxItems = [] %}

          {% for label in option.options %}
            {% if label.divider %}
              {% set checkboxItem = {
                divider: label.divider | safe
              } %}
            {% else %}
              {% set value = label.value if label.value else label.label %}
              {% set checkboxItem = {
                text: label.label,
                value: value,
                checked: value in values
              } %}
              {% if label.description %}
                {% set _checkboxItem = checkboxItem | setAttribute('hint', { html: label.description }) %}
              {% endif %}
            {% endif %}
            {% set _checkboxItems = checkboxItems.push(checkboxItem) %}
          {% endfor %}

          {% set _accordionItems = accordionItems.push({
            heading: {
              text: option.label
            },
            summary: {
              html: option.description
            } if option.description,
            content: {
              html: govukCheckboxes({
                name: name,
                idPrefix: "input-" + name + '-' + loop.index | string,
                items: checkboxItems,
                classes: "govuk-checkboxes--small"
              })
            }
          }) %}
        {% endfor %}

        {{ govukAccordion({
          id: "accordion-" + name,
          items: accordionItems
        }) }}
      </div>
    </div>
  {% endcall %}
</div>