{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: MPL-2.0
~}}

<div class="diff-section-table">
  {{#each this.fields as |field|}}
    <div
      data-test-diff-section-label="field"
      data-test-diff-field="{{lowercase field.Type}}"
      class="diff-section-table-row {{concat
        "diff-section-label is-"
        (lowercase field.Type)
      }}">
      <span class="diff-section-table-cell">
        <span class="marker {{concat "is-" (lowercase field.Type)}}">
          {{#if (eq (lowercase field.Type) "added")}}
            +
          {{else if (eq (lowercase field.Type) "deleted")}}
            -
          {{else if (eq (lowercase field.Type) "edited")}}
            +/-
          {{/if}}
        </span>
        {{field.Name}}:
      </span>
      {{#if (eq (lowercase field.Type) "added")}}
        <span class="diff-section-table-cell diff-section-change">"{{field.New}}"</span>
      {{else if (eq (lowercase field.Type) "deleted")}}
        <span class="diff-section-table-cell diff-section-change">"{{field.Old}}"</span>
      {{else if (eq (lowercase field.Type) "edited")}}
        <span class="diff-section-table-cell diff-section-change">"{{field.Old}}" => "{{field.New}}"</span>
      {{else}}
        <span class="diff-section-table-cell">"{{field.New}}"</span>
      {{/if}}
    </div>
  {{/each}}
</div>

{{#each this.objects as |object|}}
  <div
    data-test-diff-section-label="object"
    data-test-diff-field="{{lowercase object.Type}}"
    class="{{concat
      "diff-section-label is-"
      (lowercase object.Type)
    }}">
    <span class="marker {{concat "is-" (lowercase object.Type)}}">
      {{#if (eq (lowercase object.Type) "added")}}
        +
      {{else if (eq (lowercase object.Type) "deleted")}}
        -
      {{else if (eq (lowercase object.Type) "edited")}}
        +/-
      {{/if}}
    </span>
    {{object.Name}} {
      <div data-test-diff-section-label="nested-object" class="diff-section-label">
        <JobDiffFieldsAndObjects @fields={{object.Fields}} @objects={{object.Objects}} />
      </div>
    }
  </div>
{{/each}}
