<div class="job-frame">

    @if (selectedJob != null) {
        <div class="job-details">
            @if (selectedJob.isDeleted){
                <div class="job-warning">
                    <h2>THIS JOB POSTING IS CLOSED</h2>
                </div>
            }
            <div class="center-item">
                <h1>{{ selectedJob.title }}</h1>
            </div>
            <div class="split">
                <div class="nobreak">
                    <h1>Job Description: </h1>
                    <div class="description-box">
                        <h1>{{ selectedJob.description }}</h1>
                    </div>
                </div>
                <div class="nobreak">
                    <h1>Job Details:</h1>
                    <div class="detail-block">
                        <h1>Job Type</h1>
                        <h2>{{ selectedJob.jobType }}</h2>
                    </div>
                    
                    <div class="detail-block">
                        <h1>In Office:</h1>
                        @if (selectedJob.remote){
                            <h2>Remote</h2>
                        } @else {
                            <h2>On-Site</h2>
                        }
                    </div>

                    <div class="detail-block">
                        <h1>Pay Range:</h1>
                        <h2>{{ selectedJob.salaryMin }} - {{ selectedJob.salaryMax }}</h2>
                    </div>
                    
                    @if (!selectedJob.remote){
                        <div class="detail-block">
                            <h1>Location:</h1>
                            <h2>{{ selectedJob.city }}, {{ selectedJob.stateOrRegion }} {{ selectedJob.country }} {{ selectedJob.postalCode }}</h2>
                        </div>
                    }

                    <div class="detail-block">
                        <h1>Required Skills:</h1>
                            @for(skill of selectedJob.skills; track skill.trackUUID){
                                <div class="skill-combo">
                                    <div class="nobreak">
                                        <h1>{{ skill.name }}</h1>
                                    </div>
                                    <div class="nobreak">
                                        <h2>{{ skill.description }}</h2>
                                    </div>
                                </div>
                            }
                    </div>

                    <div class="job-timestamp">
                        <span>Opened: {{ selectedJob.createdTime }} | Last Updated: {{ selectedJob.modifiedTime }}</span>
                    </div>
                </div>
            </div>

            <div class="bottom-bar">
                @for(resume of myResumes; track resume.trackUUID){
                    <button type="button" (click)="applyWithResume(resume)">APPLY USING RESUME: {{ resume.name }}</button>
                }
            </div>
        </div>
    }

    @if (jobsCompany != null){
        <div class="company-details">
            <div class="center-item">
                <a [href]="jobsCompany.websiteURL">
                    <img [src]="jobsCompany.logo" />
                </a>
            </div>
            <div class="center-item">
                <div class="content-link"><a [href]="'mailto:' + jobsCompany.email" >{{ jobsCompany.email }}</a></div>
                <div class="content-name"><h1>{{ jobsCompany.name }}</h1></div>
                <div class="content-link"><a [href]="'tel:' + jobsCompany.phone">{{ jobsCompany.phone }}</a></div>
            </div>
            <div class="center-item">
                <h1>{{ jobsCompany.city }}, {{ jobsCompany.stateOrRegion }} {{ jobsCompany.postalCode }}</h1>
            </div>
            <div class="content-desc">
                @for(line of jobsCompany.description.split('\n'); track line.length){
                    <h1>{{ line }}</h1>
                }
            </div>
        </div>
    }

</div>