<mat-card>

  <div>
    <mat-card-header>

      <img mat-card-avatar [matMenuTriggerFor]="menu" class="header-avatar"
           [src]="avatar.value"
           alt="">

      <mat-menu #menu="matMenu">
        <avatar-menu [avatarFormControl]="avatar" [userId]="userInfo.controls['id'].value"></avatar-menu>
      </mat-menu>

      <mat-card-title class="company-name">
        <text-input [label]="'Company name'"
                    [formControlComponent]="$any(companyInfo).controls['companyName']"
                    [editMode]="editMode" fieldAppearance="outline"></text-input>
      </mat-card-title>

      <mat-card-title class="user-name">
        <div *ngIf="!editMode">{{userInfo.controls['name'].value}} {{userInfo.controls['lastName'].value}}</div>
        <div *ngIf="editMode" class="form-fields">
          <div class="form-field">
            <text-input [label]="'First name'" [formControlComponent]="$any(userInfo).controls['name']"
                        [editMode]="editMode" fieldAppearance="outline"></text-input>
          </div>
          <div class="form-field">
            <text-input [label]="'Last name'"
                        [formControlComponent]="$any(userInfo).controls['lastName']"
                        [editMode]="editMode" fieldAppearance="outline"></text-input>
          </div>
        </div>
      </mat-card-title>

      <span fxFlex></span>

      <button *ngIf="!editMode" mat-icon-button (click)="editMode = true">
        <mat-icon color="accent">edit</mat-icon>
      </button>

    </mat-card-header>

    <mat-divider></mat-divider>

    <h3 style="margin-left: 25px;">Description</h3>
    <p>
      <editor-input style="text-indent: 0" [formControlComponent]="$any(companyInfo).controls['description']"
                    [editMode]="editMode"></editor-input>
    </p>

    <mat-divider></mat-divider>

    <mat-card-content class="card-content">

      <div class="form-fields">
        <div class="form-field">
          <h3>Email</h3>
          <email-input [formControlComponent]="$any(userInfo).controls['email']" [editMode]="editMode"
                       fieldAppearance="outline"></email-input>
        </div>

        <div class="form-field">
        </div>
      </div>
      <div class="form-fields">
        <div class="form-field">
          <h3>Size</h3>
          <mat-form-field *ngIf="editMode" style="width: 100%" appearance="outline">
            <mat-label >Size</mat-label>
            <mat-select [formControl]="$any(companyInfo).controls['companySize']">
              <mat-option>--</mat-option>
              <mat-option *ngFor="let size of cSizes" [value]="size.value"><span>{{size.value}}</span>
              </mat-option>
            </mat-select>
          </mat-form-field>
          <div *ngIf="!editMode"><span>{{companyInfo.controls['companySize'].value}}</span></div>
        </div>
        <div class="form-field">
          <h3>Link</h3>
          <text-input [label]="'Company link'" inputType="url"
                      [formControlComponent]="$any(companyInfo).controls['companyLink']" [editMode]="editMode"
                      fieldAppearance="outline"></text-input>
        </div>
      </div>
    </mat-card-content>

  </div>
</mat-card>
<mat-card-actions *ngIf="editMode" align="end" class="action-buttons">

  <dialog-actions submitText="'Save changes'" (onCancel)="safeCancelChange()"
                  (onSubmit)="updateUser()"></dialog-actions>
</mat-card-actions>
