67 lines
2.6 KiB
Text
67 lines
2.6 KiB
Text
package templates
|
|
|
|
import (
|
|
"backend/internal/auth"
|
|
)
|
|
|
|
templ PlanningPage(user *auth.User, csrfToken string, agenda PlanningAgenda) {
|
|
@Layout("Planning - Xtablo", user, csrfToken) {
|
|
<div class="space-y-6">
|
|
<div class="flex flex-wrap items-start justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-[28px] font-semibold leading-tight">Planning</h1>
|
|
<p class="mt-1 text-sm text-slate-600">{ agenda.RangeLabel }</p>
|
|
</div>
|
|
<nav class="flex flex-wrap items-center gap-2" aria-label="Planning navigation">
|
|
<a href={ templ.SafeURL(agenda.PrevURL) } class="ui-button ui-button-soft-neutral-md">Previous 14 days</a>
|
|
<a
|
|
href={ templ.SafeURL(agenda.TodayURL) }
|
|
if agenda.ShowingToday {
|
|
class="ui-button ui-button-soft-neutral-md"
|
|
} else {
|
|
class="ui-button ui-button-solid-default-md"
|
|
}
|
|
>Today</a>
|
|
<a href={ templ.SafeURL(agenda.NextURL) } class="ui-button ui-button-soft-neutral-md">Next 14 days</a>
|
|
</nav>
|
|
</div>
|
|
if len(agenda.Events) == 0 {
|
|
<div class="border border-slate-200 bg-slate-50 px-4 py-12">
|
|
<h2 class="text-xl font-semibold leading-snug text-slate-800">No events in this range</h2>
|
|
<p class="mt-2 text-base text-slate-600">Use the navigation controls to browse another 14-day window.</p>
|
|
</div>
|
|
} else {
|
|
<ul class="divide-y divide-slate-200 border-y border-slate-200" aria-label="Planning agenda">
|
|
for _, event := range agenda.Events {
|
|
@PlanningEventListItem(event)
|
|
}
|
|
</ul>
|
|
}
|
|
</div>
|
|
}
|
|
}
|
|
|
|
templ PlanningEventListItem(event PlanningEventRow) {
|
|
<li class="bg-white px-4 py-3 hover:bg-slate-50">
|
|
<a href={ templ.SafeURL(event.URL) } class="block focus:outline-none focus:ring-2 focus:ring-blue-600 focus:ring-offset-2" aria-label={ "Open event in tablo: " + event.Title }>
|
|
<div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
|
|
<div class="flex min-w-0 flex-col gap-1 sm:flex-row sm:items-center sm:gap-3">
|
|
<span class="text-sm font-medium text-slate-700">{ event.TimeRange }</span>
|
|
<span class="text-base font-semibold text-slate-900">{ event.Title }</span>
|
|
</div>
|
|
<div class="flex flex-wrap items-center gap-2 text-sm text-slate-600">
|
|
<span class="inline-flex items-center gap-1">
|
|
if event.HasColor {
|
|
<span class="inline-block h-2.5 w-2.5 rounded-full" style={ "background-color: " + event.TabloColor }></span>
|
|
}
|
|
<span>{ event.TabloTitle }</span>
|
|
</span>
|
|
if event.HasLocation {
|
|
<span aria-hidden="true">·</span>
|
|
<span>{ event.Location }</span>
|
|
}
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</li>
|
|
}
|