{% from "govuk/components/checkboxes/macro.njk" import govukCheckboxes -%}

{% set titleId = "option-select-title-" + params.name %}
{% set closedOnLoad = True if params.closedOnLoad %}

<div 
    class="dm-option-select"
    data-module="dm-option-select"
    {% if params.closedOnLoad %} data-closed-on-load="true" {% endif %}
    {% if params.ariaControlsId %} data-input-aria-controls="{{ params.ariaControlsId }}" {% endif %}
>
    <h2 class="dm-option-select__heading js-container-heading">
      <span class="dm-option-select__title js-container-button" id="{{ titleId }}">{{ params.title }}</span>
      <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="dm-option-select__icon dm-option-select__icon--up" aria-hidden="true" focusable="false"><path d="m798.16 609.84l-256-256c-16.683-16.683-43.691-16.683-60.331 0l-256 256c-16.683 16.683-16.683 43.691 0 60.331s43.691 16.683 60.331 0l225.84-225.84 225.84 225.84c16.683 16.683 43.691 16.683 60.331 0s16.683-43.691 0-60.331z"/></svg>
      <svg version="1.1" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" class="dm-option-select__icon dm-option-select__icon--down" aria-hidden="true" focusable="false"><path d="m225.84 414.16l256 256c16.683 16.683 43.691 16.683 60.331 0l256-256c16.683-16.683 16.683-43.691 0-60.331s-43.691-16.683-60.331 0l-225.84 225.84-225.84-225.84c-16.683-16.683-43.691-16.683-60.331 0s-16.683 43.691 0 60.331z"/></svg>
    </h2>

    <div role="group" aria-labelledby="{{ titleId }}" class="dm-option-select__container js-options-container" id="{{ params.optionsContainerId }}" tabindex="-1">
      <div class="dm-option-select__container-inner js-auto-height-inner">
      {{ govukCheckboxes({
        "idPrefix": params.name,
        "name": params.name,
        "classes": "govuk-checkboxes--small",
        "fieldset": {
          "legend": {
            "html": params.title,
            "classes": "govuk-visually-hidden"
          }
        },
        "items": params.items
      })}}
      </div>
    </div>
</div>