projax/web/templates/calendar_section.tmpl

{{define "calendar-section"}}
<div id="calendar-section" class="calendar-section">

  <section class="tagbar" id="calendar-filterbar">
    <form id="calendar-filter" class="search"
          hx-get="/views/calendar"
          hx-target="#calendar-section"
          hx-swap="outerHTML"
          hx-trigger="change from:select"
          hx-push-url="true">
      <input type="hidden" name="month" value="{{.P.MonthKey}}">
      <label>tag&nbsp;
        <select name="tag" multiple size="3">
          {{range $.Filter.Tags}}<option value="{{.}}" selected>{{.}}</option>{{end}}
        </select>
      </label>
      <label>mgmt&nbsp;
        <select name="mgmt" multiple size="3">
          {{$selM := .Filter.Management}}
          <option value="mai"      {{if contains $selM "mai"}}selected{{end}}>mai</option>
          <option value="self"     {{if contains $selM "self"}}selected{{end}}>self</option>
          <option value="external" {{if contains $selM "external"}}selected{{end}}>external</option>
        </select>
      </label>
      <label>has&nbsp;
        <select name="has" multiple size="2">
          {{$selH := .Filter.HasLinks}}
          <option value="caldav-list" {{if contains $selH "caldav-list"}}selected{{end}}>caldav</option>
          <option value="gitea-repo"  {{if contains $selH "gitea-repo"}}selected{{end}}>gitea</option>
        </select>
      </label>
      <label>kind&nbsp;
        <select name="kind" multiple size="3">
          {{$selK := .P.Kinds}}
          <option value="event" {{if contains $selK "event"}}selected{{end}}>event</option>
          <option value="todo"  {{if contains $selK "todo"}}selected{{end}}>todo</option>
          <option value="doc"   {{if contains $selK "doc"}}selected{{end}}>doc</option>
        </select>
      </label>
      {{if .Filter.ProjectPath}}<input type="hidden" name="project" value="{{.Filter.ProjectPath}}">{{end}}
      {{if and .Filter.ProjectPath (not .Filter.IncludeDescendants)}}<input type="hidden" name="project_descendants" value="0">{{end}}
      {{if .Filter.Active}}<a class="clear" href="/views/calendar?month={{.P.MonthKey}}">clear filters</a>{{end}}
    </form>

    {{template "view-project-chip" .}}

    <p class="counts muted">
      <small>{{.P.TotalRows}} {{if eq .P.TotalRows 1}}row{{else}}rows{{end}}</small>
      {{if .P.Cached}}<small title="Served from 60s in-memory cache · built {{.P.BuiltAt.Format "15:04:05"}}">· cached</small>{{else}}<small>· fresh</small>{{end}}
    </p>
  </section>

  <table class="calendar-grid" role="grid">
    <thead>
      <tr>
        <th scope="col">Mon</th>
        <th scope="col">Tue</th>
        <th scope="col">Wed</th>
        <th scope="col">Thu</th>
        <th scope="col">Fri</th>
        <th scope="col">Sat</th>
        <th scope="col">Sun</th>
      </tr>
    </thead>
    <tbody>
      {{range .P.Weeks}}
        <tr class="calendar-week">
          {{range .Days}}
            <td class="calendar-cell{{if .IsToday}} is-today{{end}}{{if .IsAdjacent}} adjacent-month{{end}}" data-date="{{.DateKey}}">
              <div class="cell-header">
                <span class="day-num">{{.DayNum}}</span>
                <span class="day-label">{{.LongLabel}}</span>
                {{if .IsToday}}<span class="today-pill">Heute</span>{{end}}
              </div>
              {{if .Rows}}
                <ul class="cell-rows">
                  {{range .Rows}}
                    <li class="cell-row row-{{.Kind}}{{if .Overdue}} overdue{{end}}">
                      {{if .Time}}<span class="time">{{.Time}}</span>{{end}}
                      <a class="row-link" href="/i/{{.ItemPath}}" title="{{.ItemPath}}">{{.Summary}}</a>
                    </li>
                  {{end}}
                </ul>
              {{end}}
              {{if gt .ExtraCount 0}}
                <a class="cell-more muted" href="/views/timeline?from={{.DateKey}}&amp;to={{.DateKey}}">+{{.ExtraCount}} more</a>
              {{end}}
            </td>
          {{end}}
        </tr>
      {{end}}
    </tbody>
  </table>

</div>
{{end}}