{{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
) as |api|}}

{{! 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 (or (not once) (state-matches state "loading"))}}
      <DataSource
        @open={{open}}
        @src={{src}}
        @onchange={{queue (action "change" value="data") (action dispatch "SUCCESS")}}
        @onerror={{queue (action (mut error) value="error.errors.firstObject") (action dispatch "ERROR")}}
      />
    {{/if}}
  </State>
{{/if}}

  <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>