{% call SGBuilder.SGSection({ title: 'Accordion component', id: 'chip' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 12 }) %}
      {% call SGBuilder.SGRow() %}
        {% call AccordionGroup() %}
          {% call Accordion({
            title: 'Some title for some accordion'
          }) %}
            <div class="rte">
              <p>Lorem ipsum dolor sit amet consectetur. Phasellus nec euismod sit sit rhoncus nisl. Quis lacus rhoncus risus sed condimentum eget dignissim at diam. Ullamcorper odio risus senectus nunc bibendum ornare. Dis pulvinar egestas blandit proin adipiscing senectus purus neque. A convallis vulputate dignissim pharetra. Sed enim vitae id integer risus dolor vitae. Aliquam habitant interdum enim pulvinar ut purus vitae amet. Sagittis nibh ipsum lectus volutpat malesuada ut amet elementum. ed</p>
            </div>
          {% endcall %}

          {% call Accordion({
            title: 'Accordion manually expanded',
            active: true
          }) %}
           <div class="rte">
              <p>Lorem ipsum dolor sit amet consectetur. Phasellus nec euismod sit sit rhoncus nisl. Quis lacus rhoncus risus sed condimentum eget dignissim at diam. Ullamcorper odio risus senectus nunc bibendum ornare. Dis pulvinar egestas blandit proin adipiscing senectus purus neque. A convallis vulputate dignissim pharetra. Sed enim vitae id integer risus dolor vitae. Aliquam habitant interdum enim pulvinar ut purus vitae amet. Sagittis nibh ipsum lectus volutpat malesuada ut amet elementum. ed</p>
            </div>
          {% endcall %}

          {% call Accordion({
            title: 'Accordion disabled',
            disabled: true
          }) %}
           <div class="rte">
              <p>Lorem ipsum dolor sit amet consectetur. Phasellus nec euismod sit sit rhoncus nisl. Quis lacus rhoncus risus sed condimentum eget dignissim at diam. Ullamcorper odio risus senectus nunc bibendum ornare. Dis pulvinar egestas blandit proin adipiscing senectus purus neque. A convallis vulputate dignissim pharetra. Sed enim vitae id integer risus dolor vitae. Aliquam habitant interdum enim pulvinar ut purus vitae amet. Sagittis nibh ipsum lectus volutpat malesuada ut amet elementum. ed</p>
            </div>
          {% endcall %}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <h3>Accordion group with 1 always active item</h3>
      {% call SGBuilder.SGRow() %}
        {% call AccordionGroup({ single: true }) %}
          {% call Accordion({
            subtitle: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, quis?'
          }) %}
            <p>Some text for example from caller, this accordion is expanded</p>
          {% endcall %}

          {% call Accordion({
            title: 'Accordion manually expanded',
            active: true
          }) %}
           <div class="rte">
              <p>Lorem ipsum dolor sit amet consectetur. Phasellus nec euismod sit sit rhoncus nisl. Quis lacus rhoncus risus sed condimentum eget dignissim at diam. Ullamcorper odio risus senectus nunc bibendum ornare. Dis pulvinar egestas blandit proin adipiscing senectus purus neque. A convallis vulputate dignissim pharetra. Sed enim vitae id integer risus dolor vitae. Aliquam habitant interdum enim pulvinar ut purus vitae amet. Sagittis nibh ipsum lectus volutpat malesuada ut amet elementum. ed</p>
            </div>
          {% endcall %}

          {% call Accordion({
            title: 'Accordion disabled',
            disabled: true
          }) %}
           <div class="rte">
              <p>Lorem ipsum dolor sit amet consectetur. Phasellus nec euismod sit sit rhoncus nisl. Quis lacus rhoncus risus sed condimentum eget dignissim at diam. Ullamcorper odio risus senectus nunc bibendum ornare. Dis pulvinar egestas blandit proin adipiscing senectus purus neque. A convallis vulputate dignissim pharetra. Sed enim vitae id integer risus dolor vitae. Aliquam habitant interdum enim pulvinar ut purus vitae amet. Sagittis nibh ipsum lectus volutpat malesuada ut amet elementum. ed</p>
            </div>
          {% endcall %}
        {% endcall %}
      {% endcall %}
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <h3>Accordion group with 1 always active and non-closable item</h3>
      {% call SGBuilder.SGRow() %}
        {% call AccordionGroup({
          single: true,
          showAlways: true
        }) %}
          {% call Accordion({
            subtitle: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum, quis?'
          }) %}
            <p>Some text for example from caller, this accordion is expanded</p>
          {% endcall %}

          {% call Accordion({
            title: 'Accordion manually expanded',
            active: true
          }) %}
           <div class="rte">
              <p>Lorem ipsum dolor sit amet consectetur. Phasellus nec euismod sit sit rhoncus nisl. Quis lacus rhoncus risus sed condimentum eget dignissim at diam. Ullamcorper odio risus senectus nunc bibendum ornare. Dis pulvinar egestas blandit proin adipiscing senectus purus neque. A convallis vulputate dignissim pharetra. Sed enim vitae id integer risus dolor vitae. Aliquam habitant interdum enim pulvinar ut purus vitae amet. Sagittis nibh ipsum lectus volutpat malesuada ut amet elementum. ed</p>
            </div>
          {% endcall %}

          {% call Accordion({
            title: 'Accordion disabled',
            disabled: true
          }) %}
           <div class="rte">
              <p>Lorem ipsum dolor sit amet consectetur. Phasellus nec euismod sit sit rhoncus nisl. Quis lacus rhoncus risus sed condimentum eget dignissim at diam. Ullamcorper odio risus senectus nunc bibendum ornare. Dis pulvinar egestas blandit proin adipiscing senectus purus neque. A convallis vulputate dignissim pharetra. Sed enim vitae id integer risus dolor vitae. Aliquam habitant interdum enim pulvinar ut purus vitae amet. Sagittis nibh ipsum lectus volutpat malesuada ut amet elementum. ed</p>
            </div>
          {% endcall %}
        {% endcall %}
      {% endcall %}
    {% endcall %}
  {% endcall %}
{% endcall %}