<div
  class="flex items-center gap-2 self-stretch"
  data-what="order-type-indicator"
  role="status"
  [attr.aria-label]="'Order type: ' + orderType()">
  <ng-icon
    [name]="destinationIcon()"
    size="1.5rem"
    class="text-neutral-900"
    [attr.aria-hidden]="true"></ng-icon>
  <span class="isa-text-body-2-bold text-isa-secondary-900" [class.underline]="underline()">{{
    orderType()
  }}</span>
</div>
<div
  class="text-isa-neutral-600 isa-text-body-2-regular address-container"
  data-what="destination-details"
  role="region"
  aria-label="Destination information">
  @if (name() || address()) {
    <span data-what="recipient-name">{{ name() }}</span>
    @if (address()) {
      |
      <shared-inline-address
        [address]="address()"
        data-what="destination-address"></shared-inline-address>
    }
  } @else if (estimatedDelivery()) {
    <span data-what="estimated-delivery">
      @if (estimatedDelivery()!.stop) {
        Zustellung zwischen {{ estimatedDelivery()!.start | date: 'EEE, dd.MM.' }} und {{ estimatedDelivery()!.stop | date: 'EEE, dd.MM.' }}
      } @else if (estimatedDelivery()!.start) {
        Zustellung am {{ estimatedDelivery()!.start | date: 'EEE, dd.MM.' }}
      }
    </span>
  }
</div>
