<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>
          <sky-input-box stacked="true" labelText="Approved amount">
            <input
              formControlName="approvedAmount"
              name="approvedAmount"
              type="text"
            />
          </sky-input-box>
        </div>

        <div>
          <sky-input-box stacked="true" labelText="Comments">
            <textarea formControlName="comments" name="comments"></textarea>
          </sky-input-box>
        </div>
      </form>
    </sky-split-view-workspace-content>
    <sky-split-view-workspace-footer>
      <sky-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>
