{% call SGBuilder.SGSection({ title: 'Modals', id: 'Modals' }) %}
  {% call GridBuilder.Grid() %}
    {% call GridBuilder.GridColumn({ md: 12 }) %}
      <h3>Modals default</h3>
      {% call SGBuilder.SGRow() %}
        {{ Button({
          className: 'button button--error button--lg js-trigger-modal-button',
          text: 'Delete',
          attrs: {
            'x-modal-trigger': 'modal-1'
          }
        }) }}
        {% call Modal({
          icon: 'icons/delete',
          isError: true,
          title: 'Delete the link?',
          className: 'modal__wrapper--small',
          id: 'modal-1',
          checkbox: false,
          leftActions: false,
          rightActions: [
            {
              className: 'button--lg js-modal-close-button',
              text: 'Cancel'
            },
            {
              className: 'button--error button--lg',
              text: 'Delete'
            }
          ]
        }) %}
          <p>If your delete the link, it will be gone forever. Are you sure you want to proceed?</p>
        {% endcall %}

        {{ Button({
          className: 'button--primary button--lg js-trigger-modal-butt on',
          text: 'Notifications',
          attrs: {
            'x-modal-trigger': 'modal-2'
          }
        }) }}
        {% call Modal({
          title: 'Want to receive better notifications ?',
          id: 'modal-2',
          checkbox: false,
          leftActions: [
            {
              className: 'button button--link button--info-outline',
              text: 'Dismiss',
              href: '#'
            }
          ],
          rightActions: [
            {
              className: 'button--lg',
              text: 'Ask me later'

            },
            {
              className: 'button--primary button-lg',
              text: 'Switch'
            }
          ]
        }) %}
          <p>We recommend using desktop notifications, as browser alerts will not interrupt you.</p>
          <a href="#">Learn more about notifications</a>
        {% endcall %}

        {{ Button({
          className: 'button--primary button--lg js-trigger-modal-button',
          text: 'Sent a message',
          attrs: {
            'x-modal-trigger': 'modal-3'
          }
        }) }}
        {% call Modal({
          title: 'You just sent a message',
          id: 'modal-3',
          checkbox: [
            {
              label: 'Don’t show me again'
            }
          ],
          leftActions: false,
          rightActions: [
            {
              className: 'button--primary button-lg',
              text: 'Switch'
            }
          ]
        }) %}
          <p>Be sure to log all of your external communications in the time sheet so you get paid for your work. All communications logs are reset on Sunder at 12am EST.</p>
        {% endcall %}

        {{ Button({
          className: 'button button--success button--lg js-trigger-modal-button',
          text: 'General',
          attrs: {
            'x-modal-trigger': 'modal-4'
          }
        }) }}
        {% call Modal({
          icon: 'icons/frame_placeholder',
          id: 'modal-4',
          checkbox: [
            {
              label: 'checkbox 1'
            },
            {
              label: 'checkbox 2'
            },
            {
              label: 'checkbox 3'
            }
          ]
        }) %}
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet aperiam, culpa distinctio eius, error incidunt laboriosam magni natus nihil nisi obcaecati quas qui sapiente tenetur ullam ut veritatis voluptates?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet aperiam, culpa distinctio eius, error incidunt laboriosam magni natus nihil nisi obcaecati quas qui sapiente tenetur ullam ut veritatis voluptates?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet aperiam, culpa distinctio eius, error incidunt laboriosam magni natus nihil nisi obcaecati quas qui sapiente tenetur ullam ut veritatis voluptates?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet aperiam, culpa distinctio eius, error incidunt laboriosam magni natus nihil nisi obcaecati quas qui sapiente tenetur ullam ut veritatis voluptates?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet aperiam, culpa distinctio eius, error incidunt laboriosam magni natus nihil nisi obcaecati quas qui sapiente tenetur ullam ut veritatis voluptates?</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, amet aperiam, culpa distinctio eius, error incidunt laboriosam magni natus nihil nisi obcaecati quas qui sapiente tenetur ullam ut veritatis voluptates?</p>
        {% endcall %}

        {{ Button({
          className: 'button button--lg js-trigger-modal-button',
          text: 'No components',
          attrs: {
            'x-modal-trigger': 'modal-5'
          }
        }) }}
        {{ Modal({
          icon: 'icons/frame_placeholder',
          id: 'modal-5',
          checkbox: false,
          rightActions: false,
          leftActions: false,
          title: ''
        }) }}
      {% endcall %}

    {% endcall %}
  {% endcall %}
{% endcall %}