x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<div class="tw:flex tw:h-screen tw:overflow-hidden"> <nav class="tw:w-20 tw:bg-white tw:border-r tw:border-[#e9ecef] tw:flex tw:flex-col tw:items-center tw:shrink-0 tw:h-full" aria-label="Student portal navigation"> <!-- Logos --> <div class="tw:flex tw:flex-col tw:items-center tw:gap-1 tw:pt-2.5 tw:pb-2 tw:w-full tw:border-b tw:border-[#f0f0f0]"> <div class="tw:w-9 tw:h-9 tw:bg-[#e53e3e] tw:rounded-md tw:flex tw:items-center tw:justify-center tw:font-heading tw:font-black tw:text-[14px] tw:leading-none tw:text-white" aria-hidden="true"> A<sup class="tw:text-[8px]">+</sup> </div> <div class="tw:w-8 tw:h-8 tw:bg-[#e9f0ff] tw:rounded tw:flex tw:items-center tw:justify-center tw:text-[14px] tw:text-[#2b48da]" aria-hidden="true"> <i class="fa-regular fa-shield"></i> </div> </div> <!-- Nav --> <button type="button" class="tw:w-full tw:flex tw:flex-col tw:items-center tw:justify-center tw:py-3.5 tw:gap-0.5 tw:bg-transparent tw:border-0 tw:cursor-pointer tw:hover:bg-[#f8f9fa]"> <i class="fa-regular fa-house tw:text-[22px] tw:text-[rgb(101,116,144)] tw:block" aria-hidden="true"></i> <span class="tw:text-[10px] tw:text-[rgb(101,116,144)] tw:tracking-[0.04em] tw:font-sans tw:mt-1">HOME</span> </button> <button type="button" class="tw:w-full tw:flex tw:flex-col tw:items-center tw:justify-center tw:py-3.5 tw:gap-0.5 tw:bg-transparent tw:border-0 tw:cursor-pointer tw:hover:bg-[#f8f9fa]"> <i class="fa-regular fa-comment-dots tw:text-[22px] tw:text-[rgb(101,116,144)] tw:block" aria-hidden="true"></i> <span class="tw:text-[10px] tw:text-[rgb(101,116,144)] tw:tracking-[0.04em] tw:font-sans tw:mt-1">MESSAGES</span> </button> <button type="button" class="tw:w-full tw:flex tw:flex-col tw:items-center tw:justify-center tw:py-3.5 tw:gap-0.5 tw:bg-transparent tw:border-0 tw:cursor-pointer tw:hover:bg-[#f8f9fa]"> <i class="fa-regular fa-folder tw:text-[22px] tw:text-[rgb(101,116,144)] tw:block" aria-hidden="true"></i> <span class="tw:text-[10px] tw:text-[rgb(101,116,144)] tw:tracking-[0.04em] tw:font-sans tw:mt-1">DOCUMENTS</span> </button> <button type="button" class="tw:w-full tw:flex tw:flex-col tw:items-center tw:justify-center tw:py-3.5 tw:gap-0.5 tw:bg-transparent tw:border-0 tw:cursor-pointer tw:hover:bg-[#f8f9fa]"> <i class="fa-regular fa-calendar-days tw:text-[22px] tw:text-[rgb(101,116,144)] tw:block" aria-hidden="true"></i> <span class="tw:text-[10px] tw:text-[rgb(101,116,144)] tw:tracking-[0.04em] tw:font-sans tw:mt-1">CALENDAR</span> </button> <!-- Back to admin --> <button type="button" class="tw:mt-auto tw:w-full tw:flex tw:flex-col tw:items-center tw:justify-center tw:py-3.5 tw:bg-transparent tw:border-0 tw:cursor-pointer tw:border-t tw:border-[#f0f0f0] tw:hover:bg-[#f8f9fa]"> <i class="fa-regular fa-right-to-bracket tw:-scale-x-100 tw:text-[20px] tw:text-[rgb(101,116,144)] tw:block" aria-hidden="true"></i> <span class="tw:text-[9px] tw:text-[rgb(101,116,144)] tw:tracking-[0.04em] tw:mt-1 tw:text-center tw:leading-[1.3]">BACK TO<br> ADMIN</span> </button> </nav> <div class="tw:flex-1 tw:flex tw:flex-col tw:overflow-hidden"> <nav class="tw:flex tw:bg-[#f8f9fa] tw:border-b-2 tw:border-[#e9ecef] tw:shrink-0" aria-label="Application steps"> <div class="tw:flex-1 tw:flex tw:flex-col tw:items-center tw:justify-center tw:px-1.5 tw:py-2.5 tw:min-w-0 tw:cursor-pointer tw:border-b-[3px] tw:border-transparent tw:bg-transparent" > <div class="tw:flex tw:items-center tw:gap-[5px] tw:mb-[3px]"> <i class="fa-solid fa-check tw:text-[9px] tw:text-[#28a745]" aria-hidden="true"></i> <span class="tw:bg-[#d4edda] tw:text-[#28a745] tw:rounded-[3px] tw:px-1.5 tw:py-px tw:text-[10px] tw:font-bold tw:whitespace-nowrap">Step 1</span> </div> <span class="tw:text-[11px] tw:text-[rgb(108,122,134)] tw:font-semibold tw:text-center tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis tw:max-w-full">Student Basic Details</span> </div> <div class="tw:flex-1 tw:flex tw:flex-col tw:items-center tw:justify-center tw:px-1.5 tw:py-2.5 tw:min-w-0 tw:cursor-pointer tw:border-b-[3px] tw:border-transparent tw:bg-transparent" > <div class="tw:flex tw:items-center tw:gap-[5px] tw:mb-[3px]"> <i class="fa-solid fa-check tw:text-[9px] tw:text-[#28a745]" aria-hidden="true"></i> <span class="tw:bg-[#d4edda] tw:text-[#28a745] tw:rounded-[3px] tw:px-1.5 tw:py-px tw:text-[10px] tw:font-bold tw:whitespace-nowrap">Step 2</span> </div> <span class="tw:text-[11px] tw:text-[rgb(108,122,134)] tw:font-semibold tw:text-center tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis tw:max-w-full">Parent/Carer Details</span> </div> <div class="tw:flex-1 tw:flex tw:flex-col tw:items-center tw:justify-center tw:px-1.5 tw:py-2.5 tw:min-w-0 tw:cursor-pointer tw:border-b-[3px] tw:border-[#16b4fc] tw:bg-white" aria-current="step"> <div class="tw:flex tw:items-center tw:gap-[5px] tw:mb-[3px]"> <i class="fa-solid fa-check tw:text-[9px] tw:text-[#7b3fb0]" aria-hidden="true"></i> <span class="tw:bg-[#ece1f7] tw:text-[#7b3fb0] tw:rounded-[3px] tw:px-1.5 tw:py-px tw:text-[10px] tw:font-bold tw:whitespace-nowrap">Step 3</span> </div> <span class="tw:text-[11px] tw:text-[rgb(38,43,54)] tw:font-bold tw:text-center tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis tw:max-w-full">Pathway</span> </div> <div class="tw:flex-1 tw:flex tw:flex-col tw:items-center tw:justify-center tw:px-1.5 tw:py-2.5 tw:min-w-0 tw:cursor-pointer tw:border-b-[3px] tw:border-transparent tw:bg-transparent" > <div class="tw:flex tw:items-center tw:gap-[5px] tw:mb-[3px]"> <span class="tw:bg-[#e9ecef] tw:text-[#6c757d] tw:rounded-[3px] tw:px-1.5 tw:py-px tw:text-[10px] tw:font-bold tw:whitespace-nowrap">Step 4</span> </div> <span class="tw:text-[11px] tw:text-[rgb(108,122,134)] tw:font-semibold tw:text-center tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis tw:max-w-full">Courses</span> </div> <div class="tw:flex-1 tw:flex tw:flex-col tw:items-center tw:justify-center tw:px-1.5 tw:py-2.5 tw:min-w-0 tw:cursor-pointer tw:border-b-[3px] tw:border-transparent tw:bg-transparent" > <div class="tw:flex tw:items-center tw:gap-[5px] tw:mb-[3px]"> <span class="tw:bg-[#e9ecef] tw:text-[#6c757d] tw:rounded-[3px] tw:px-1.5 tw:py-px tw:text-[10px] tw:font-bold tw:whitespace-nowrap">Step 5</span> </div> <span class="tw:text-[11px] tw:text-[rgb(108,122,134)] tw:font-semibold tw:text-center tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis tw:max-w-full">Additional Information</span> </div> <div class="tw:flex-1 tw:flex tw:flex-col tw:items-center tw:justify-center tw:px-1.5 tw:py-2.5 tw:min-w-0 tw:cursor-pointer tw:border-b-[3px] tw:border-transparent tw:bg-transparent" > <div class="tw:flex tw:items-center tw:gap-[5px] tw:mb-[3px]"> <span class="tw:bg-[#e9ecef] tw:text-[#6c757d] tw:rounded-[3px] tw:px-1.5 tw:py-px tw:text-[10px] tw:font-bold tw:whitespace-nowrap">Step 6</span> </div> <span class="tw:text-[11px] tw:text-[rgb(108,122,134)] tw:font-semibold tw:text-center tw:whitespace-nowrap tw:overflow-hidden tw:text-ellipsis tw:max-w-full">Consents and Information</span> </div> </nav> <div class="tw:flex-1 tw:overflow-y-auto tw:bg-white"> <div class="tw:px-7 tw:pt-5 tw:pb-10 tw:max-w-[1180px]"> <!-- Instruction note (staff-authored) --> <div class="tw:border-l-[3px] tw:border-[#d7dbe3] tw:pl-[22px] tw:mb-6 tw:text-[13.5px] tw:leading-[1.65] tw:text-[rgb(52,52,52)]"> <p class="tw:m-0 tw:mb-3 tw:font-bold tw:italic">PLEASE READ:</p> <p class="tw:m-0 tw:mb-2.5 tw:font-bold tw:italic">Please note that at the application stage,</p> <ul class="tw:m-0 tw:mb-4 tw:pl-[22px] tw:font-bold tw:italic"> <li class="tw:mb-1">you need a minimum APS of 4 from your mock grades in order to make an application.</li> <li class="tw:mb-1">you need to be within one grade of the subject specific entry criteria from your mock grades in order to qualify for a conditional offer.</li> <li class="tw:mb-1">we do not accept applications with an APS of less than 4.</li> <li>we do not accept applications for three vocational subjects.</li> </ul> <p class="tw:m-0 tw:mb-4 tw:font-bold tw:italic"> If you have an APS of 4+ at the application stage, please select the pathway visible below by clicking in the box, then click on Save & Next to take you to the Courses step where you select your subjects. Once you have selected your subjects, click on Submit to submit your application. </p> <p class="tw:m-0 tw:mb-2"> Once you receive your results in the summer, you will need to meet both the APS requirement and the minimum subject specific entry criteria for your chosen subjects: </p> <ul class="tw:m-0 tw:pl-[22px]"> <li class="tw:mb-1">Pathway 1 - APS 4.5 – 4.9: Students should choose a vocational blend of three subjects, i.e. either one A Level and two BTEC/CTECs or two A Levels and one BTEC/CTEC. We do not accept applications for three vocational subjects.</li> <li class="tw:mb-1">Pathway 2 - APS 5 – 5.9: Students can choose three A Levels, excluding Biology, Chemistry and Physics.</li> <li class="tw:mb-1">Pathway 3 - APS 6+: Students can choose any three A Levels.</li> <li>Pathway 4 - APS 7+: Students can choose any four A Levels (however, it is only advisable to choose Further Maths as a 4th A Level).</li> </ul> </div> <!-- Pathway list --> <h2 id="pathway-list-heading" class="tw:text-sm tw:font-bold tw:text-[rgb(38,43,54)] tw:mb-3">Please select a pathway</h2> <div class="tw:flex tw:flex-col tw:gap-3" role="radiogroup" aria-labelledby="pathway-list-heading"> <div class="tw:border tw:border-[#e5e8ee] tw:rounded-lg tw:bg-white tw:px-5 tw:py-4 tw:flex tw:gap-3.5 tw:items-start"> <input type="radio" id="pathway-3" name="pathway" value="Pathway 3" class="tw:mt-0.5 tw:w-4 tw:h-4 tw:shrink-0 tw:accent-[#3478f7] tw:cursor-pointer"> <div class="tw:flex-1 tw:min-w-0"> <label for="pathway-3" class="tw:block tw:text-sm tw:font-semibold tw:leading-snug tw:text-[rgb(38,43,54)] tw:mb-2.5 tw:cursor-pointer"> APS 6+ : any three A Levels </label> <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap"> <button type="button" class="tw:inline-flex tw:items-center tw:gap-1.5 tw:bg-[#eef1f6] tw:text-[#3f4a5c] tw:border tw:border-[#dfe3ea] tw:rounded tw:px-2.5 tw:py-1 tw:text-xs tw:font-semibold tw:cursor-pointer"> <i class="fa-regular fa-eye tw:text-[11px]" aria-hidden="true"></i> View courses <span class="tw:bg-[#3478f7] tw:text-white tw:rounded-full tw:min-w-[18px] tw:h-[18px] tw:px-1.5 tw:text-[11px] tw:font-bold tw:inline-flex tw:items-center tw:justify-center">16</span> </button> <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-xs tw:font-semibold tw:rounded tw:px-2.5 tw:py-1 tw:bg-[#e7f6ec] tw:text-[#1d6a34]"> <i class="fa-solid fa-circle-check tw:text-[11px]" aria-hidden="true"></i> Includes A-Level Biology </span> </div> </div> </div> <div class="tw:border tw:border-[#e5e8ee] tw:rounded-lg tw:bg-white tw:px-5 tw:py-4 tw:flex tw:gap-3.5 tw:items-start"> <input type="radio" id="pathway-2" name="pathway" value="Pathway 2" class="tw:mt-0.5 tw:w-4 tw:h-4 tw:shrink-0 tw:accent-[#3478f7] tw:cursor-pointer"> <div class="tw:flex-1 tw:min-w-0"> <label for="pathway-2" class="tw:block tw:text-sm tw:font-semibold tw:leading-snug tw:text-[rgb(38,43,54)] tw:mb-2.5 tw:cursor-pointer"> APS 5 – 5.9 : three A Levels, excluding separate Sciences </label> <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap"> <button type="button" class="tw:inline-flex tw:items-center tw:gap-1.5 tw:bg-[#eef1f6] tw:text-[#3f4a5c] tw:border tw:border-[#dfe3ea] tw:rounded tw:px-2.5 tw:py-1 tw:text-xs tw:font-semibold tw:cursor-pointer"> <i class="fa-regular fa-eye tw:text-[11px]" aria-hidden="true"></i> View courses <span class="tw:bg-[#3478f7] tw:text-white tw:rounded-full tw:min-w-[18px] tw:h-[18px] tw:px-1.5 tw:text-[11px] tw:font-bold tw:inline-flex tw:items-center tw:justify-center">13</span> </button> <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-xs tw:font-semibold tw:rounded tw:px-2.5 tw:py-1 tw:bg-[#fdf3e2] tw:text-[#b25f00]"> <i class="fa-solid fa-circle-exclamation tw:text-[11px]" aria-hidden="true"></i> A-Level Biology will be removed </span> </div> </div> </div> <div class="tw:border tw:border-[#e5e8ee] tw:rounded-lg tw:bg-white tw:px-5 tw:py-4 tw:flex tw:gap-3.5 tw:items-start"> <input type="radio" id="pathway-1" name="pathway" value="Pathway 1" class="tw:mt-0.5 tw:w-4 tw:h-4 tw:shrink-0 tw:accent-[#3478f7] tw:cursor-pointer"> <div class="tw:flex-1 tw:min-w-0"> <label for="pathway-1" class="tw:block tw:text-sm tw:font-semibold tw:leading-snug tw:text-[rgb(38,43,54)] tw:mb-2.5 tw:cursor-pointer"> APS 4.5 – 4.9 : a vocational blend of three subjects </label> <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap"> <button type="button" class="tw:inline-flex tw:items-center tw:gap-1.5 tw:bg-[#eef1f6] tw:text-[#3f4a5c] tw:border tw:border-[#dfe3ea] tw:rounded tw:px-2.5 tw:py-1 tw:text-xs tw:font-semibold tw:cursor-pointer"> <i class="fa-regular fa-eye tw:text-[11px]" aria-hidden="true"></i> View courses <span class="tw:bg-[#3478f7] tw:text-white tw:rounded-full tw:min-w-[18px] tw:h-[18px] tw:px-1.5 tw:text-[11px] tw:font-bold tw:inline-flex tw:items-center tw:justify-center">9</span> </button> <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-xs tw:font-semibold tw:rounded tw:px-2.5 tw:py-1 tw:bg-[#fdf3e2] tw:text-[#b25f00]"> <i class="fa-solid fa-circle-exclamation tw:text-[11px]" aria-hidden="true"></i> A-Level Biology will be removed </span> </div> </div> </div> </div> <!-- Button bar --> <div class="tw:flex tw:items-center tw:gap-2.5 tw:mt-6 tw:flex-wrap"> <button type="button" class="tw:bg-[rgb(38,60,145)] tw:text-white tw:border-0 tw:rounded tw:px-4 tw:py-2 tw:text-sm tw:font-semibold tw:cursor-pointer"> Save Progress and Close </button> <button type="button" class="tw:bg-[#16b4fc] tw:text-white tw:border-0 tw:rounded tw:px-4 tw:py-2 tw:text-sm tw:font-semibold tw:cursor-pointer"> Previous </button> <button type="button" disabled class="tw:ml-auto tw:bg-[#c9cdd3] tw:text-white tw:border-0 tw:rounded tw:px-4 tw:py-2 tw:text-sm tw:font-semibold tw:cursor-not-allowed"> Save & Next </button> </div> </div> </div> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<%# ds:allow raw-hex — faithful translation of the ApplicaaOne student portal (CourseFirstApplications/StudentFlow.jsx); the palette is that product's, not DS+ %><%# Course-First Applications — Student Portal: Pathway step, pathways ON (AC6) %><%# Reference: CourseFirstApplications/StudentFlow.jsx:785-989 (PathwayScreen) and :37-71 (PATHWAY_DEFS). Qualifying student — APS 6.5, so all three pathways are eligible (no "not eligible" banner). Pre-selected course: A-Level Biology (a Science), arrived via a course-specific link. Per PATHWAY_DEFS (StudentFlow.jsx:37-71), A-Level Biology is a member of Pathway 3's course list only ("any three A Levels") — Pathway 2 excludes it (excludes separate Sciences) and Pathway 1 excludes it (vocational blend). So Pathway 3 computes `includes_course: true` and shows the green "Includes" chip, while Pathways 1 and 2 compute `includes_course: false` and exercise the amber "will be removed" branch (StudentFlow.jsx:904-910) — demonstrating AC6's single-pathway highlight. Per ticket AC6, choosing a different pathway silently ignores the pre-selection — no error or warning is shown. The reference's conflict confirmation modal (StudentFlow.jsx:960-986) is intentionally NOT implemented here. The "View courses" modal (StudentFlow.jsx:929-958) is also omitted per task scope — a static "View courses (N)" button keeps the course count only. %><% prelinked_course_name = "A-Level Biology" pathways = [ { id: "pathway-3", code: "Pathway 3", name: "APS 6+ : any three A Levels", course_count: 16, includes_course: true, }, { id: "pathway-2", code: "Pathway 2", name: "APS 5 – 5.9 : three A Levels, excluding separate Sciences", course_count: 13, includes_course: false, }, { id: "pathway-1", code: "Pathway 1", name: "APS 4.5 – 4.9 : a vocational blend of three subjects", course_count: 9, includes_course: false, }, ]%><div class="tw:flex tw:h-screen tw:overflow-hidden"> <%= render "projects/course_first_preview/student_app_rail" %> <div class="tw:flex-1 tw:flex tw:flex-col tw:overflow-hidden"> <%= render "projects/course_first_preview/student_step_nav", pathways_on: true, active: "pathway" %> <div class="tw:flex-1 tw:overflow-y-auto tw:bg-white"> <div class="tw:px-7 tw:pt-5 tw:pb-10 tw:max-w-[1180px]"> <!-- Instruction note (staff-authored) --> <div class="tw:border-l-[3px] tw:border-[#d7dbe3] tw:pl-[22px] tw:mb-6 tw:text-[13.5px] tw:leading-[1.65] tw:text-[rgb(52,52,52)]"> <p class="tw:m-0 tw:mb-3 tw:font-bold tw:italic">PLEASE READ:</p> <p class="tw:m-0 tw:mb-2.5 tw:font-bold tw:italic">Please note that at the application stage,</p> <ul class="tw:m-0 tw:mb-4 tw:pl-[22px] tw:font-bold tw:italic"> <li class="tw:mb-1">you need a minimum APS of 4 from your mock grades in order to make an application.</li> <li class="tw:mb-1">you need to be within one grade of the subject specific entry criteria from your mock grades in order to qualify for a conditional offer.</li> <li class="tw:mb-1">we do not accept applications with an APS of less than 4.</li> <li>we do not accept applications for three vocational subjects.</li> </ul> <p class="tw:m-0 tw:mb-4 tw:font-bold tw:italic"> If you have an APS of 4+ at the application stage, please select the pathway visible below by clicking in the box, then click on Save & Next to take you to the Courses step where you select your subjects. Once you have selected your subjects, click on Submit to submit your application. </p> <p class="tw:m-0 tw:mb-2"> Once you receive your results in the summer, you will need to meet both the APS requirement and the minimum subject specific entry criteria for your chosen subjects: </p> <ul class="tw:m-0 tw:pl-[22px]"> <li class="tw:mb-1">Pathway 1 - APS 4.5 – 4.9: Students should choose a vocational blend of three subjects, i.e. either one A Level and two BTEC/CTECs or two A Levels and one BTEC/CTEC. We do not accept applications for three vocational subjects.</li> <li class="tw:mb-1">Pathway 2 - APS 5 – 5.9: Students can choose three A Levels, excluding Biology, Chemistry and Physics.</li> <li class="tw:mb-1">Pathway 3 - APS 6+: Students can choose any three A Levels.</li> <li>Pathway 4 - APS 7+: Students can choose any four A Levels (however, it is only advisable to choose Further Maths as a 4th A Level).</li> </ul> </div> <!-- Pathway list --> <h2 id="pathway-list-heading" class="tw:text-sm tw:font-bold tw:text-[rgb(38,43,54)] tw:mb-3">Please select a pathway</h2> <div class="tw:flex tw:flex-col tw:gap-3" role="radiogroup" aria-labelledby="pathway-list-heading"> <% pathways.each do |pw| %> <div class="tw:border tw:border-[#e5e8ee] tw:rounded-lg tw:bg-white tw:px-5 tw:py-4 tw:flex tw:gap-3.5 tw:items-start"> <input type="radio" id="<%= pw[:id] %>" name="pathway" value="<%= pw[:code] %>" class="tw:mt-0.5 tw:w-4 tw:h-4 tw:shrink-0 tw:accent-[#3478f7] tw:cursor-pointer"> <div class="tw:flex-1 tw:min-w-0"> <label for="<%= pw[:id] %>" class="tw:block tw:text-sm tw:font-semibold tw:leading-snug tw:text-[rgb(38,43,54)] tw:mb-2.5 tw:cursor-pointer"> <%= pw[:name] %> </label> <div class="tw:flex tw:items-center tw:gap-2 tw:flex-wrap"> <button type="button" class="tw:inline-flex tw:items-center tw:gap-1.5 tw:bg-[#eef1f6] tw:text-[#3f4a5c] tw:border tw:border-[#dfe3ea] tw:rounded tw:px-2.5 tw:py-1 tw:text-xs tw:font-semibold tw:cursor-pointer"> <i class="fa-regular fa-eye tw:text-[11px]" aria-hidden="true"></i> View courses <span class="tw:bg-[#3478f7] tw:text-white tw:rounded-full tw:min-w-[18px] tw:h-[18px] tw:px-1.5 tw:text-[11px] tw:font-bold tw:inline-flex tw:items-center tw:justify-center"><%= pw[:course_count] %></span> </button> <% if pw[:includes_course] %> <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-xs tw:font-semibold tw:rounded tw:px-2.5 tw:py-1 tw:bg-[#e7f6ec] tw:text-[#1d6a34]"> <i class="fa-solid fa-circle-check tw:text-[11px]" aria-hidden="true"></i> Includes <%= prelinked_course_name %> </span> <% else %> <span class="tw:inline-flex tw:items-center tw:gap-1.5 tw:text-xs tw:font-semibold tw:rounded tw:px-2.5 tw:py-1 tw:bg-[#fdf3e2] tw:text-[#b25f00]"> <i class="fa-solid fa-circle-exclamation tw:text-[11px]" aria-hidden="true"></i> <%= prelinked_course_name %> will be removed </span> <% end %> </div> </div> </div> <% end %> </div> <!-- Button bar --> <div class="tw:flex tw:items-center tw:gap-2.5 tw:mt-6 tw:flex-wrap"> <button type="button" class="tw:bg-[rgb(38,60,145)] tw:text-white tw:border-0 tw:rounded tw:px-4 tw:py-2 tw:text-sm tw:font-semibold tw:cursor-pointer"> Save Progress and Close </button> <button type="button" class="tw:bg-[#16b4fc] tw:text-white tw:border-0 tw:rounded tw:px-4 tw:py-2 tw:text-sm tw:font-semibold tw:cursor-pointer"> Previous </button> <button type="button" disabled class="tw:ml-auto tw:bg-[#c9cdd3] tw:text-white tw:border-0 tw:rounded tw:px-4 tw:py-2 tw:text-sm tw:font-semibold tw:cursor-not-allowed"> Save & Next </button> </div> </div> </div> </div></div>No notes provided.
No params configured.