Fix the number per page

src/Client/src/app/pages/jobs/jobs.component.css

@@ -124,6 +124,9 @@ button {
 }
 
 .jobs-per-page {
+    position: absolute;
+    bottom: 100px;
+    right: 0;
     display: flex;
     justify-content: end;
     padding: 20px;

src/Client/src/app/pages/jobs/jobs.component.html

@@ -1,5 +1,7 @@
-<!-- Filter Bar -->
-<div class="top-bar">
+<div class="tile-frame">
+
+    <!-- Filter -->
+    <div class="tile">
         <div class="top-bar-sub">
             <div>
                 <h1>Country</h1>
@@ -32,7 +34,11 @@
             <div>
                 <h1>Job Type</h1>
             </div>
-        <input name="CountryCode" [(ngModel)]="currentFilter.JobType" type="text" />
+            <select name="JobType" [(ngModel)]="currentFilter.JobType" type="text">
+                @for(cur of jobTypeOptions; track cur){
+                    <option [value]="cur">{{cur}}</option>
+                }
+            </select>
         </div>
         <div class="top-bar-sub">
             <div>
@@ -56,10 +62,9 @@
             <h1></h1>
             <input name="ApplyButton" style="height: 25px;" value="APPLY" type="button" (click)="reloadFilters()" />
         </div>
-</div>
+    </div>
 
-<!-- Avaliable Jobs -->
-<div class="tile-frame">
+    <!-- Avaliable Jobs -->
     @for (cur of JobListingPage; track cur.id){
         <div class="tile">
             <div class="tile-title">

src/Client/src/app/pages/jobs/jobs.component.ts

@@ -19,6 +19,7 @@ export class JobsComponent {
   public distanceOptions = [10, 25, 50, 100];
   public itemsPerPageOptions = [10, 25, 50, 100];
   public countryOptions: string[] = [];
+  public jobTypeOptions: string[] = ["", "Full-time", "Part-time", "Contract", "Temporary", "Internship"];
 
   public currentFilter: JobFilter;
   public JobListingPage: JobListing[] = [];