<shared-loader [loading]="fetching$ | async" background="true" spinnerSize="32">
  <div class="overflow-scroll max-h-[calc(100vh-15rem)]">
    <div class="customer-details-header grid grid-flow-row pb-6">
      <div
        class="customer-details-header-actions flex flex-row justify-end pt-4 px-4"
      >
        <page-customer-menu
          [customerId]="customerId$ | async"
          [processId]="processId$ | async"
          [hasCustomerCard]="hasKundenkarte$ | async"
          [showCustomerDetails]="false"
        ></page-customer-menu>
      </div>
      <div class="customer-details-header-body text-center -mt-3">
        <h1 class="text-[1.625rem] font-bold">
          {{ (isBusinessKonto$ | async) ? 'Firmendetails' : 'Kundendetails' }}
        </h1>
        <p>Sind Ihre Kundendaten korrekt?</p>
      </div>
    </div>
    <div
      class="customer-details-customer-type flex flex-row justify-between items-center bg-surface-2 text-surface-2-content h-14"
    >
      <div
        class="pl-4 font-bold grid grid-flow-col justify-start items-center gap-2"
      >
        <shared-icon [icon]="customerType$ | async"></shared-icon>
        <span>
          {{ customerType$ | async }}
        </span>
      </div>
      @if (showEditButton$ | async) {
        @if (editRoute$ | async; as editRoute) {
          <a
            [routerLink]="editRoute.path"
            [queryParams]="editRoute.queryParams"
            [queryParamsHandling]="'merge'"
            class="btn btn-label font-bold text-brand"
          >
            Bearbeiten
          </a>
        }
      }
    </div>

    <div
      class="customer-details-customer-main-data px-5 py-3 grid grid-flow-row gap-3"
    >
      <div class="flex flex-row">
        <div class="data-label">Erstellungsdatum</div>
        @if (created$ | async; as created) {
          <div class="data-value">
            {{ created | date: 'dd.MM.yyyy' }} |
            {{ created | date: 'HH:mm' }} Uhr
          </div>
        }
      </div>
      <div class="flex flex-row">
        <div class="data-label">Kundennummer</div>
        <div class="data-value">{{ customerNumber$ | async }}</div>
      </div>
      @if (customerNumberDig$ | async; as customerNumberDig) {
        <div class="flex flex-row">
          <div class="data-label">Kundennummer-DIG</div>
          <div class="data-value">{{ customerNumberDig }}</div>
        </div>
      }
      @if (customerNumberBeeline$ | async; as customerNumberBeeline) {
        <div class="flex flex-row">
          <div class="data-label">Kundennummer-BEELINE</div>
          <div class="data-value">{{ customerNumberBeeline }}</div>
        </div>
      }
    </div>
    @if (isBusinessKonto$ | async) {
      <div class="customer-details-customer-main-row">
        <div class="data-label">Firmenname</div>
        <div class="data-value">{{ organisationName$ | async }}</div>
      </div>
      <div class="customer-details-customer-main-row">
        <div class="data-label">Abteilung</div>
        <div class="data-value">{{ department$ | async }}</div>
      </div>
      <div class="customer-details-customer-main-row">
        <div class="data-label">USt-ID</div>
        <div class="data-value">{{ vatId$ | async }}</div>
      </div>
    }

    <div class="customer-details-customer-main-row">
      <div class="data-label">Anrede</div>
      <div class="data-value">{{ gender$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Titel</div>
      <div class="data-value">{{ title$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Nachname</div>
      <div class="data-value">{{ lastName$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Vorname</div>
      <div class="data-value">{{ firstName$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">E-Mail</div>
      <div class="data-value">{{ email$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Straße</div>
      <div class="data-value">{{ street$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Hausnr.</div>
      <div class="data-value">{{ streetNumber$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">PLZ</div>
      <div class="data-value">{{ zipCode$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Ort</div>
      <div class="data-value">{{ city$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Adresszusatz</div>
      <div class="data-value">{{ info$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Land</div>
      @if (country$ | async; as country) {
        <div class="data-value">{{ country | country }}</div>
      }
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Festnetznr.</div>
      <div class="data-value">{{ landline$ | async }}</div>
    </div>
    <div class="customer-details-customer-main-row">
      <div class="data-label">Mobilnr.</div>
      <div class="data-value">{{ mobile$ | async }}</div>
    </div>

    @if (!(isBusinessKonto$ | async)) {
      <div class="customer-details-customer-main-row">
        <div class="data-label">Geburtstag</div>
        <div class="data-value">
          {{ dateOfBirth$ | async | date: 'dd.MM.yyyy' }}
        </div>
      </div>
    }
    @if (!(isBusinessKonto$ | async) && (organisationName$ | async)) {
      <div class="customer-details-customer-main-row">
        <div class="data-label">Firmenname</div>
        <div class="data-value">{{ organisationName$ | async }}</div>
      </div>
      @if (!(isOnlineOrCustomerCardUser$ | async)) {
        <div class="customer-details-customer-main-row">
          <div class="data-label">Abteilung</div>
          <div class="data-value">{{ department$ | async }}</div>
        </div>
        <div class="customer-details-customer-main-row">
          <div class="data-label">USt-ID</div>
          <div class="data-value">{{ vatId$ | async }}</div>
        </div>
      }
    }

    <page-details-main-view-billing-addresses></page-details-main-view-billing-addresses>
    <page-details-main-view-delivery-addresses></page-details-main-view-delivery-addresses>
    <div class="h-24"></div>
  </div>
</shared-loader>

<button
  type="button"
  (click)="continue()"
  [class]="
    'text-white text-lg bg-brand rounded-full px-5 py-3 absolute top-[calc(100vh-19.375rem)] left-1/2 -translate-x-1/2 font-bold disabled:bg-inactive-branch' +
    (hasReturnUrl() ? ' w-60' : '')
  "
  [disabled]="
    hasReturnUrl()
      ? !(hasKundenkarte$ | async) || (showLoader$ | async)
      : (showLoader$ | async)
  "
>
  <shared-loader [loading]="showLoader$ | async" spinnerSize="32">
    @if (hasReturnUrl()) {
      Auswählen
    } @else if (shoppingCartHasItems$ | async) {
      Weiter zum Warenkorb
    } @else {
      Weiter zur Artikelsuche
    }
  </shared-loader>
</button>
