Notes

<div class="card my-4 p-4 border-t border-r-2 border-b-2 border-l rounded border-gray-300 text-sm font-sans bg-white">
<div class="card-header mb-3 px-1 pb-3 border-b-2 border-gray-300 font-sans font-semibold text-xl" style="text-shadow: 0 1px 1px rgba(0,0,0,0.4);">
<h2>Student Schedule</h2>
</div>
<div class="card-body">
<div>
<ul class="flex flex-row justify-start items-center border border-r-2 border-b-2 rounded border-gray-300 bg-gray-100 dark:bg-slate-800 dark:border-slate-900 mb-4">
<li>
<p class="px-3 py-2 font-semibold">TERM:</p>
</li>
<li data-tooltip="Summer 2024">
<button type="button" class="px-3 py-2 hover:bg-gray-200 active:bg-gray-300 active:dark:bg-slate-600 dark:hover:bg-slate-700" @click.prevent="changeTerm('previous')" :class="term=='previous' ? 'bg-gray-300 hover:bg-gray-200 dark:bg-slate-600 dark:hover:bg-slate-700' : 'hover:bg-gray-200 dark:hover:bg-slate-700'">
<span>Previous</span>
</button>
</li>
<li data-tooltip="Fall 2024">
<button type="button" class="px-3 py-2 hover:bg-gray-200 active:bg-gray-300 active:dark:bg-slate-600 bg-gray-300 dark:bg-slate-600 dark:hover:bg-slate-700" @click.prevent="changeTerm('current')" :class="term=='current' ? 'bg-gray-300 hover:bg-gray-200 dark:bg-slate-600 dark:hover:bg-slate-700' : 'hover:bg-gray-200 dark:hover:bg-slate-700'">
<span>Current</span>
</button>
</li>
<li data-tooltip="Spring 2025">
<button type="button" class="px-3 py-2 hover:bg-gray-200 active:bg-gray-300 active:dark:bg-slate-600 dark:hover:bg-slate-700" @click.prevent="changeTerm('next')" :class="term=='next' ? 'bg-gray-300 hover:bg-gray-200 dark:bg-slate-600 dark:hover:bg-slate-700' : 'hover:bg-gray-200 dark:hover:bg-slate-700'">
<span>Next</span>
</button>
</li>
<li class="ml-auto">
<template x-if="data[term].registered.length > 0 || data[term].waitlisted.length > 0">
<div x-data="{
open: false,
toggle() {
if (this.open) {
return this.close()
}
this.$refs.button.focus()
this.open = true
},
close(focusAfter) {
if (!this.open) return
this.open = false
focusAfter &amp;&amp; focusAfter.focus()
}
}" @keydown.escape.prevent.stop="close($refs.button)" @focusin.window="! $refs.panel.contains($event.target) &amp;&amp; close()" x-id="['dropdown-button']" class="relative z-50">
<button x-ref="button" @click="toggle()" :aria-expanded="open" :aria-controls="$id('dropdown-button')" type="button" class="px-3 py-2 button !text-slate-900 dark:!text-slate-300 hover:bg-gray-200 dark:hover:bg-slate-900 active:bg-gray-300 active:dark:bg-slate-600">
<i class="far fa-print"></i>
</button>
<div x-ref="panel" x-show="open" x-transition.opacity="" @click.outside="close($refs.button)" :id="$id('dropdown-button')" style="display: none" class="absolute right-0 mt-2 w-40 border border-r-2 border-b-2 rounded border-gray-300 bg-gray-100 dark:bg-slate-800 dark:border-slate-900">
<p class="flex items-center justify-center w-full px-4 py-1 border-b text-sm font-semibold dark:!text-slate-300 bg-gray-200 border-gray-300 dark:bg-slate-900 dark:border-slate-800" aria-label="Print Schedule Options">
Print Options
</p>

<a :href="'/api/student/schedule-print?term='+term" class="flex !text-gray-900 dark:!text-slate-100 items-center justify-between w-full px-4 py-2.5 text-sm hover:bg-gray-200 dark:hover:bg-slate-700 active:bg-gray-300 active:dark:bg-slate-600" target="_blank" aria-label="Print Schedule (Table)">
Table
<i class="far fa-table"></i>
</a>

<a :href="'/api/student/schedule-print/calendar?term='+term" class="flex !text-gray-900 dark:!text-slate-100 items-center justify-between w-full px-4 py-2.5 text-sm hover:bg-gray-200 dark:hover:bg-slate-700 active:bg-gray-300 active:dark:bg-slate-600" target="_blank" aria-label="Print Schedule (Calendar)">
Calendar
<i class="far fa-calendar-range"></i>
</a>
</div>
</div>
</template><div x-data="{
open: false,
toggle() {
if (this.open) {
return this.close()
}
this.$refs.button.focus()
this.open = true
},
close(focusAfter) {
if (!this.open) return
this.open = false
focusAfter &amp;&amp; focusAfter.focus()
}
}" @keydown.escape.prevent.stop="close($refs.button)" @focusin.window="! $refs.panel.contains($event.target) &amp;&amp; close()" x-id="['dropdown-button']" class="relative z-50">
<button x-ref="button" @click="toggle()" :aria-expanded="open" :aria-controls="$id('dropdown-button')" type="button" class="px-3 py-2 button !text-slate-900 dark:!text-slate-300 hover:bg-gray-200 dark:hover:bg-slate-900 active:bg-gray-300 active:dark:bg-slate-600" aria-expanded="false" aria-controls="dropdown-button-1">
<i class="far fa-print"></i>
</button>
<div x-ref="panel" x-show="open" x-transition.opacity="" @click.outside="close($refs.button)" :id="$id('dropdown-button')" style="display: none" class="absolute right-0 mt-2 w-40 border border-r-2 border-b-2 rounded border-gray-300 bg-gray-100 dark:bg-slate-800 dark:border-slate-900" id="dropdown-button-1">
<p class="flex items-center justify-center w-full px-4 py-1 border-b text-sm font-semibold dark:!text-slate-300 bg-gray-200 border-gray-300 dark:bg-slate-900 dark:border-slate-800" aria-label="Print Schedule Options">
Print Options
</p>

