<div class="grid grid-flow-col items-center justify-between px-4 py-2 border-t-2 border-solid border-surface-2">
  <h3 class="font-bold text-xl">Lieferadresse</h3>
  @if (addShippingAddressRoute$ | async; as addRoute) {
    <a
      type="button"
      class="text-brand font-bold"
      [routerLink]="addRoute.path"
      [queryParams]="addRoute.queryParams"
      [queryParamsHandling]="'merge'"
      >
      Hinzufügen
    </a>
  }
</div>

<div class="grid grid-flow-row">
  @if (showCustomerAddress$ | async) {
    <label
      class="px-4 py-3 font-bold border-t-2 border-solid border-surface-2 cursor-pointer flex flex-row justify-start items-center"
      >
      <input name="shipping-address" type="radio" [checked]="!(selectedShippingAddress$ | async)" (change)="selectCustomerAddress()" />
      <div class="ml-2 flex flex-row justify-between items-start grow">
        <span class="mr-4">
          {{ customer$ | async | address }}
        </span>
        @if (editRoute$ | async; as editRoute) {
          <a
            [routerLink]="editRoute.path"
            [queryParams]="editRoute.queryParams"
            [queryParamsHandling]="'merge'"
            class="text-brand font-bold"
            type="button"
            >
            Bearbeiten
          </a>
        }
      </div>
    </label>
  }
  @for (shippingAddress of shippingAddresses$ | async; track shippingAddress) {
    <label
      class="px-4 py-3 font-bold border-t-2 border-solid border-surface-2 cursor-pointer flex flex-row justify-start items-center"
      >
      <input
        name="shipping-address"
        type="radio"
        [value]="shippingAddress"
        [checked]="(selectedShippingAddress$ | async)?.id === shippingAddress.id"
        (change)="selectShippingAddress(shippingAddress)"
        />
      <div class="ml-2 flex flex-row justify-between items-start grow">
        <span class="mr-4">
          {{ shippingAddress | address }}
        </span>
        @if (editShippingAddressRoute$(shippingAddress.id) | async; as route) {
          <a
            class="text-brand font-bold"
            type="button"
            [routerLink]="route?.path"
            [queryParams]="route?.queryParams"
            [queryParamsHandling]="'merge'"
            >
            Bearbeiten
          </a>
        }
      </div>
    </label>
  }
</div>
