{{#if (gt this.lifecyclePhases.length 1)}}
    <div class="boxed-section" data-test-lifecycle-chart>
      <div class="boxed-section-head">
        Task Lifecycle {{if this.taskStates "Status" "Configuration"}}
      </div>
      <div class="boxed-section-body lifecycle-chart">

        <div class="lifecycle-phases">
          {{#each this.lifecyclePhases as |phase|}}
            <div class="lifecycle-phase {{if phase.isActive "is-active"}} {{lowercase phase.name}}" data-test-lifecycle-phase>
              <div class="name" data-test-name>{{phase.name}}</div>
            </div>
          {{/each}}
          <svg class="divider prestart">
            <line x1="0" y1="0" x2="0" y2="100%" />
          </svg>
          <svg class="divider poststop">
            <line x1="0" y1="0" x2="0" y2="100%" />
          </svg>
        </div>

        <div class="lifecycle-chart-rows">
          {{#if this.tasks}}
            {{#each this.sortedLifecycleTasks as |task|}}
              <LifecycleChartRow @task={{task}} />
            {{/each}}
          {{else}}
            {{#each this.sortedLifecycleTaskStates as |state|}}
              <LifecycleChartRow @taskState={{state}} @task={{state.task}} />
            {{/each}}
          {{/if}}
        </div>

      </div>
    </div>
  {{/if}}