<a :href="'/api/student/schedule-print?term='+term" class="flex !text-gray-900 dark:!text-slate-100 items-center justify-between w-full px-4 py-2.5 text-sm hover:bg-gray-200 dark:hover:bg-slate-700 active:bg-gray-300 active:dark:bg-slate-600" target="_blank" aria-label="Print Schedule (Table)" href="/api/student/schedule-print?term=current">
Table
<i class="far fa-table"></i>
</a>

<a :href="'/api/student/schedule-print/calendar?term='+term" class="flex !text-gray-900 dark:!text-slate-100 items-center justify-between w-full px-4 py-2.5 text-sm hover:bg-gray-200 dark:hover:bg-slate-700 active:bg-gray-300 active:dark:bg-slate-600" target="_blank" aria-label="Print Schedule (Calendar)" href="/api/student/schedule-print/calendar?term=current">
Calendar
<i class="far fa-calendar-range"></i>
</a>
</div>
</div>
</li>
</ul>
</div>

<div id="student_schedule" style="display:block">

<template x-if="loading">
<div class="m-1 p-4 border-2 border-dotted border-gray-300 text-center">
<i class="far fa-forklift" aria-hidden="true"></i>
<span class="sr-only">Loading</span>
<span class="font-semibold" aria-hidden="true">oading...</span>
</div>
</template>

<template x-if="!loading &amp;&amp; displayForStatus(403)">
<div class="m-1 p-4 border-2 border-dotted border-gray-300">
<div class="text-center">
<i class="far fa-hand-paper" aria-hidden="true"></i>
<span class="ml-1 font-semibold">You do not have permission</span>
</div>
<div class="flex justify-center mt-3">
<div>
<p>You were logged out of your account due to inactivity. Please <a href="/accounts/login/" class="font-semibold underline ">log-in again</a>.</p>
</div>
</div>
</div>
</template>

<template x-if="!loading &amp;&amp; displayForStatus(500)">
<div class="m-1 p-4 border-2 border-dotted border-gray-300">
<div class="text-center">
<i class="far fa-exclamation-triangle" aria-hidden="true"></i>
<span class="ml-1 font-semibold">Something went wrong!</span>
</div>
<div class="mt-3 flex flex-col items-center">
<p class="mb-3">If you continue to experience issues, please contact <a href="mailto:[email protected]" class="font-semibold hover:underline">[email protected]</a>.</p>
<button @click.prevent="fetchSchedule()" class="px-4 py-2 bg-[#0055b8] hover:bg-blue-600 dark:bg-green-600 dark:hover:bg-green-700 text-white rounded-lg font-semibold"><i class="fas fa-redo"></i><span class="ml-1">Retry</span></button>
</div>
</div>
</template>

<template x-if="!loading &amp;&amp; isRegisteredEmpty() &amp;&amp; displayForStatus(200)">
<div class="m-1 p-4 border-2 border-dotted border-gray-300 text-center">
<i class="far fa-projector" aria-hidden="true"></i>
<span class="ml-1 font-semibold">Nothing to display!</span>
</div>
</template>

<template x-if="!loading &amp;&amp; !isRegisteredEmpty()">
<div>
<template x-for="(item, ct) in registered" :key="ct">

<div class="p-6 bg-white border border-r-2 border-b-2 border-gray-300 dark:border-slate-900 dark:bg-slate-800 rounded-lg mb-4 last:mb-0 mx-auto">
<div class="grid xl:grid-cols-2 gap-x-4">
<div>
<div class="flex">
<template x-if="item.meet_begin_time">
<div class="flex">
<ul class="mr-2 whitespace-nowrap">
<li x-text="item.meet_begin_time" class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7"></li>
<li x-text="item.meet_end_time" class="text-sm text-right"></li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<template x-if="item.insm == 'ONLIN' ">
<ul class="mr-2">
<li class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7">Online</li>
</ul>
</template>
<template x-if="!item.meet_begin_time &amp;&amp; item.meet_days_long.length>0">
<div class="flex">
<ul class="mr-3">
<li class="text-sm leading-4 pt-1 text-gray-600">TBD by Instructor</li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<ul class="ml-auto mr-8 xl:hidden whitespace-nowrap">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date"></span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date"></span>
</li>
</ul>
</div>
<ul>
<li class="text-lg sm:text-xl md:text-base lg:text-xl font-bold">
<template x-if="item.bb_id">
<a :href="item.bb_link" target="_blank" data-tooltip="View on Blackboard" x-text="item.course_title"></a>
</template>
<template x-if="!item.bb_id">
<span x-text="item.course_title"></span>
</template>

</li>
<li>
<span data-tooltip="Subject" x-text="item.subj"></span>&nbsp;<span data-tooltip="Course" x-text="item.crse"></span> - <span data-tooltip="Section" x-text="item.sec"></span> - <span data-tooltip="CRN" x-text="item.crn"></span>&nbsp;|&nbsp;<span x-text="item.insm" data-tooltip="Instructional Method"></span>
</li>
</ul>
<ul class="mt-2">
<li><span class="font-semibold">Registration Status:</span>&nbsp;
<span x-cloak="" x-show="item.reg_status=='RW'">Web Registered</span>
<span x-cloak="" x-show="item.reg_status=='RE'">Registered</span>
<span x-cloak="" x-show="item.reg_status=='WD'">Withdrawn</span>
</li>

<template x-if="item.cpos">
<li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-cloak="" x-show="item.cpos=='Y'">Yes</span><span x-cloak="" x-show="item.cpos=='N'">No</span>
</li>
</template>

