page ID20

app/assets/stylesheets/custom.scss

 @import "bootstrap";
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
-/* header */
 #logo {
   float: left;
   margin-right: 10px;
@@ -24,6 +23,7 @@
 .container p {
   font-weight: 400;
   font-size: medium;
+  text-align: justify;
   }
   a {
     color: rgb(14, 14, 14);
@@ -58,3 +58,8 @@
   }
 }
 
+.apply-job btn{
+  align-items: center;
+  justify-content: center;
+}
+

app/controllers/jobs_controller.rb

 class JobsController < ApplicationController
-  def show
+  def index
     if params[:city_slug].present?
       city = City.find_by(slug: params[:city_slug])
       jobs = city.jobs
@@ -12,4 +12,8 @@ class JobsController < ApplicationController
     @total = jobs.count
     @jobs = jobs.latest_jobs.page(params[:page])
   end
+
+  def show
+    @job = Job.latest_jobs.find_by(id: params[:job_id])
+  end
 end
\ No newline at end of file

app/controllers/top_controller.rb

 class TopController < ApplicationController
-  def home
+  def index
     @jobs = Job.latest_jobs.limit(Job::LATEST_JOB_NUMBER)
     @cities = City.top_cities
     @industries = Industry.top_industries

app/views/jobs/_breadcrumb.html.slim

+nav.breadcrumb[style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb"]
+  ol.breadcrumb.py-3
+    li.breadcrumb-item 
+      = link_to "Top", root_path
+    li.breadcrumb-item  
+      - @job.cities.each do |city|
+        = link_to city.name, city_slug_path(city.slug) 
+    li.breadcrumb-item 
+      - @job.industries.each do |industry|
+        = link_to industry.name, industry_slug_path(industry.slug) 
+    li.breadcrumb-item.active = link_to @job.title
\ No newline at end of file

app/views/jobs/index.html.slim

+- provide :title, 'Job List'
+
+= render 'search'
+.container
+  h5.fw-normal
+    | Total: 
+    = pluralize(@total, 'job')
+  h5.fw-normal 
+    | Result for: 
+    = @result
+  h6.offset-md-4
+    = paginate @jobs, window: 1
+  .job-list
+    - @jobs.each do |job| 
+      .row.bg-white
+        .col-10.p-3.border.card-body.text-dark
+          h5.mb-1
+            = link_to job.title, detail_path(job.id)
+          p.mb-1
+            = link_to job.company.name, "#"
+          p.mb-1
+            i.fas.fa-dollar-sign.m-1
+            | Lương: 
+            = job.salary
+          p.mb-1
+            i.fas.fa-map-marker-alt.m-1
+            = link_to job.cities.map(&:name).uniq.join(' | '), "#"
+          p.mb-1
+            = truncate(job.overview, length: 250)
+        .col-sm-2.p-3.border.favourite
+          = link_to "Farourite", "#", class: "btn btn-outline-primary"
+  h6.offset-md-4.px-5
+    = page_entries_info @jobs
+  h6.offset-md-4
+    = paginate @jobs, window: 1
\ No newline at end of file

app/views/jobs/show.html.slim

-- provide :title, 'Job List'
+- provide :title, 'Job Detail'
 
-= render 'search'
-.container
-  h5.fw-normal
-    | Total: 
-    = pluralize(@total, 'job')
-  h5.fw-normal 
-    | Result for: 
-    = @result
-  h6.offset-md-4
-    = paginate @jobs, window: 1
-  .job-list
-    - @jobs.each do |job| 
-      .row.bg-white
-        .col-10.p-3.border.card-body.text-dark
-          h5.mb-1
-            = link_to job.title, "#"
-          p.mb-1
-            = link_to job.company.name, "#"
-          p.mb-1
-            i.fas.fa-dollar-sign.m-1
-            | Lương: 
-            = job.salary
-          p.mb-1
-            i.fas.fa-map-marker-alt.m-1
-            = link_to job.cities.map(&:name).uniq.join(' | '), "#"
-          p.mb-1
-            = truncate(job.overview, length: 250)
-        .col-sm-2.p-3.border.favourite
-          = link_to "Farourite", "#", class: "btn btn-outline-primary"
-  h6.offset-md-4.px-5
-    = page_entries_info @jobs
-  h6.offset-md-4
-    = paginate @jobs, window: 1
\ No newline at end of file
+= render 'breadcrumb'
+.row.bg-white
+  .col-10.p-3.detail-job.text-dark
+    h1.mb-2
+      = @job.title
+    h3.mb-2
+      = link_to @job.company.name, "#"
+    .row
+      .col
+        p.mb-2
+          | Lương: 
+          = @job.salary
+        p.mb-2
+          | Location: 
+          - @job.cities.each do |city|
+            = link_to city.name, city_slug_path(city.slug)
+        p.mb-2
+          | Job type:  
+          = @job.job_type
+      .col
+        p.mb-2
+          | Level: 
+          = @job.level
+        p.mb-2
+          | Experience: 
+          = @job.experience
+        p.mb-2
+          | Expired at: 
+          = @job.expired_at.strftime("%d/%m/%Y")
+    h5.my-3
+      | Benefits
+    p.mb-2
+      = @job.benefits
+    h5.my-3
+      | Overview
+    p.mb-2
+      - @job.overview
+    h5.my-3
+      | Requirement 
+    p.mb-2
+      = @job.requirement
+    h5.my-3
+      | Other requirement 
+    p.mb-2
+      = @job.other_requirement
+  .col-sm-2.p-3.apply-job
+    = link_to "Apply this Job", "#", class: "btn btn-outline-primary btn-lg"
+.row.bg-white.p-4
+  .col.text-end
+    = link_to "Apply this Job", "#", class: "btn btn-outline-primary btn-lg"
+  .col
+    = link_to "Favourite", "#", class: "btn btn-outline-primary btn-lg"
+
+  
\ No newline at end of file

app/views/top/home.html.slim → app/views/top/index.html.slim

@@ -11,7 +11,7 @@ h3.p-2
         .card.my-3
           .card-body.text-dark
             h5.mb-1
-              = link_to job.title, "#"
+              = link_to job.title, detail_path(job.id)
             p.mb-1
               = link_to job.company.name, "#"
             p.mb-1

config/routes.rb

 Rails.application.routes.draw do
-  root 'top#home'
-  get  'cities', to: 'cities#show'
-  get  'industries', to: 'industries#show'
-  get  'jobs/city/:city_slug', to: 'jobs#show', as: 'city_slug'
-  get  'jobs/industry/:industry_slug', to: 'jobs#show', as: 'industry_slug'
+  root 'top#index'
+  get 'cities', to: 'cities#show'
+  get 'industries', to: 'industries#show'
+  get 'jobs/city/:city_slug', to: 'jobs#index', as: 'city_slug'
+  get 'jobs/industry/:industry_slug', to: 'jobs#index', as: 'industry_slug'
+  get 'detail/:job_id', to: 'jobs#show', as: 'detail'
 end
\ No newline at end of file