44 lines
1.7 KiB
HTML
44 lines
1.7 KiB
HTML
<section class="schedule">
|
|
<div class="container">
|
|
<div class="schedule-header">
|
|
<img src="svg/small-flower.svg" alt="" class="schedule-flower" aria-hidden="true">
|
|
<h2>Program <span class="text-accent">Schedule</span></h2>
|
|
<p class="section-intro">
|
|
All times are local (Mountain Time). Every show is free to listen to
|
|
live at 98.7 FM or via our online stream.
|
|
</p>
|
|
</div>
|
|
|
|
@if (schedule$ | async; as state) {
|
|
@if (state.loading) {
|
|
<div class="schedule-loading">Loading schedule…</div>
|
|
} @else if (state.dayGroups.length === 0) {
|
|
<div class="schedule-empty">No programs scheduled. Check back soon!</div>
|
|
} @else {
|
|
@for (group of state.dayGroups; track group.day_label) {
|
|
<div class="schedule-day-block">
|
|
<div class="schedule-day-label">{{ group.day_label }}</div>
|
|
<div class="schedule-table">
|
|
@for (program of group.programs; track program.id) {
|
|
<div class="schedule-row">
|
|
<div class="schedule-time">{{ program.time }}</div>
|
|
<div class="schedule-divider"></div>
|
|
<div class="schedule-details">
|
|
<h4 class="schedule-title">{{ program.title }}</h4>
|
|
<div class="schedule-meta">
|
|
<span class="schedule-host">
|
|
<span aria-hidden="true">🎙</span> {{ program.host }}
|
|
</span>
|
|
<span class="schedule-genre">{{ program.genre }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|
|
}
|
|
}
|
|
}
|
|
</div>
|
|
</section>
|