<footer class="footer" *ngIf="todos.length > 0">
    <span class="todo-count"
        ><strong>{{ activeTodos.length }}</strong> {{ activeTodos.length == 1 ? "item" : "items" }} left</span
    >
    <ul class="filters">
        <li>
            <a routerLink="/" [class.selected]="filter === 'all'"> All </a>
        </li>
        <li>
            <a routerLink="/active" [class.selected]="filter === 'active'"> Active </a>
        </li>
        <li>
            <a routerLink="/completed" [class.selected]="filter === 'completed'"> Completed </a>
        </li>
    </ul>
    <button *ngIf="completedTodos.length" type="button" class="clear-completed" (click)="clearCompleted()">Clear Completed</button>
</footer>
