<div class="center-content">
  <mat-card class="card">
    <mat-card-header>

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

      <mat-card-title>
        <div *ngIf="$any(jobPosition).controls['status'].value === 'INACTIVE'">
          <button mat-flat-button disabled style="height: 30px; width: 50px; font-size: 10pt">
            {{'jobs.inactive' | translate}}
          </button>
        </div>
        <text-input class="position-name" [formControlComponent]="$any(jobPosition).controls['positionName']"
                    [editMode]="false"></text-input>
      </mat-card-title>

      <mat-card-title class="company-name accentColor"
                      [routerLink]="'/companies/' + $any(jobPosition).controls['company'].controls['id'].value">
        <text-input [formControlComponent]="$any(jobPosition).controls['company'].controls['companyName']"
                    [editMode]="false"></text-input>
      </mat-card-title>

      <mat-card-subtitle style="margin-bottom: 10px">
        <div *ngIf="$any(jobPosition).get('jobCategories').controls.length !== 0">
          <extendable-chips [categories]="$any(jobPosition).get('jobCategories')" [maxVisible]="3"></extendable-chips>
        </div>
      </mat-card-subtitle>

      <mat-card-subtitle *ngIf="!!$any(jobPosition).controls['country'].value"
                         style="margin-bottom: 10px; font-size: 1vw">
        <address-input
          [formControlCountryIn]="$any(jobPosition).controls['country']"
          [formControlStateIn]="$any(jobPosition).controls['state']"
          [formControlCityIn]="$any(jobPosition).controls['city']"
          [editMode]="false">
        </address-input>
      </mat-card-subtitle>

      <mat-card-subtitle
        *ngIf="!!$any(jobPosition).get('created').value && !!$any(jobPosition).get('lastUpdated').value">
        <div>
          {{('job-position.created' | translate) + ' ' + getCreated()}}
          , {{('job-position.updated' | translate) + ' ' + getUpdated()}}
        </div>
      </mat-card-subtitle>

      <span fxFlex></span>

      <div>

        <button *ngIf="canEdit && !applicant" mat-icon-button (click)="editJob()">
          <mat-icon color="accent">edit</mat-icon>
        </button>
        <button *ngIf="canEdit && $any(jobPosition).controls['status'].value === 'ACTIVE'" mat-icon-button
                (click)="deleteJobPosition(); $event.stopPropagation();">
          <mat-icon color="accent">delete</mat-icon>
        </button>
        <button *ngIf="canEdit && $any(jobPosition).controls['status'].value === 'INACTIVE'" mat-icon-button
                (click)="restoreJobPosition(); $event.stopPropagation();">
          <mat-icon color="accent">restore_from_trash</mat-icon>
        </button>

        <div *ngIf="!canEdit && applicant">
          <button *ngIf="!$any(jobPosition).controls['favourite'].value" mat-icon-button
                  (click)="addToFavorite(); $event.stopPropagation();">
            <mat-icon color="accent">favorite_border</mat-icon>
          </button>
          <button *ngIf="$any(jobPosition).controls['favourite'].value" mat-icon-button
                  (click)="deleteFromFavorite(); $event.stopPropagation();">
            <mat-icon color="accent">favorite</mat-icon>
          </button>
        </div>
      </div>


    </mat-card-header>
    <div style="position: relative;">
      <mat-card-actions align="end" class="up">
        <div>
          <div class="accentColor" style="cursor: default"
               *ngIf="!fromApplications && $any(jobPosition).get('appliedCount').value !== 0">
            {{'job-position.applied' | translate}} <b>{{$any(jobPosition).get('appliedCount').value}}</b>
          </div>
        </div>
      </mat-card-actions>
    </div>

    <mat-divider></mat-divider>


    <mat-card-content style="overflow-y: auto;">

      <editor-input [editMode]="false" [formControlComponent]="$any(jobPosition).get('detail')"></editor-input>
      {{'job-position.contact' | translate}}<a
      href="mailto:{{$any(jobPosition).get('contactEmail').value}}">{{$any(jobPosition).get('contactEmail').value}}</a>
      <div style="height: 48px;"></div>

    </mat-card-content>

    <div style="max-height: 100%"></div>

    <mat-card-actions align="end" class="action-buttons">
      <button *ngIf="!fromApplications" class="button-bottom" mat-raised-button [routerLink]="'/jobs'"
              [queryParams]="{companyId: $any(jobPosition).controls['company'].controls['id'].value, companyName: $any(jobPosition).controls['company'].controls['companyName'].value}">
        <mat-icon color="accent">work</mat-icon>
        <div>{{'job-position.other-jobs' | translate}}</div>
      </button>
      <div *ngIf="!canEdit && applicant && $any(jobPosition).controls['status'].value === 'ACTIVE'">
        <button class="button-bottom" *ngIf="!$any(jobPosition).controls['applied'].value" mat-raised-button
                (click)="apply(); $event.stopPropagation();">
          <mat-icon color="accent">assignment_turned_in</mat-icon>
          <div>{{'job-position.apply' | translate}}</div>
        </button>
        <button class="button-bottom" *ngIf="$any(jobPosition).controls['applied'].value" mat-raised-button
                (click)="deleteApplication(); $event.stopPropagation();">
          <mat-icon color="accent">done_all</mat-icon>
          <div>{{'job-position.withdraw' | translate}}</div>
        </button>
      </div>
      <button class="button-bottom"
              *ngIf="canEdit && !applicant && $any(jobPosition).controls['status'].value === 'ACTIVE'" mat-raised-button
              [routerLink]="'/jobs/'+$any(jobPosition).controls['id'].value+'/applications'">
        <mat-icon color="accent">assignment_turned_in</mat-icon>
        <div>{{'job-position.applicants' | translate}}</div>
      </button>

    </mat-card-actions>

  </mat-card>
</div>
