<sky-split-view dock="fill" [messageStream]="splitViewStream">
  <sky-split-view-drawer [ariaLabel]="'Transaction list'" [width]="listWidth">
    <sky-repeater [activeIndex]="activeIndex">
      @for (item of items; track item; let i = $index) {
        <sky-repeater-item
          (click)="onItemClick(i)"
          (keyup.enter)="onItemClick(i)"
        >
          <sky-repeater-item-content>
            {{ item.amount }} <br />
            {{ item.date }} <br />
            {{ item.vendor }}
          </sky-repeater-item-content>
        </sky-repeater-item>
      }
    </sky-repeater>
  </sky-split-view-drawer>

  <sky-split-view-workspace ariaLabel="Transaction form">
    <sky-split-view-workspace-content class="sky-padding-even-xl">
      <form [formGroup]="splitViewDemoForm" (ngSubmit)="onApprove()">
        <sky-description-list class="sky-margin-stacked-xl">
          <sky-description-list-content>
            <sky-description-list-term>
              Receipt amount
            </sky-description-list-term>
            <sky-description-list-description>
              {{ activeRecord.amount }}
            </sky-description-list-description>
          </sky-description-list-content>
          <sky-description-list-content>
            <sky-description-list-term> Date </sky-description-list-term>
            <sky-description-list-description>
              {{ activeRecord.date }}
            </sky-description-list-description>
          </sky-description-list-content>
          <sky-description-list-content>
            <sky-description-list-term> Vendor </sky-description-list-term>
            <sky-description-list-description>
              {{ activeRecord.vendor }}
            </sky-description-list-description>
          </sky-description-list-content>
          <sky-description-list-content>
            <sky-description-list-term>
              Receipt image
            </sky-description-list-term>
            <sky-description-list-description>
              {{ activeRecord.receiptImage }}
            </sky-description-list-description>
          </sky-description-list-content>
        </sky-description-list>
        <div class="sky-form-group">
          <sky-input-box stacked="true">
            <label class="sky-control-label" [for]="amountInput.id">
              Approved amount
            </label>
            <input
              #amountInput
              class="sky-form-control"
              formControlName="approvedAmount"
              name="approvedAmount"
              type="text"
              skyId
            />
          </sky-input-box>
        </div>

        <div class="sky-form-group">
          <sky-input-box>
            <label class="sky-control-label" [for]="commentsInput.id">
              Comments
            </label>
            <textarea
              #commentsInput
              class="sky-form-control"
              formControlName="comments"
              name="comments"
              skyId
            ></textarea>
          </sky-input-box>
        </div>
      </form>
    </sky-split-view-workspace-content>
    <sky-split-view-workspace-footer>
      <sky-summary-action-bar id="summary-action-bar">
        <sky-summary-action-bar-actions>
          <sky-summary-action-bar-primary-action (actionClick)="onApprove()">
            Approve expense
          </sky-summary-action-bar-primary-action>
          <sky-summary-action-bar-secondary-actions>
            <sky-summary-action-bar-secondary-action (actionClick)="onDeny()">
              Deny expense
            </sky-summary-action-bar-secondary-action>
          </sky-summary-action-bar-secondary-actions>
        </sky-summary-action-bar-actions>
      </sky-summary-action-bar>
    </sky-split-view-workspace-footer>
  </sky-split-view-workspace>
</sky-split-view>
