<div class="app-step-applications">
  <!-- <progressbar class="pw-progressbar" tooltip="100%" placement="bottom" [value]="100"></progressbar> -->
  <form nestableForm #completeForm="ngForm">
    <div *ngIf="nameReservationForm" class="py-3 px-3 px-md-5">
      <accordion [closeOthers]="true" class="pw-accordion pw-accordion--steps expand-panel pw-accordion--full-screen-sm" #applicationSteps>
        <accordion-group *ngIf="sectionNumberForSectionType(NameReservationSectionTypes.APPLICANT_CONTACT_DETAILS); let currentSectionNumber" #group1 [isOpen]="true" [class.completed]="f1.valid && hasInput(f1)" [class.optional]="f1.valid && !hasInput(f1)" (isOpenChange)="accordionSetBodyClass($event, f1)">
          <app-section-heading accordion-heading [sectionNumber]="currentSectionNumber" sectionName="Applicant's Contact Details"></app-section-heading>
          <app-section [number]="currentSectionNumber" [sectionGroup]="group1" (onChange)="selectSection($event)" (onSave)="save()" (onFinish)="review()" finishLabel="Review">
            <form nestableForm #f1="ngForm">
              <app-applicants-contact-details-section [representative]="nameReservationForm.documentSignature.representative"></app-applicants-contact-details-section>
            </form>
          </app-section>
        </accordion-group>
        <accordion-group *ngIf="sectionNumberForSectionType(NameReservationSectionTypes.COMPANY_NAMES); let currentSectionNumber" #group2 [class.completed]="f2.valid && hasInput(f2)" [class.optional]="f2.valid && !hasInput(f2)" (isOpenChange)="accordionSetBodyClass($event, f2)">
          <app-section-heading accordion-heading [sectionNumber]="currentSectionNumber" sectionName="Information on a proposed name"></app-section-heading>
          <app-section [last]="currentSectionNumber === numberOfSections" [number]="currentSectionNumber" [sectionGroup]="group2" (onChange)="selectSection($event)" (onSave)="save()" (onFinish)="review()" finishLabel="Review">
            <form nestableForm #f2="ngForm">
              <app-company-names-section [nameReservationApplication]="nameReservationForm.application"></app-company-names-section>
            </form>
          </app-section>
        </accordion-group>
      </accordion>
    </div>
  </form>
</div>