<li>
<span class="font-semibold">Attendance Verified:</span>&nbsp;<span x-cloak="" x-show="item.attendance=='Y'">Yes</span><span x-cloak="" x-show="item.attendance=='N'">No</span>
</li>
<li>
<span class="font-semibold">Course Length:</span>&nbsp;<span x-text="stripletters(item.part_of_term)"></span>&nbsp;<span>weeks</span>
</li>
<li>
<span class="font-semibold">Credit Hours:</span>&nbsp;<span x-text="item.credit_hours"></span>
</li>
<li x-cloak="" x-show="item.grade">
<span class="font-semibold">Grade:</span>&nbsp;<span x-cloak="" x-show="item.grade!=='WN'" x-text="item.grade"></span><span x-cloak="" x-show="item.grade=='WN'">Withdrawn for Nonattendance</span>
</li>
</ul>
</div>

<div>
<div>

<div class="flex">
<ul class="mr-6 hidden xl:block">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date"></span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date"></span>
</li>
</ul>
<ul>
<li>
<span class="inline-block text-center w-6 font-semibold">D</span>
<span data-tooltip="Deadline to Receive 100% Refund" x-text="item.dw_end_date"></span>
<span class="sr-only">Drop Date</span>
</li>
<li>
<span class="inline-block text-center w-6 font-semibold">W</span>
<span data-tooltip="Deadline to Withdraw" x-text="item.wd_end_date"></span>
<span class="sr-only">Withdrawal Date</span>
</li>
</ul>
</div>
<template x-if="item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor"></span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline"></a>
</li>
</ul>
</template>
<template x-if="!item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span data-tooltip="Instructor">TBD</span>
</li>
</ul>
</template>

<ul class="mt-2">
<template x-for="bldg in item.bldg_room_days_time">
<li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
</template>
<template x-if="item.directions">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-map-marker-alt" aria-hidden="true"></i>
</span>
<span class="sr-only">Google maps directions</span>
<a class="font-semibold hover:underline" :href="item.directions" rel="noopener" target="_blank">
Get Directions
</a>
</li>
</template>
<template x-if="item.map">
<li>
<span class="inline-block text-center w-6">
<i class="fas fa-walking" aria-hidden="true"></i>
</span>
<span class="sr-only">Campus map pdf</span>
<a class="font-semibold hover:underline" :href="item.map" rel="noopener" target="_blank">
Campus Map
</a>
</li>
</template>
</ul>


</div>
</div>

</div>
</div>
</template>
</div>
</template><div>
<template x-for="(item, ct) in registered" :key="ct">

<div class="p-6 bg-white border border-r-2 border-b-2 border-gray-300 dark:border-slate-900 dark:bg-slate-800 rounded-lg mb-4 last:mb-0 mx-auto">
<div class="grid xl:grid-cols-2 gap-x-4">
<div>
<div class="flex">
<template x-if="item.meet_begin_time">
<div class="flex">
<ul class="mr-2 whitespace-nowrap">
<li x-text="item.meet_begin_time" class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7"></li>
<li x-text="item.meet_end_time" class="text-sm text-right"></li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<template x-if="item.insm == 'ONLIN' ">
<ul class="mr-2">
<li class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7">Online</li>
</ul>
</template>
<template x-if="!item.meet_begin_time &amp;&amp; item.meet_days_long.length>0">
<div class="flex">
<ul class="mr-3">
<li class="text-sm leading-4 pt-1 text-gray-600">TBD by Instructor</li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<ul class="ml-auto mr-8 xl:hidden whitespace-nowrap">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date"></span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date"></span>
</li>
</ul>
</div>
<ul>
<li class="text-lg sm:text-xl md:text-base lg:text-xl font-bold">
<template x-if="item.bb_id">
<a :href="item.bb_link" target="_blank" data-tooltip="View on Blackboard" x-text="item.course_title"></a>
</template>
<template x-if="!item.bb_id">
<span x-text="item.course_title"></span>
</template>

</li>
<li>
<span data-tooltip="Subject" x-text="item.subj"></span>&nbsp;<span data-tooltip="Course" x-text="item.crse"></span> - <span data-tooltip="Section" x-text="item.sec"></span> - <span data-tooltip="CRN" x-text="item.crn"></span>&nbsp;|&nbsp;<span x-text="item.insm" data-tooltip="Instructional Method"></span>
</li>
</ul>
<ul class="mt-2">
<li><span class="font-semibold">Registration Status:</span>&nbsp;
<span x-cloak="" x-show="item.reg_status=='RW'">Web Registered</span>
<span x-cloak="" x-show="item.reg_status=='RE'">Registered</span>
<span x-cloak="" x-show="item.reg_status=='WD'">Withdrawn</span>
</li>

<template x-if="item.cpos">
<li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-cloak="" x-show="item.cpos=='Y'">Yes</span><span x-cloak="" x-show="item.cpos=='N'">No</span>
</li>
</template>

<li>
<span class="font-semibold">Attendance Verified:</span>&nbsp;<span x-cloak="" x-show="item.attendance=='Y'">Yes</span><span x-cloak="" x-show="item.attendance=='N'">No</span>
</li>
<li>
<span class="font-semibold">Course Length:</span>&nbsp;<span x-text="stripletters(item.part_of_term)"></span>&nbsp;<span>weeks</span>
</li>
<li>
<span class="font-semibold">Credit Hours:</span>&nbsp;<span x-text="item.credit_hours"></span>
</li>
<li x-cloak="" x-show="item.grade">
<span class="font-semibold">Grade:</span>&nbsp;<span x-cloak="" x-show="item.grade!=='WN'" x-text="item.grade"></span><span x-cloak="" x-show="item.grade=='WN'">Withdrawn for Nonattendance</span>
</li>
</ul>
</div>

<div>
<div>

