<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">Rechnungsadresse</h3>
  @if (addBillingAddressRoute$ | 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 flex flex-row justify-between items-center"
      >
      @if (isNotBusinessKonto$ | async) {
        <input
          name="assigned-payer"
          type="radio"
          [checked]="!(selectedPayer$ | 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 (assignedPayer of assignedPayers$ | async; track assignedPayer) {
    <label
      class="px-4 py-3 font-bold border-t-2 border-solid border-surface-2 cursor-pointer flex flex-row items-center justify-start"
      >
      <input
        name="assigned-payer"
        type="radio"
        [value]="assignedPayer"
        [checked]="(selectedPayer$ | async)?.payer.id === assignedPayer.payer.id"
        (change)="selectPayer(assignedPayer)"
        />
      <div class="ml-2 flex flex-row justify-between items-start grow">
        <span class="mr-4">
          {{ assignedPayer.payer.data | address }}
        </span>
        @if (canEditAddress$ | async) {
          @if (editRoute(assignedPayer.payer.id); as editRoute) {
            <a
              class="text-brand font-bold"
              [routerLink]="editRoute.path"
              [queryParams]="editRoute.queryParams"
              [queryParamsHandling]="'merge'"
              >
              Bearbeiten
            </a>
          }
        }
      </div>
    </label>
  }
</div>
