<div class="sky-wait-demo">
  <button
    class="sky-btn sky-btn-primary sky-test-wait sky-margin-inline-sm"
    type="button"
    (click)="isWaiting = !isWaiting"
  >
    Toggle wait
  </button>

  <button
    class="sky-btn sky-btn-primary sky-test-full-page sky-margin-inline-sm"
    type="button"
    (click)="toggleFullPageWait()"
  >
    Toggle full page wait (5 seconds)
  </button>

  <button
    class="sky-btn sky-btn-primary sky-test-full-page sky-margin-inline-sm"
    type="button"
    (click)="toggleFullPageWaitViaService()"
  >
    Toggle full page wait via SkyWaitService (5 seconds)
  </button>

  <button
    class="sky-btn sky-btn-primary sky-test-non-blocking"
    style="margin-bottom: 10px"
    type="button"
    (click)="isNonBlocking = !isNonBlocking"
  >
    Toggle blocking (currently set to
    {{ isNonBlocking ? 'non-blocking' : 'blocking' }})
  </button>

  <div class="sky-wait-demo-parent" style="width: 500px; height: 500px">
    <div style="height: 200px; width: 200px">
      Wait <a href="http://example.com">link</a> inside this element with text
      <sky-wait [isNonBlocking]="isNonBlocking" [isWaiting]="isWaiting" />
    </div>
  </div>

  <div
    class="sky-wait-demo-absolute"
    style="height: 200px; width: 200px; margin-top: 10px"
  >
    <sky-wait [isWaiting]="isWaiting" />
    <div>
      <p style="position: absolute; background-color: red">
        A large area that can be waited with the <code>sky-wait</code> directive
        and a <a href="http://example.com">link</a>.
      </p>
    </div>
  </div>

  <div
    class="sky-wait-demo-absolute-behind"
    style="height: 200px; width: 200px; margin-top: 10px"
  >
    <sky-wait [isWaiting]="isWaiting" />
    <div>
      <p
        style="
          position: absolute;
          background-color: red;
          z-index: 1040;
          color: #000;
        "
      >
        A large area that can be waited with the <code>sky-wait</code> directive
        and a <a href="http://example.com">link</a>.
      </p>
    </div>
  </div>
</div>
<sky-wait
  [isWaiting]="isFullPageWaiting"
  [isFullPage]="true"
  [isNonBlocking]="isNonBlocking"
/>

<button class="sky-btn sky-btn-secondary" type="button">
  I am a button that does nothing, but you can tab navigate to and from me
</button>