<div class="flex">
<ul class="mr-6 hidden xl:block">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date"></span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date"></span>
</li>
</ul>
<ul>
<li>
<span class="inline-block text-center w-6 font-semibold">D</span>
<span data-tooltip="Deadline to Receive 100% Refund" x-text="item.dw_end_date"></span>
<span class="sr-only">Drop Date</span>
</li>
<li>
<span class="inline-block text-center w-6 font-semibold">W</span>
<span data-tooltip="Deadline to Withdraw" x-text="item.wd_end_date"></span>
<span class="sr-only">Withdrawal Date</span>
</li>
</ul>
</div>
<template x-if="item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor"></span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline"></a>
</li>
</ul>
</template>
<template x-if="!item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span data-tooltip="Instructor">TBD</span>
</li>
</ul>
</template>

<ul class="mt-2">
<template x-for="bldg in item.bldg_room_days_time">
<li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
</template>
<template x-if="item.directions">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-map-marker-alt" aria-hidden="true"></i>
</span>
<span class="sr-only">Google maps directions</span>
<a class="font-semibold hover:underline" :href="item.directions" rel="noopener" target="_blank">
Get Directions
</a>
</li>
</template>
<template x-if="item.map">
<li>
<span class="inline-block text-center w-6">
<i class="fas fa-walking" aria-hidden="true"></i>
</span>
<span class="sr-only">Campus map pdf</span>
<a class="font-semibold hover:underline" :href="item.map" rel="noopener" target="_blank">
Campus Map
</a>
</li>
</template>
</ul>


</div>
</div>

</div>
</div>
</template><div class="p-6 bg-white border border-r-2 border-b-2 border-gray-300 dark:border-slate-900 dark:bg-slate-800 rounded-lg mb-4 last:mb-0 mx-auto">
<div class="grid xl:grid-cols-2 gap-x-4">
<div>
<div class="flex">
<template x-if="item.meet_begin_time">
<div class="flex">
<ul class="mr-2 whitespace-nowrap">
<li x-text="item.meet_begin_time" class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7"></li>
<li x-text="item.meet_end_time" class="text-sm text-right"></li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<template x-if="item.insm == 'ONLIN' ">
<ul class="mr-2">
<li class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7">Online</li>
</ul>
</template>
<template x-if="!item.meet_begin_time &amp;&amp; item.meet_days_long.length>0">
<div class="flex">
<ul class="mr-3">
<li class="text-sm leading-4 pt-1 text-gray-600">TBD by Instructor</li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<ul class="ml-auto mr-8 xl:hidden whitespace-nowrap">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date">08-19-2024</span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date">12-15-2024</span>
</li>
</ul>
</div>
<ul>
<li class="text-lg sm:text-xl md:text-base lg:text-xl font-bold">
<template x-if="item.bb_id">
<a :href="item.bb_link" target="_blank" data-tooltip="View on Blackboard" x-text="item.course_title"></a>
</template>
<template x-if="!item.bb_id">
<span x-text="item.course_title"></span>
</template><span x-text="item.course_title">American Federal Government</span>

</li>
<li>
<span data-tooltip="Subject" x-text="item.subj">POLS</span>&nbsp;<span data-tooltip="Course" x-text="item.crse">1113</span> - <span data-tooltip="Section" x-text="item.sec">930</span> - <span data-tooltip="CRN" x-text="item.crn">10056</span>&nbsp;|&nbsp;<span x-text="item.insm" data-tooltip="Instructional Method">Online</span>
</li>
</ul>
<ul class="mt-2">
<li><span class="font-semibold">Registration Status:</span>&nbsp;
<span x-show="item.reg_status=='RW'">Web Registered</span>
<span x-show="item.reg_status=='RE'" style="display: none;">Registered</span>
<span x-show="item.reg_status=='WD'" style="display: none;">Withdrawn</span>
</li>

<template x-if="item.cpos">
<li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-cloak="" x-show="item.cpos=='Y'">Yes</span><span x-cloak="" x-show="item.cpos=='N'">No</span>
</li>
</template><li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-show="item.cpos=='Y'">Yes</span><span x-show="item.cpos=='N'" style="display: none;">No</span>
</li>

<li>
<span class="font-semibold">Attendance Verified:</span>&nbsp;<span x-show="item.attendance=='Y'">Yes</span><span x-show="item.attendance=='N'" style="display: none;">No</span>
</li>
<li>
<span class="font-semibold">Course Length:</span>&nbsp;<span x-text="stripletters(item.part_of_term)">16</span>&nbsp;<span>weeks</span>
</li>
<li>
<span class="font-semibold">Credit Hours:</span>&nbsp;<span x-text="item.credit_hours">3</span>
</li>
<li x-show="item.grade" style="display: none;">
<span class="font-semibold">Grade:</span>&nbsp;<span x-show="item.grade!=='WN'" x-text="item.grade"></span><span x-show="item.grade=='WN'" style="display: none;">Withdrawn for Nonattendance</span>
</li>
</ul>
</div>

<div>
<div>

<div class="flex">
<ul class="mr-6 hidden xl:block">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date">08-19-2024</span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date">12-15-2024</span>
</li>
</ul>
<ul>
<li>
<span class="inline-block text-center w-6 font-semibold">D</span>
<span data-tooltip="Deadline to Receive 100% Refund" x-text="item.dw_end_date">08-30-2024</span>
<span class="sr-only">Drop Date</span>
</li>
<li>
<span class="inline-block text-center w-6 font-semibold">W</span>
<span data-tooltip="Deadline to Withdraw" x-text="item.wd_end_date">11-08-2024</span>
<span class="sr-only">Withdrawal Date</span>
</li>
</ul>
</div>
<template x-if="item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor"></span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline"></a>
</li>
</ul>
</template><ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor">Kristin Matthews</span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline" href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
<template x-if="!item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span data-tooltip="Instructor">TBD</span>
</li>
</ul>
</template>

