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

            <mat-card-title>
                <div *ngIf="$any(jobPosition).controls['status'].value === 'INACTIVE'">
                    <button mat-flat-button disabled style="height: 30px; width: 50px; font-size: 10pt">
                        Inactive
                    </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>
                    {{'Created: ' + getCreated()}}
                    , {{'Last update:  ' + getUpdated()}}
                </div>
            </mat-card-subtitle>

            <span fxFlex></span>

            <div>

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


        </mat-card-header>
        <div style="position: relative;">
            <mat-card-actions align="end" class="up">
                <div>
                    <div class="accentColor" style="cursor: default"
                         *ngIf="$any(jobPosition).get('appliedCount').value !== 0">
                        Applications count: <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>
            Email: <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>
</div>
