<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>
        <text-input class="company-name" [formControlComponent]="$any(company).controls['companyName']"
                    [editMode]="false"></text-input>
      </mat-card-title>

      <mat-card-subtitle style="margin-bottom: 10px; font-size: 1.5vw">
        {{'inputs.company.size.value.' + $any(company).get('companySize').value | translate}}
      </mat-card-subtitle>

      <mat-card-subtitle style="margin-bottom: 10px; font-size: 1vw">
        <text-input [label]="'inputs.company.link.label'" inputType="url"
                    [formControlComponent]="$any(company).get('companyLink')" [editMode]="false"
                    fieldAppearance="outline"></text-input>
      </mat-card-subtitle>
    </mat-card-header>

    <mat-divider></mat-divider>

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

      <editor-input [editMode]="false" [formControlComponent]="$any(company).get('description')"></editor-input>

    </mat-card-content>

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

    <mat-card-actions align="end" class="action-buttons">
      <button class="button-bottom" mat-raised-button [routerLink]="'//jobs'"
              [queryParams]="{companyId: $any(company).controls['id'].value, companyName: $any(company).controls['companyName'].value}">
        <mat-icon color="accent">work</mat-icon>
        <div>{{'companies.look-for-jobs' | translate}}</div>
      </button>
    </mat-card-actions>

  </mat-card>
</div>
