@inherits BaseTodoItems
<Container Fluid>
    <Row>
        <Column>
            <Card>
                <CardHeader Padding="Padding.Is1.FromBottom">
                    <CardTitle Size="4">Todo List</CardTitle>
                </CardHeader>
                <CardBody Padding="Padding.Is0.FromBottom">
                    <Fields>
                        <Column ColumnSize="ColumnSize.Is1">
                            <Check TValue="bool" Checked="@Todos.All(x=>x.Completed)" CheckedChanged="@OnCheckAll">All</Check>
                        </Column>
                        <Column ColumnSize="ColumnSize.Is11">
                            <Addons>
                                <Addon AddonType="AddonType.Body">
                                    <Validations @ref="validations" Mode="ValidationMode.Manual">
                                        <Validation Validator="@ValidationRule.IsNotEmpty">
                                            <TextEdit @bind-Text="@description" Placeholder="What needs to be done?"></TextEdit>
                                        </Validation>
                                    </Validations>
                                </Addon>
                                <Addon AddonType="AddonType.End">
                                    <Button Color="Color.Primary" Clicked="@OnAddTodo">
                                        <Icon Name="IconName.Add" />Add
                                    </Button>
                                </Addon>
                            </Addons>
                        </Column>
                    </Fields>
                </CardBody>
                <CardBody Padding="Padding.Is0.OnY">
                    <ListGroup Flush>
                        @foreach ( var todo in Todos )
                        {
                            <TodoItem Todo="@todo" StatusChanged="@OnTodoStatusChanged" />
                        }
                    </ListGroup>
                </CardBody>
                <CardFooter Padding="Padding.Is3.FromBottom">
                    <Field Horizontal>
                        <FieldBody ColumnSize="ColumnSize.Is10">
                            <Buttons Role="ButtonsRole.Addons">
                                <Button Color="Color.Info" Clicked="@(() => SetFilter( Filter.All ))" Active="@(filter == Filter.All)">All</Button>
                                <Button Color="Color.Info" Clicked="@(() => SetFilter( Filter.Active ))" Active="@(filter == Filter.Active)">Active</Button>
                                <Button Color="Color.Info" Clicked="@(() => SetFilter( Filter.Completed ))" Active="@(filter == Filter.Completed)">Completed</Button>
                            </Buttons>
                        </FieldBody>
                        <FieldBody ColumnSize="ColumnSize.Is2">
                            <Button Color="Color.Warning" Float="Float.End" Clicked="@OnClearCompleted" Display="@(todos.Any(x=>x.Completed) ? Display.Always : Display.None)">Clear Completed</Button>
                        </FieldBody>
                    </Field>
                </CardFooter>
            </Card>
        </Column>
    </Row>
</Container>