<ul class="mt-2">
<template x-for="bldg in item.bldg_room_days_time">
<li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
</template><li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template><span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code">ONLINE</span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
<template x-if="item.directions">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-map-marker-alt" aria-hidden="true"></i>
</span>
<span class="sr-only">Google maps directions</span>
<a class="font-semibold hover:underline" :href="item.directions" rel="noopener" target="_blank">
Get Directions
</a>
</li>
</template>
<template x-if="item.map">
<li>
<span class="inline-block text-center w-6">
<i class="fas fa-walking" aria-hidden="true"></i>
</span>
<span class="sr-only">Campus map pdf</span>
<a class="font-semibold hover:underline" :href="item.map" rel="noopener" target="_blank">
Campus Map
</a>
</li>
</template>
</ul>


</div>
</div>

</div>
</div><div class="p-6 bg-white border border-r-2 border-b-2 border-gray-300 dark:border-slate-900 dark:bg-slate-800 rounded-lg mb-4 last:mb-0 mx-auto">
<div class="grid xl:grid-cols-2 gap-x-4">
<div>
<div class="flex">
<template x-if="item.meet_begin_time">
<div class="flex">
<ul class="mr-2 whitespace-nowrap">
<li x-text="item.meet_begin_time" class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7"></li>
<li x-text="item.meet_end_time" class="text-sm text-right"></li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<template x-if="item.insm == 'ONLIN' ">
<ul class="mr-2">
<li class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7">Online</li>
</ul>
</template>
<template x-if="!item.meet_begin_time &amp;&amp; item.meet_days_long.length>0">
<div class="flex">
<ul class="mr-3">
<li class="text-sm leading-4 pt-1 text-gray-600">TBD by Instructor</li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<ul class="ml-auto mr-8 xl:hidden whitespace-nowrap">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date">08-19-2024</span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date">12-15-2024</span>
</li>
</ul>
</div>
<ul>
<li class="text-lg sm:text-xl md:text-base lg:text-xl font-bold">
<template x-if="item.bb_id">
<a :href="item.bb_link" target="_blank" data-tooltip="View on Blackboard" x-text="item.course_title"></a>
</template>
<template x-if="!item.bb_id">
<span x-text="item.course_title"></span>
</template><span x-text="item.course_title">Introduction to Psychology</span>

</li>
<li>
<span data-tooltip="Subject" x-text="item.subj">PSYC</span>&nbsp;<span data-tooltip="Course" x-text="item.crse">1113</span> - <span data-tooltip="Section" x-text="item.sec">914</span> - <span data-tooltip="CRN" x-text="item.crn">14071</span>&nbsp;|&nbsp;<span x-text="item.insm" data-tooltip="Instructional Method">Online</span>
</li>
</ul>
<ul class="mt-2">
<li><span class="font-semibold">Registration Status:</span>&nbsp;
<span x-show="item.reg_status=='RW'">Web Registered</span>
<span x-show="item.reg_status=='RE'" style="display: none;">Registered</span>
<span x-show="item.reg_status=='WD'" style="display: none;">Withdrawn</span>
</li>

<template x-if="item.cpos">
<li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-cloak="" x-show="item.cpos=='Y'">Yes</span><span x-cloak="" x-show="item.cpos=='N'">No</span>
</li>
</template><li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-show="item.cpos=='Y'">Yes</span><span x-show="item.cpos=='N'" style="display: none;">No</span>
</li>

<li>
<span class="font-semibold">Attendance Verified:</span>&nbsp;<span x-show="item.attendance=='Y'">Yes</span><span x-show="item.attendance=='N'" style="display: none;">No</span>
</li>
<li>
<span class="font-semibold">Course Length:</span>&nbsp;<span x-text="stripletters(item.part_of_term)">16</span>&nbsp;<span>weeks</span>
</li>
<li>
<span class="font-semibold">Credit Hours:</span>&nbsp;<span x-text="item.credit_hours">3</span>
</li>
<li x-show="item.grade" style="display: none;">
<span class="font-semibold">Grade:</span>&nbsp;<span x-show="item.grade!=='WN'" x-text="item.grade"></span><span x-show="item.grade=='WN'" style="display: none;">Withdrawn for Nonattendance</span>
</li>
</ul>
</div>

<div>
<div>

<div class="flex">
<ul class="mr-6 hidden xl:block">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date">08-19-2024</span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date">12-15-2024</span>
</li>
</ul>
<ul>
<li>
<span class="inline-block text-center w-6 font-semibold">D</span>
<span data-tooltip="Deadline to Receive 100% Refund" x-text="item.dw_end_date">08-30-2024</span>
<span class="sr-only">Drop Date</span>
</li>
<li>
<span class="inline-block text-center w-6 font-semibold">W</span>
<span data-tooltip="Deadline to Withdraw" x-text="item.wd_end_date">11-08-2024</span>
<span class="sr-only">Withdrawal Date</span>
</li>
</ul>
</div>
<template x-if="item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor"></span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline"></a>
</li>
</ul>
</template><ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor">Chaliena Curry</span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline" href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
<template x-if="!item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span data-tooltip="Instructor">TBD</span>
</li>
</ul>
</template>

<ul class="mt-2">
<template x-for="bldg in item.bldg_room_days_time">
<li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
</template><li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template><span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code">ONLINE</span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
<template x-if="item.directions">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-map-marker-alt" aria-hidden="true"></i>
</span>
<span class="sr-only">Google maps directions</span>
<a class="font-semibold hover:underline" :href="item.directions" rel="noopener" target="_blank">
Get Directions
</a>
</li>
</template>
<template x-if="item.map">
<li>
<span class="inline-block text-center w-6">
<i class="fas fa-walking" aria-hidden="true"></i>
</span>
<span class="sr-only">Campus map pdf</span>
<a class="font-semibold hover:underline" :href="item.map" rel="noopener" target="_blank">
Campus Map
</a>
</li>
</template>
</ul>


