agmission/Development/client/src/app/customers/customer-edit/customer-edit.component.html

<div class="ui-g" style="max-width: 1025px;">
  <div class="ui-g-12">
    <div class="card card-w-title">
      <h1 i18n="@@customerInfo">Customer Information</h1>
      <div class="ui-g ui-g-nopad" style="margin-top:40px">
        <form [formGroup]="form">
          <div class="ui-g-12 ui-g-nopad">
            <user-profile-form formControlName="profile" [requireName]="true" [focusOnFirst]="isNew"
              [updateCountry]="true"></user-profile-form>
          </div>

          <div class="ui-g-12 ui-md-6 ui-lg-6 form-row">
            <span class="form-label-span">
              <ng-container i18n="@@premiumLevel">Premium Level</ng-container>:
            </span>
            <p-dropdown id="premium" name="premium" formControlName="premium" [options]="premiumLevels"
              [style]="{'min-width': '120px'}">
              <ng-template let-type pTemplate="item">
                <span>
                  <strong>{{ type.label }}</strong>
                </span>
              </ng-template>
            </p-dropdown>
          </div>

          <!-- Partner Selection -->
          <div class="ui-g-12 ui-md-6 ui-lg-6 form-row">
            <span class="form-label-span">
              {{ Labels.FROM_PARTNER }}:
            </span>
            <p-dropdown id="partner" name="partner" formControlName="partner" [options]="partnerOptions"
              [style]="{'min-width': '200px'}" placeholder="Select Partner" (onChange)="onPartnerChange($event.value)"
              [loading]="partnerLoading">
              <ng-template let-option pTemplate="item">
                <div class="partner-option">
                  <div class="partner-info">
                    <div class="partner-name">{{ option.label }}</div>
                    <div class="partner-description" *ngIf="option.value && option.value.description">{{
                      option.value.description }}</div>
                  </div>
                </div>
              </ng-template>
              <ng-template let-option pTemplate="selectedItem">
                <div class="partner-selected" *ngIf="option">
                  <span>{{ option.label }}</span>
                  <div class="partner-description" *ngIf="option.value && option.value.description"
                    style="font-size: 0.9em; color: #666;">{{ option.value.description }}</div>
                </div>
              </ng-template>
            </p-dropdown>

            <!-- Partner Error Display -->
            <div *ngIf="partnerError" class="ui-message ui-messages-error ui-corner-all" style="margin-top: 5px;">
              <span class="ui-messages-error-icon ui-icon ui-icon-close"></span>
              <span class="ui-messages-error-summary">{{ partnerError }}</span>
            </div>
          </div>

          <div class="ui-g-12 ui-md-6 ui-lg-6 form-row">
            <p-checkbox id="billable" name="billable" formControlName="billable" label="Billable"
              binary="true"></p-checkbox>
          </div>

          <div class="ui-g-12 ">
            <ng-container *ngIf="hasPaidSubs(); else trialing">
              <ng-container [ngTemplateOutlet]="fieldSet"
                [ngTemplateOutletContext]="{subs: paidSubs, label: SubTexts.paid}"></ng-container>
            </ng-container>
            <ng-template #trialing>
              <ng-container *ngIf="hasTrialSubs(); else noTrialSubs">
                <ng-container [ngTemplateOutlet]="fieldSet"
                  [ngTemplateOutletContext]="{subs: trialSubs, label: SubTexts.trial}"></ng-container>
                <trial formControlName="trials" [trialDays]="trialDays" [trials]="trials" [disable]="true"></trial>
              </ng-container>
              <ng-template #noTrialSubs>
                <ng-container *ngIf="hasLastEndedTrial(); else newTrial">
                  <ng-container [ngTemplateOutlet]="lastTrial"></ng-container>
                  <trial formControlName="trials" [trialDays]="trialDays" [trials]="trials"></trial>
                </ng-container>
                <ng-template #newTrial>
                  <trial formControlName="trials" [trialDays]="trialDays" [trials]="trials"></trial>
                </ng-template>
              </ng-template>
            </ng-template>
          </div>

          <div class="ui-g-12">
            <p-messages [(value)]="msgs" [closable]="false"></p-messages>
            <agm-account-editor formControlName="account" [isNew]="isNew" (userExisted)="onUserExisted($event)"
              required="true" i18n-title="@@accessAccount" title="Access Account" showActive="true">
            </agm-account-editor>
          </div>
          <div class="ui-g-12 toolbar padtop1 ui-fluid">
            <button pButton [disabled]="form.invalid || partnerLoading" type="button" style="width:auto"
              [icon]="isNew ? 'ui-icon-plus' : 'ui-icon-save'" [label]="isNew ? globals.create : globals.save"
              (click)="saveCustomer(); false"></button>
            <button pButton type="button" style="width:auto" class="amber-btn" icon="ui-icon-arrow-back"
              (click)="goBack()" [label]="globals.back"></button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

<ng-template #lastTrial>
  <label class="theme-color">{{SubTexts.lastTrial}}</label>
  <div>
    <ul>
      <li><strong>{{SubTexts.lastStartDate}}: {{toTimestamp(trials.lastStartDate) | tsToDate: lang}}</strong></li>
      <li><strong>{{SubTexts.lastEndDate}}: {{toTimestamp(trials.lastEndDate) | tsToDate: lang}}</strong></li>
    </ul>
  </div>
</ng-template>

<ng-template #fieldSet let-label="label" let-subs="subs">
  <fieldset>
    <legend>{{SubTexts.labelSub}}</legend>
    <div class="ui-g">
      <div class="ui-g-6">
        <label class="theme-color">{{label}}</label>
        <div *ngFor="let sub of subs ">
          <ng-container *ngIf="sub.items[0].price | subPkg as fullPkg">
            <ul>
              <li>
                {{fullPkg.name}}
                <div>
                  <strong>
                    {{SubTexts.startDate}}: {{sub.periodStart | tsToDate: lang}}&nbsp;&nbsp;&nbsp;&nbsp;
                    {{SubTexts.endDate}}: {{sub.periodEnd | tsToDate: lang}}
                  </strong>
                </div>
              </li>
            </ul>
          </ng-container>
        </div>
      </div>
      <div *ngIf="hasLastEndedTrial()" class="ui-g-6">
        <ng-container [ngTemplateOutlet]="lastTrial"></ng-container>
      </div>
    </div>
  </fieldset>
</ng-template>