<!-- Filter Bar -->
<div class="top-bar">
    <div class="top-bar-sub">
        <h1>Country</h1>
        <input name="CountryCode" [(ngModel)]="currentFilter.CountryCode" (ngModelChange)="checkUpdate()" type="text" />
    </div>
    <div class="top-bar-sub">
        <h1>Postal Code</h1>
        <input name="PostalCode" [(ngModel)]="currentFilter.PostalCode" (ngModelChange)="checkUpdate()" type="text" />
    </div>
    @if (currentFilter.CountryCode != null && currentFilter.CountryCode !== "" && currentFilter.PostalCode != null && currentFilter.PostalCode !== ""){
        <div class="top-bar-sub">
            <h1>Distance</h1>
            <input name="Distance" [(ngModel)]="currentFilter.Distance" type="number" />
        </div>
    }
    <div class="top-bar-sub">
        <h1>Job Type</h1>
        <input name="CountryCode" [(ngModel)]="currentFilter.JobType" type="text" />
    </div>
    <div class="top-bar-sub">
        <h1>Remote</h1>
        <input name="Remote" [(ngModel)]="currentFilter.Remote" type="checkbox" />
    </div>
    <div class="top-bar-sub">
        <h1>Minimum Salary</h1>
        <input name="SalaryMin" [(ngModel)]="currentFilter.SalaryMin" type="number" />
    </div>
    <div class="top-bar-sub">
        <h1>Maximum Salary</h1>
        <input name="SalaryMax" [(ngModel)]="currentFilter.SalaryMax" type="number" />
    </div>
    <div class="top-bar-sub">
        <h1></h1>
        <input name="ApplyButton" style="height: 25px;" value="APPLY" type="button" (click)="reloadFilters()" />
    </div>
</div>

<!-- Avaliable Jobs -->
<div class="tile-frame">
    @for (cur of JobListingPage; track cur.id){
        <div class="tile">
            <div class="tile-title">
                <h1>{{ cur.title }}</h1>
                <h2>${{ cur.salaryMin }} - ${{ cur.salaryMax }}</h2>
            </div>
            <div class="tile-split">
                <h1>{{ cur.jobType }}</h1>
                @if(cur.remote){
                    <h1>Remote</h1>
                }@else{
                    <h1>In-Person</h1>
                }
            </div>
            <div class="tile-split">
                <h1>{{ cur.city }}</h1>
                <h1>{{ cur.stateOrRegion }}</h1>
            </div>
            <div class="tile-button">
                <button [routerLink]="['/jobs/viewer']"  [queryParams]="{ JobID: cur.id }" >VIEW LISTING</button>
            </div>
        </div>
    }
</div>

<div class="jobs-per-page">
    <h1>Jobs Per Page</h1>
    <input name="JobsPerPage" [(ngModel)]="currentFilter.JobsPerPage" (ngModelChange)="reloadFilters()" type="number" />
</div>