{#
  Details component. Implements the <details> tag with summary, content and
  a progressive enhancement Icon component to indicate status.

  Props:
  `summary` property for content for the <summary> tag.

  `content` a block and variable to handle the contents of the <details> tag.

  `_defaultClass` property to establish some basic styling rules.

  `modifiers` CSS classes to modify the basic styling of the component.

  `open` boolean attribute to intitially have the details element open or not.

#}

<details
  data-testid="mds-details"
  class="{{ _defaultClass|default('mds-details') }} {{modifiers}}"
  {% if open %}
    {# HTML attribute, non-existant is falsy, so no else statement here. #}
    open="true"
  {% endif %}
  >
  <summary data-testid="mds-details--summary" class="mds-details__summary">

    {% if include_ion | default(true) %}
        <!-- Open icon. -->
        {% include '../icon/icon.twig' with {"icon_name": "add-sharp", "icon_fallback":"open"}  %}

        <!-- Close icon. -->
        {% include '../icon/icon.twig' with {"icon_name": "remove-sharp", "icon_fallback": "close"} %}
    {% endif %}
    <!-- Summary text. -->
    <!-- TODO: this should maybe be a block so it can handle more children easily - i.e. a markup tree rather than long string. -->
     {{ summary }}

  </summary>

  <div class="mds-details__content">
    {% block content %}
      {{ content | default('Sample details content.')}}
    {% endblock %}
  </div>
</details>