</div>
</div>

</div>
</div><div class="p-6 bg-white border border-r-2 border-b-2 border-gray-300 dark:border-slate-900 dark:bg-slate-800 rounded-lg mb-4 last:mb-0 mx-auto">
<div class="grid xl:grid-cols-2 gap-x-4">
<div>
<div class="flex">
<template x-if="item.meet_begin_time">
<div class="flex">
<ul class="mr-2 whitespace-nowrap">
<li x-text="item.meet_begin_time" class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7"></li>
<li x-text="item.meet_end_time" class="text-sm text-right"></li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<template x-if="item.insm == 'ONLIN' ">
<ul class="mr-2">
<li class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7">Online</li>
</ul>
</template>
<template x-if="!item.meet_begin_time &amp;&amp; item.meet_days_long.length>0">
<div class="flex">
<ul class="mr-3">
<li class="text-sm leading-4 pt-1 text-gray-600">TBD by Instructor</li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<ul class="ml-auto mr-8 xl:hidden whitespace-nowrap">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date">08-19-2024</span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date">12-15-2024</span>
</li>
</ul>
</div>
<ul>
<li class="text-lg sm:text-xl md:text-base lg:text-xl font-bold">
<template x-if="item.bb_id">
<a :href="item.bb_link" target="_blank" data-tooltip="View on Blackboard" x-text="item.course_title"></a>
</template>
<template x-if="!item.bb_id">
<span x-text="item.course_title"></span>
</template><span x-text="item.course_title">Quantitative Reasoning</span>

</li>
<li>
<span data-tooltip="Subject" x-text="item.subj">MATH</span>&nbsp;<span data-tooltip="Course" x-text="item.crse">1473</span> - <span data-tooltip="Section" x-text="item.sec">957</span> - <span data-tooltip="CRN" x-text="item.crn">12927</span>&nbsp;|&nbsp;<span x-text="item.insm" data-tooltip="Instructional Method">Online</span>
</li>
</ul>
<ul class="mt-2">
<li><span class="font-semibold">Registration Status:</span>&nbsp;
<span x-show="item.reg_status=='RW'">Web Registered</span>
<span x-show="item.reg_status=='RE'" style="display: none;">Registered</span>
<span x-show="item.reg_status=='WD'" style="display: none;">Withdrawn</span>
</li>

<template x-if="item.cpos">
<li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-cloak="" x-show="item.cpos=='Y'">Yes</span><span x-cloak="" x-show="item.cpos=='N'">No</span>
</li>
</template><li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-show="item.cpos=='Y'">Yes</span><span x-show="item.cpos=='N'" style="display: none;">No</span>
</li>

<li>
<span class="font-semibold">Attendance Verified:</span>&nbsp;<span x-show="item.attendance=='Y'">Yes</span><span x-show="item.attendance=='N'" style="display: none;">No</span>
</li>
<li>
<span class="font-semibold">Course Length:</span>&nbsp;<span x-text="stripletters(item.part_of_term)">16</span>&nbsp;<span>weeks</span>
</li>
<li>
<span class="font-semibold">Credit Hours:</span>&nbsp;<span x-text="item.credit_hours">3</span>
</li>
<li x-show="item.grade" style="display: none;">
<span class="font-semibold">Grade:</span>&nbsp;<span x-show="item.grade!=='WN'" x-text="item.grade"></span><span x-show="item.grade=='WN'" style="display: none;">Withdrawn for Nonattendance</span>
</li>
</ul>
</div>

<div>
<div>

<div class="flex">
<ul class="mr-6 hidden xl:block">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date">08-19-2024</span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date">12-15-2024</span>
</li>
</ul>
<ul>
<li>
<span class="inline-block text-center w-6 font-semibold">D</span>
<span data-tooltip="Deadline to Receive 100% Refund" x-text="item.dw_end_date">08-30-2024</span>
<span class="sr-only">Drop Date</span>
</li>
<li>
<span class="inline-block text-center w-6 font-semibold">W</span>
<span data-tooltip="Deadline to Withdraw" x-text="item.wd_end_date">11-08-2024</span>
<span class="sr-only">Withdrawal Date</span>
</li>
</ul>
</div>
<template x-if="item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor"></span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline"></a>
</li>
</ul>
</template><ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor">Brenda Lyon</span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline" href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
<template x-if="!item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span data-tooltip="Instructor">TBD</span>
</li>
</ul>
</template>

<ul class="mt-2">
<template x-for="bldg in item.bldg_room_days_time">
<li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
</template><li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template><span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code">ONLINE</span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
<template x-if="item.directions">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-map-marker-alt" aria-hidden="true"></i>
</span>
<span class="sr-only">Google maps directions</span>
<a class="font-semibold hover:underline" :href="item.directions" rel="noopener" target="_blank">
Get Directions
</a>
</li>
</template>
<template x-if="item.map">
<li>
<span class="inline-block text-center w-6">
<i class="fas fa-walking" aria-hidden="true"></i>
</span>
<span class="sr-only">Campus map pdf</span>
<a class="font-semibold hover:underline" :href="item.map" rel="noopener" target="_blank">
Campus Map
</a>
</li>
</template>
</ul>


</div>
</div>

