60 lines
2.4 KiB
HTML
60 lines
2.4 KiB
HTML
<section class="schedule">
|
|
<div class="container">
|
|
<div class="schedule-header">
|
|
<img [src]="config().logo_url" 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 {{ config().frequency }} 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.shows.length === 0) {
|
|
<div class="schedule-empty">No shows scheduled. Check back soon!</div>
|
|
} @else {
|
|
<div class="show-list">
|
|
@for (show of state.shows; track show.id) {
|
|
<article class="show-card">
|
|
<!-- Left: Show art badge -->
|
|
<div class="show-card-art">
|
|
@if (show.show_art_url) {
|
|
<img [src]="show.show_art_url" [alt]="show.title + ' art'" class="show-art-img" />
|
|
} @else {
|
|
<div class="show-art-placeholder">
|
|
<span aria-hidden="true">🎵</span>
|
|
</div>
|
|
}
|
|
</div>
|
|
|
|
<!-- Right: Hero-backed info area -->
|
|
<div class="show-card-right" [class.has-hero]="show.hero_image_url" [style.background-image]="show.hero_image_url ? 'url(' + show.hero_image_url + ')' : ''">
|
|
<div class="show-card-overlay"></div>
|
|
<div class="show-card-info">
|
|
<h3 class="show-title">{{ show.title }}</h3>
|
|
<p class="show-description">{{ show.description }}</p>
|
|
<div class="show-meta">
|
|
<span class="show-host">
|
|
<span aria-hidden="true">🎙</span> {{ show.host }}
|
|
</span>
|
|
<span class="show-genre">{{ show.genre }}</span>
|
|
</div>
|
|
<div class="show-schedule-slots">
|
|
@for (slot of show.schedules | sortSchedules; track slot.id) {
|
|
<span class="slot-tag">
|
|
{{ slot.day_label }} {{ slot.time }}
|
|
</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
</div>
|
|
</section>
|