open-learning-exchange/planet

<mat-toolbar>
  <button mat-icon-button (click)="goBack()"><mat-icon>arrow_back</mat-icon></button>
  <span i18n>Edit Achievements</span>
</mat-toolbar>

<div class="planet-users-achievements-update space-container">
  <mat-toolbar class="primary-color font-size-1">
    <span *ngIf="user?.firstName; else elseBlock">{{ user.firstName}} {{user.middleName}} {{user.lastName }}</span>
    <ng-template #elseBlock>{{ user.name }}</ng-template>
  </mat-toolbar>
  <div class="view-container view-full-height">
    <div class="achievements-forms-container">
      <form [formGroup]="profileForm" class="form-spacing">
        <mat-form-field>
          <input matInput i18n-placeholder placeholder="First Name" formControlName="firstName" required>
          <mat-error><planet-form-error-messages [control]="profileForm.controls.firstName"></planet-form-error-messages></mat-error>
        </mat-form-field>
        <mat-form-field>
          <input matInput i18n-placeholder placeholder="Middle Name" formControlName="middleName">
        </mat-form-field>
        <mat-form-field>
          <input matInput i18n-placeholder placeholder="Last Name" formControlName="lastName" required>
          <mat-error><planet-form-error-messages [control]="profileForm.controls.lastName"></planet-form-error-messages></mat-error>
        </mat-form-field>
        <mat-form-field>
          <input matInput [matDatepicker]="dp" i18n-placeholder placeholder="Birthdate" formControlName="birthDate" required [min]="minBirthDate">
          <mat-datepicker-toggle matSuffix [for]="dp"></mat-datepicker-toggle>
          <mat-datepicker #dp></mat-datepicker>
          <mat-error><planet-form-error-messages [control]="profileForm.controls.birthDate"></planet-form-error-messages></mat-error>
        </mat-form-field>
        <mat-form-field>
          <input matInput i18n-placeholder placeholder="Birthplace" formControlName="birthplace">
        </mat-form-field>
      </form>
      <form [formGroup]="editForm">
        <mat-form-field class="full-width mat-form-field-type-no-underline">
          <planet-markdown-textbox class="full-width" [formControl]="editForm.controls.purpose" i18n-placeholder
            placeholder="My Purpose - What are your educational and professional ambitions?"
          ></planet-markdown-textbox>
        </mat-form-field>
        <mat-form-field class="full-width mat-form-field-type-no-underline">
          <planet-markdown-textbox class="full-width" [formControl]="editForm.controls.goals" i18n-placeholder
            placeholder="My Goals - What are your goals for the next 10 years?"
          ></planet-markdown-textbox>
        </mat-form-field>
        <mat-form-field class="full-width mat-form-field-type-no-underline">
          <planet-markdown-textbox class="full-width" [formControl]="editForm.controls.achievementsHeader" i18n-placeholder
            placeholder="Summary of Achievements - Briefly summarize your achievements and add related materials below"
          ></planet-markdown-textbox>
        </mat-form-field>
        <div>
          <p class="mat-hint mat-caption" i18n>Add any materials demonstrating your achievements below</p>
          <a mat-raised-button color="accent" class="margin-lr-3" *ngIf="achievements.length > 1" (click)="sortAchievements()">
            <ng-container i18n>Sort by Date</ng-container>
            <ng-container [ngSwitch]="editForm.controls.dateSortOrder.value">
              <mat-icon *ngSwitchCase="'desc'">keyboard_arrow_up</mat-icon>
              <mat-icon *ngSwitchCase="'asc'">keyboard_arrow_down</mat-icon>
            </ng-container>
          </a>
          <planet-step-list [steps]="achievements" [ignoreClick]="true">
            <planet-step-list-item *ngFor="let achievement of achievements.controls; index as i">
              <span>{{achievement.value.title || achievement.value}}</span>
              <button mat-stroked-button type="button" class="margin-lr-4" (click)="addAchievement(i, achievement.value)" i18n>Edit</button>
            </planet-step-list-item>
          </planet-step-list>
          <button type="button" (click)="addAchievement()" mat-stroked-button color="primary" i18n>Enter an Achievement</button>
        </div>
        <div>
          <p class="mat-hint mat-caption" i18n>Add any references below</p>
          <planet-step-list [steps]="references" [ignoreClick]="true">
            <planet-step-list-item *ngFor="let reference of references.controls; index as i">
              <span>{{reference.value.name}}</span>
              <button mat-stroked-button type="button" class="margin-lr-4" (click)="addReference(i, reference.value)" i18n>Edit</button>
            </planet-step-list-item>
          </planet-step-list>
          <button type="button" (click)="addReference()" mat-stroked-button color="primary" i18n>Enter a Reference</button>
        </div>
        <div>
          <p class="mat-hint mat-caption" i18n>Add any links below</p>
          <planet-step-list [steps]="links" [ignoreClick]="true">
            <planet-step-list-item *ngFor="let link of links.controls; index as i">
              <span>{{link.value.title}}</span>
              <button mat-stroked-button type="button" class="margin-lr-4" (click)="addLink(i, link.value)" i18n>Edit</button>
            </planet-step-list-item>
          </planet-step-list>
          <button type="button" (click)="addLink()" mat-stroked-button color="primary" i18n>Enter a Link</button>
        </div>
        <mat-checkbox formControlName="sendToNation" class="full-width" i18n>
          Allow your achievements to be shared with the nation
        </mat-checkbox>
      </form>
    </div>
    <div class="achievement-button">
      <button type="button" (click)="onSubmit()" mat-raised-button [planetSubmit]="editForm.valid && profileForm.valid" color="primary" i18n>Update</button>
      <button type="button" mat-raised-button color="warn" (click)="goBack()" i18n>Cancel</button>
    </div>
  </div>
</div>