</div>
</div><div class="p-6 bg-white border border-r-2 border-b-2 border-gray-300 dark:border-slate-900 dark:bg-slate-800 rounded-lg mb-4 last:mb-0 mx-auto">
<div class="grid xl:grid-cols-2 gap-x-4">
<div>
<div class="flex">
<template x-if="item.meet_begin_time">
<div class="flex">
<ul class="mr-2 whitespace-nowrap">
<li x-text="item.meet_begin_time" class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7"></li>
<li x-text="item.meet_end_time" class="text-sm text-right"></li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<template x-if="item.insm == 'ONLIN' ">
<ul class="mr-2">
<li class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7">Online</li>
</ul>
</template>
<template x-if="!item.meet_begin_time &amp;&amp; item.meet_days_long.length>0">
<div class="flex">
<ul class="mr-3">
<li class="text-sm leading-4 pt-1 text-gray-600">TBD by Instructor</li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<ul class="ml-auto mr-8 xl:hidden whitespace-nowrap">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date">08-19-2024</span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date">12-15-2024</span>
</li>
</ul>
</div>
<ul>
<li class="text-lg sm:text-xl md:text-base lg:text-xl font-bold">
<template x-if="item.bb_id">
<a :href="item.bb_link" target="_blank" data-tooltip="View on Blackboard" x-text="item.course_title"></a>
</template>
<template x-if="!item.bb_id">
<span x-text="item.course_title"></span>
</template><span x-text="item.course_title">Nutrition</span>

</li>
<li>
<span data-tooltip="Subject" x-text="item.subj">BIOL</span>&nbsp;<span data-tooltip="Course" x-text="item.crse">1383</span> - <span data-tooltip="Section" x-text="item.sec">926</span> - <span data-tooltip="CRN" x-text="item.crn">10146</span>&nbsp;|&nbsp;<span x-text="item.insm" data-tooltip="Instructional Method">Online</span>
</li>
</ul>
<ul class="mt-2">
<li><span class="font-semibold">Registration Status:</span>&nbsp;
<span x-show="item.reg_status=='RW'">Web Registered</span>
<span x-show="item.reg_status=='RE'" style="display: none;">Registered</span>
<span x-show="item.reg_status=='WD'" style="display: none;">Withdrawn</span>
</li>

<template x-if="item.cpos">
<li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-cloak="" x-show="item.cpos=='Y'">Yes</span><span x-cloak="" x-show="item.cpos=='N'">No</span>
</li>
</template><li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-show="item.cpos=='Y'">Yes</span><span x-show="item.cpos=='N'" style="display: none;">No</span>
</li>

<li>
<span class="font-semibold">Attendance Verified:</span>&nbsp;<span x-show="item.attendance=='Y'">Yes</span><span x-show="item.attendance=='N'" style="display: none;">No</span>
</li>
<li>
<span class="font-semibold">Course Length:</span>&nbsp;<span x-text="stripletters(item.part_of_term)">16</span>&nbsp;<span>weeks</span>
</li>
<li>
<span class="font-semibold">Credit Hours:</span>&nbsp;<span x-text="item.credit_hours">3</span>
</li>
<li x-show="item.grade" style="display: none;">
<span class="font-semibold">Grade:</span>&nbsp;<span x-show="item.grade!=='WN'" x-text="item.grade"></span><span x-show="item.grade=='WN'" style="display: none;">Withdrawn for Nonattendance</span>
</li>
</ul>
</div>

<div>
<div>

<div class="flex">
<ul class="mr-6 hidden xl:block">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date">08-19-2024</span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date">12-15-2024</span>
</li>
</ul>
<ul>
<li>
<span class="inline-block text-center w-6 font-semibold">D</span>
<span data-tooltip="Deadline to Receive 100% Refund" x-text="item.dw_end_date">08-30-2024</span>
<span class="sr-only">Drop Date</span>
</li>
<li>
<span class="inline-block text-center w-6 font-semibold">W</span>
<span data-tooltip="Deadline to Withdraw" x-text="item.wd_end_date">11-08-2024</span>
<span class="sr-only">Withdrawal Date</span>
</li>
</ul>
</div>
<template x-if="item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor"></span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline"></a>
</li>
</ul>
</template><ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor">Russanne Wilcox</span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline" href="mailto:[email protected]">[email protected]</a>
</li>
</ul>
<template x-if="!item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span data-tooltip="Instructor">TBD</span>
</li>
</ul>
</template>

<ul class="mt-2">
<template x-for="bldg in item.bldg_room_days_time">
<li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
</template><li>
<template x-if="bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
</template><span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code">ONLINE</span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</span>
<template x-if="!bldg.building_code">
<span>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location">TBD</span>
</span>
</template>
</li>
<template x-if="item.directions">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-map-marker-alt" aria-hidden="true"></i>
</span>
<span class="sr-only">Google maps directions</span>
<a class="font-semibold hover:underline" :href="item.directions" rel="noopener" target="_blank">
Get Directions
</a>
</li>
</template>
<template x-if="item.map">
<li>
<span class="inline-block text-center w-6">
<i class="fas fa-walking" aria-hidden="true"></i>
</span>
<span class="sr-only">Campus map pdf</span>
<a class="font-semibold hover:underline" :href="item.map" rel="noopener" target="_blank">
Campus Map
</a>
</li>
</template>
</ul>


</div>
</div>

</div>
</div>
</div>

<template x-if="!loading &amp;&amp; !isWaitlistedEmpty()">
<div>
<template x-for="(item, ct) in waitlisted" :key="ct">

<div class="mt-4 border border-2 border-red-500 dark:border-orange-800 dark:bg-slate-800 rounded-lg mx-auto">
<p class="bg-red-500 dark:bg-orange-700 py-2 text-center text-white font-semibold">You are on the waitlist for this course</p>
<div class="p-6 grid xl:grid-cols-2 gap-x-4">
<div>
<div class="flex">
<template x-if="item.meet_begin_time">
<div class="flex">
<ul class="mr-2 whitespace-nowrap">
<li x-text="item.meet_begin_time" class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7"></li>
<li x-text="item.meet_end_time" class="text-sm text-right"></li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<template x-if="item.insm == 'ONLIN' ">
<ul class="mr-2">
<li class="text-2xl md:text-xl lg:text-3xl font-bold leading-6 md:leading-5 lg:leading-7">Online</li>
</ul>
</template>
<template x-if="!item.meet_begin_time &amp;&amp; item.meet_days_long.length>0">
<div class="flex">
<ul class="mr-3">
<li class="text-sm leading-4 pt-1 text-gray-600">TBD by Instructor</li>
</ul>
<ul class="font-bold -space-y-1 pt-1">
<template x-for="day in item.meet_days_long">
<li x-text="day.substring(0, 3)"></li>
</template>
</ul>
</div>
</template>
<ul class="ml-auto mr-8 xl:hidden whitespace-nowrap">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date"></span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date"></span>
</li>
</ul>
</div>
<ul>
<li class="text-lg sm:text-xl md:text-base lg:text-xl font-bold">
<template x-if="item.bb_id">
<a :href="item.bb_link" target="_blank" data-tooltip="View on Blackboard">
<span x-text="item.course_title"></span><i class="ml-1 fas fa-external-link"></i>
</a>
</template>
<template x-if="!item.bb_id">
<span x-text="item.course_title"></span>
</template>

