override render()

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}
        `;
    }