{% call SGBuilder.SGSection({ title: 'Tabs component', id: 'Tabs' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Tabs default</h3>
      <div>
        {% call Tabs({
          tabs: [
            {
              title: 'Tab item 1'
            },
            {
              title: 'Tab item 2',
              active: true
            },
            {
              title: 'Tab item 3',
              disabled: true
            },
            {
              title: 'Tab item 4'
            }
          ]
        }) %}
          {% for panel in range(0, 4) %}
            {% call TabPanel() %}
              <a href="#">content {{ loop.index }}</a>
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>

      <div>
        {% call Tabs({
          tabs: [
            {
              title: 'Tab item 1',
              icon: 'icon-tab'
            },
            {
              title: 'Tab item 2',
              icon: 'icon-tab'
            },
            {
              title: 'Tab item 3',
              icon: 'icon-tab',
              disabled: true
            },
            {
              title: 'Tab item 4',
              icon: 'icon-tab',
              active: true
            }
          ]
        }) %}
          {% for panel in range(0, 4) %}
            {% call TabPanel() %}
              content {{ loop.index }}
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>
      <div>
        {% call Tabs({
          tabs: [
            {
              title: 'Tab item 1',
              icon: 'icon-tab',
              className: 'tabs__item--column'
            },
            {
              title: 'Tab item 2',
              icon: 'icon-tab',
              className: 'tabs__item--column',
              active: true
            },
            {
              title: 'Tab item 3',
              icon: 'icon-tab',
              className: 'tabs__item--column',
              disabled: true
            },
            {
              title: 'Tab item 4',
              icon: 'icon-tab',
              className: 'tabs__item--column'
            }
          ]
        }) %}
          {% for panel in range(0, 4) %}
            {% call TabPanel() %}
              content {{ loop.index }}
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>

      <div>
        {% call Tabs({
          tabs: [
            {
              icon: 'icon-tab',
              className: 'tabs__item--column'
            },
            {
              icon: 'icon-tab',
              className: 'tabs__item--column'
            },
            {
              icon: 'icon-tab',
              className: 'tabs__item--column',
              disabled: true
            },
            {
              icon: 'icon-tab',
              className: 'tabs__item--column'
            }
          ]
        }) %}
          {% for panel in range(0, 4) %}
            {% call TabPanel() %}
              content {{ loop.index }}
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>
    {% endcall %}

    {% call GridBuilder.GridColumn({ md: 6 }) %}
      <h3>Chip with badge</h3>
      <div>
        {% call Tabs({
          tabs: [
            {
              title: 'Tab item 1',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 2',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 3',
              disabled: true,
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 4',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            }
          ]
        }) %}
          {% for panel in range(0, 4) %}
            {% call TabPanel() %}
              content {{ loop.index }}
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>

      <div>
        {% call Tabs({
          tabs: [
            {
              title: 'Tab item 1',
              icon: 'icon-tab',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 2',
              icon: 'icon-tab',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 3',
              icon: 'icon-tab',
              disabled: true,
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 4',
              icon: 'icon-tab',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            }
          ]
        }) %}
          {% for panel in range(0, 4) %}
            {% call TabPanel() %}
              content {{ loop.index }}
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>
      <div>
        {% call Tabs({
          tabs: [
            {
              title: 'Tab item 1',
              icon: 'icon-tab',
              className: 'tabs__item--column',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 2',
              icon: 'icon-tab',
              className: 'tabs__item--column',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 3',
              icon: 'icon-tab',
              className: 'tabs__item--column',
              disabled: true,
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              title: 'Tab item 4',
              icon: 'icon-tab',
              className: 'tabs__item--column',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            }
          ]
        }) %}
          {% for panel in range(0, 4) %}
            {% call TabPanel() %}
              content {{ loop.index }}
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>

      <div>
        {% call Tabs({
          tabs: [
            {
              icon: 'icon-tab',
              className: 'tabs__item--column',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              icon: 'icon-tab',
              className: 'tabs__item--column',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              icon: 'icon-tab',
              className: 'tabs__item--column',
              disabled: true,
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            },
            {
              icon: 'icon-tab',
              className: 'tabs__item--column',
              badge: {
                className: 'badge--xs badge--grey-dark',
                text: 22
              }
            }
          ]
        }) %}
          {% for panel in range(0, 4) %}
            {% call TabPanel() %}
              content {{ loop.index }}
            {% endcall %}
          {% endfor %}
        {% endcall %}
      </div>
    {% endcall %}
  {% endcall %}
{% endcall %}