in resources/todomvc/architecture-examples/lit/src/lib/todo-footer.ts [90:121]
override render() {
if (this.todoList === undefined || this.todoList.all.length === 0)
return nothing;
const allFilter = filterLink({
text: "All",
filter: "all",
selectedFilter: this.todoList?.filter,
});
const activeFilter = filterLink({
text: "Active",
filter: "active",
selectedFilter: this.todoList?.filter,
});
const completedFilter = filterLink({
text: "Completed",
filter: "completed",
selectedFilter: this.todoList?.filter,
});
return html`
<span class="todo-count">
<strong>${this.todoList?.active.length}</strong>
items left
</span>
<ul class="filters">
<li>${allFilter}</li>
<li>${activeFilter}</li>
<li>${completedFilter}</li>
</ul>
${(this.todoList?.completed.length ?? 0) > 0 ? html`<button @click=${this.#onClearCompletedClick} class="clear-completed">Clear Completed</button>` : nothing}
`;
}