<div class="top-bar">
    @for(company of Employers; track company.accountID){
        <button class="secondary-button" (click)="changeSelectedCompany(company.company.id!)">{{ company.company.name.toUpperCase() }}</button>
    }
    <button class="primary-button" routerLink="/company/editor" >CONNECT A COMPANY</button>
</div>
<div class="content-frame">
    @if(Comp != null){
        <div>
            <button class="primary-button content-edit" routerLink="/company/editor" [queryParams]="{ CompanyID: Comp.id }" >EDIT COMPANY</button>
            <div class="center-item">
                <a [href]="Comp.websiteURL">
                    <img [src]="Comp.logo" />
                </a>
            </div>
            <div class="center-item">
                <div class="content-link"><a [href]="'mailto:' + Comp.email" >{{ Comp.email }}</a></div>
                <div class="content-name"><h1>{{ Comp.name }}</h1></div>
                <div class="content-link"><a [href]="'tel:' + Comp.phone">{{ Comp.phone }}</a></div>
            </div>
            <div class="center-item">
                <h1>{{ Comp.city }}, {{ Comp.stateOrRegion }} {{ Comp.postalCode }}</h1>
            </div>
            <div class="content-desc">
                @for (line of Desc; track line.length){
                    <h1>{{ line }}</h1>
                }
            </div>
            <hr />
            <div class="split-frame">
                <div class="half-frame">
                    @if (Comp.emailVerified){
                        <div class="content-button">
                            <button class="primary-button" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >POST JOB</button>
                        </div>
                    } @else {
                        <div class="content-button">
                            <a class="primary-button" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
                            <span>You must verify your company email before you can post job listings.</span>
                        </div>
                    }
                    <hr />
                    <h2>Active Job Listings</h2>
                    @for (listing of List; track listing.id) {
                        <div class="job-tile">
                            <div class="center-text">
                                <h1>{{ listing.title }}</h1>
                            </div>
                            <button class="secondary-button" [routerLink]="['/application/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW Applicants</button>
                            <button class="secondary-button" [routerLink]="['/jobs/viewer']" [queryParams]="{ JobID: listing.id }" >VIEW LISTING</button>
                            <button class="secondary-button" [routerLink]="['/jobs/editor']" [queryParams]="{ JobID: listing.id }" >EDIT LISTING</button>
                            <button class="secondary-button" (click)="RemoveJobListing(listing.id!)">DELETE LISTING</button>
                        </div>
                    }
                </div>
                <div class="half-frame">
                    @if (Comp.emailVerified){
                        <div class="content-button">
                            <button class="primary-button" routerLink="/jobs/editor" [queryParams]="{ CompanyID: Comp.id }" >ADD EMPLOYEE</button>
                        </div>
                    } @else {
                        <div class="content-button">
                            <a class="primary-button" [href]="'/api/company/sendverifyemail?CompanyID=' + Comp.id" >VERIFY EMAIL></a>
                            <span>You must verify your company email before you can post job listings.</span>
                        </div>
                    }
                    <hr />
                    <h2>Employees</h2>
                    @for (listing of CompEmployees; track listing.id) {
                        <div class="job-tile">
                            <div class="center-text">
                                <h1>{{ listing.accountName }}</h1>
                            </div>
                            @if (listing.accountID != auth.loggedInUser.id){
                                <button class="secondary-button" (click)="RemoveJobListing(listing.id!)">Remove</button>
                            } @else {
                                <button class="secondary-button" disabled>SELF</button>
                            }
                        </div>
                    }
                </div>
            </div>
        </div>
    }
</div>