</li>
<li>
<span data-tooltip="Subject" x-text="item.subj"></span>&nbsp;<span data-tooltip="Course" x-text="item.crse"></span> - <span data-tooltip="Section" x-text="item.sec"></span> - <span data-tooltip="CRN" x-text="item.crn"></span>&nbsp;|&nbsp;<span x-text="item.insm" data-tooltip="Instructional Method"></span>
</li>
</ul>
<ul class="mt-2">
<li><span class="font-semibold">Registration Status:</span>&nbsp;
<span x-cloak="" x-show="item.reg_status=='RW'">Web Registered</span>
<span x-cloak="" x-show="item.reg_status=='RE'">Registered</span>
<span x-cloak="" x-show="item.reg_status=='WD'">Withdrawn</span>
</li>

<template x-if="item.cpos">
<li>
<span class="font-semibold">Counts in Course Program of Study:</span>&nbsp;<span x-cloak="" x-show="item.cpos=='Y'">Yes</span><span x-cloak="" x-show="item.cpos=='N'">No</span>
</li>
</template>

<li>
<span class="font-semibold">Attendance Verified:</span>&nbsp;<span x-cloak="" x-show="item.attendance=='Y'">Yes</span><span x-cloak="" x-show="item.attendance=='N'">No</span>
</li>
<li>
<span class="font-semibold">Course Length:</span>&nbsp;<span x-text="stripletters(item.part_of_term)"></span>&nbsp;<span>weeks</span>
</li>
<li>
<span class="font-semibold">Credit Hours:</span>&nbsp;<span x-text="item.credit_hours"></span>
</li>
<li x-cloak="" x-show="item.grade">
<span class="font-semibold">Grade:</span>&nbsp;<span x-cloak="" x-show="item.grade!=='WN'" x-text="item.grade"></span><span x-cloak="" x-show="item.grade=='WN'">Withdrawn for Nonattendance</span>
</li>
</ul>
</div>

<div>
<div>

<div class="flex">
<ul class="mr-6 hidden xl:block">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar" aria-hidden="true"></i>
</span>
<span class="sr-only">Session Start Date</span><span data-tooltip="Session Start Date" x-text="item.meet_start_date"></span>
</li>
<li>
<span class="inline-block text-center w-6">
<i class="far fa-calendar-check" aria-hidden="true"></i>
</span>
<span class="sr-only">Session End Date</span><span data-tooltip="Session End Date" x-text="item.meet_end_date"></span>
</li>
</ul>
<ul>
<li>
<span class="inline-block text-center w-6 font-semibold">D</span>
<span data-tooltip="Deadline to Receive 100% Refund" x-text="item.dw_end_date"></span>
<span class="sr-only">Drop Date</span>
</li>
<li>
<span class="inline-block text-center w-6 font-semibold">W</span>
<span data-tooltip="Deadline to Withdraw" x-text="item.wd_end_date"></span>
<span class="sr-only">Withdrawal Date</span>
</li>
</ul>
</div>
<template x-if="item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span x-text="item.instructor.name" data-tooltip="Instructor"></span>
</li>

<li>
<button x-data="copyEmail" @click="$clipboard(item.instructor.email); changeIcon();" aria-label="copy to clipboard" data-tooltip="Copy to Clipboard" class="w-6 inline-block px-1">
<i class="far fa-clipboard" :class="copied ? 'fa-clipboard-check' : 'fa-clipboard' "></i>
</button>
<a :href="'mailto:'+item.instructor.email" data-tooltip="Send Email" x-text="item.instructor.email" class="text-blue-600 font-semibold hover:underline"></a>
</li>
</ul>
</template>
<template x-if="!item.instructor.name">
<ul class="mt-2">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-chalkboard-teacher" aria-hidden="true"></i>
</span>
<span data-tooltip="Instructor">TBD</span>
</li>
</ul>
</template>

<ul class="mt-2">
<template x-for="bldg in item.bldg_room_days_time">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-building" aria-hidden="true"></i>
</span>
<span class="sr-only">Location</span><span data-tooltip="Location" x-text="bldg.building_code"></span>&nbsp;&nbsp;<span data-tooltip="Room Number" x-text="bldg.room_code"></span>
</li>
</template>
<template x-if="item.directions">
<li>
<span class="inline-block text-center w-6">
<i class="far fa-map-marker-alt" aria-hidden="true"></i>
</span>
<span class="sr-only">Google maps directions</span>
<a class="font-semibold hover:underline" :href="item.directions" rel="noopener" target="_blank">
Get Directions
</a>
</li>
</template>
<template x-if="item.map">
<li>
<span class="inline-block text-center w-6">
<i class="fas fa-walking" aria-hidden="true"></i>
</span>
<span class="sr-only">Campus map pdf</span>
<a class="font-semibold hover:underline" :href="item.map" rel="noopener" target="_blank">
Campus Map
</a>
</li>
</template>
</ul>


</div>
</div>

</div>
</div>

</template>
</div>
</template>
</div>
</div>
</div>