@if (section() === 'billing') {
  <form
    class="customer-form"
    [formGroup]="checkoutService.customerForm">
    @if (checkoutService.isCompany()) {
      <div class="field-line">
        <div class="field-block long">
          <label
            class="title-s"
            for="company">
            {{ 'billing.company' | translate }} *
          </label>
          <pa-input
            id="company"
            formControlName="company"
            [errorMessages]="errors"
            externalLabel></pa-input>
        </div>
        <div class="field-block short">
          <label
            class="title-s"
            for="vat">
            {{ 'billing.vat_id' | translate }}
            <span>*</span>
          </label>
          <pa-input
            id="vat"
            formControlName="vat"
            [errorMessages]="errors"
            externalLabel></pa-input>
        </div>
      </div>
    }
    <div class="field-line">
      <div class="field-block">
        <label
          class="title-s"
          for="name">
          {{ (checkoutService.isCompany() ? 'billing.contact_name' : 'generic.name') | translate }} *
        </label>
        <pa-input
          id="name"
          formControlName="name"
          [errorMessages]="errors"
          externalLabel></pa-input>
      </div>
      <div class="field-block email-field">
        <label
          class="title-s"
          for="email">
          {{ 'billing.email' | translate }} *
        </label>
        <pa-input
          id="email"
          formControlName="email"
          [errorMessages]="errors"
          externalLabel></pa-input>
      </div>
      <div class="field-block">
        <label
          class="title-s"
          for="phone">
          {{ 'billing.phone' | translate }} *
        </label>
        <pa-input
          id="phone"
          formControlName="phone"
          [placeholder]="'billing.phone_placeholder' | translate"
          [errorMessages]="errors"
          externalLabel></pa-input>
      </div>
    </div>
    <div class="field-line">
      <div class="field-block long">
        <label
          class="title-s"
          for="address">
          {{ (checkoutService.isCompany() ? 'billing.company_address' : 'billing.address') | translate }} *
        </label>
        <pa-input
          id="address"
          formControlName="address"
          [errorMessages]="errors"
          externalLabel></pa-input>
      </div>
      <div class="field-block">
        <label
          class="title-s"
          for="country">
          {{ 'billing.country' | translate }} *
        </label>
        <nsi-country-select
          [id]="'country'"
          formControlName="country"
          [readonly]="!!checkoutService.customer()"
          [errorMessages]="errors"
          [externalLabel]="true"></nsi-country-select>
      </div>
    </div>
    <div class="field-line">
      <div class="field-block">
        <label
          class="title-s"
          for="city">
          {{ 'billing.city' | translate }} *
        </label>
        <pa-input
          id="city"
          formControlName="city"
          [errorMessages]="errors"
          externalLabel></pa-input>
      </div>
      <div class="field-block">
        <label
          class="title-s"
          for="state">
          {{ 'billing.state' | translate }}
        </label>
        <pa-input
          id="state"
          formControlName="state"
          externalLabel></pa-input>
      </div>
      <div class="field-block short">
        <label
          class="title-s"
          for="postal_code">
          {{ 'billing.postal_code' | translate }} *
        </label>
        <pa-input
          id="postal_code"
          formControlName="postal_code"
          [errorMessages]="errors"
          externalLabel></pa-input>
      </div>
    </div>
  </form>
} @else {
  <div class="card-form">
    <div class="field-block">
      <label
        class="title-s"
        for="card-name">
        {{ 'billing.card_name' | translate }}
      </label>
      <pa-input
        id="card-name"
        [formControl]="checkoutService.cardName"
        [errorMessages]="errors"
        externalLabel></pa-input>
    </div>
    <div>
      <span class="title-s">
        {{ 'billing.card_details' | translate }}
      </span>
      <div class="card-element">
        <div #card></div>
      </div>
      <div class="card-error">{{ checkoutService.cardError() }}</div>
    </div>
  </div>
}