{{yield}}
<StateChart @src={{chart}} as |State Guard Action dispatch state|>

  <Ref @target={{this}} @name="dispatch" @value={{dispatch}} />
  <Guard @name="loaded" @cond={{action "isLoaded"}} />

  {{did-update (fn dispatch "LOAD") src=src}}

{{#let (hash
  data=data
  error=error
  dispatchError=(queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR"))
) as |api|}}

    {{#yield-slot name="data"}}
      {{yield api}}
    {{else}}
      {{! if we didn't specify any data}}
      {{#if (not items)}}
        {{! try and load the data if we aren't in an error state}}
        <State @notMatches={{array "error" "disconnected"}}>
          {{! but only if we only asked for a single load and we are in loading state}}
          {{#if (and src (or (not once) (state-matches state "loading")))}}
            <DataSource
              @open={{open}}
              @src={{src}}
              @onchange={{queue (action "change" value="data") (action dispatch "SUCCESS")}}
              @onerror={{api.dispatchError}}
            />
          {{/if}}
        </State>
      {{/if}}
    {{/yield-slot}}

  <State @matches="loading">
    {{#yield-slot name="loading"}}
      {{yield api}}
    {{else}}
      <ConsulLoader />
    {{/yield-slot}}
  </State>

  <State @matches="error">
    {{#yield-slot name="error"}}
      {{yield api}}
    {{else}}
      <ErrorState @error={{error}} />
    {{/yield-slot}}
  </State>

  <State @matches={{array "idle" "disconnected"}}>

    <State @matches="disconnected">
        {{#yield-slot name="disconnected" params=(block-params (component 'notification' after=(action dispatch "RESET")))}}
          {{yield api}}
        {{else}}
          <Notification @sticky={{true}}>
            <p data-notification role="alert" class="warning notification-update">
              <strong>Warning!</strong>
              An error was returned whilst loading this data, refresh to try again.
            </p>
          </Notification>
        {{/yield-slot}}
    </State>

    <YieldSlot @name="loaded">
      {{yield api}}
    </YieldSlot>

  </State>

{{/let}}
</StateChart>