@page "/todo"
@rendermode InteractiveServer

<PageTitle>Todo</PageTitle>

<h1>Todo (@todos.Count(todo => !todo.IsDone))</h1>

<div style="display: flex; width: 100%;">
    <input placeholder="Something TODO" @bind="newTodo" style="flex: 1; box-sizing: content-box;"/>
    <button @onclick="AddTodo" style="margin-left: 10px; border-radius: 4px">ADD</button>
</div>

<hr>
<h2>Todo List</h2>
@if (todos.Count <= 0)
{
    <p>비어있습니다.</p>
}
<ul style="padding-left: 0;">
    @foreach (var todo in todos.Select((item, index) => new { item, index }))
    {
        <li style="list-style: none; margin-top: 5px; margin-bottom: 5px; position: relative;">
            <div class= "list-item" @onclick="() => ToggleTodo(todo.item, todo.index)" style="cursor: pointer;">
                <input type="checkbox" @bind="todo.item.IsDone" />
                <div class="text-content">
                    <div class="small-text">
                        @if (todo.item.IsDone)
                        {
                            <del>
                                <span>생성일: @todo.item.InputDate</span>
                            </del>
                        }
                        else
                        {
                            <span>생성일: @todo.item.InputDate</span>
                        }
                    </div>

                    <div class="normal-text">
                        @if (todo.item.IsDone)
                        {
                            <del>
                                @todo.item.Title
                            </del>
                        }
                        else
                        {
                            @todo.item.Title
                        }
                    </div>

                    <div class="small-text">
                        @if (todo.item.IsDone)
                        {
                            <span>마감일: @todo.item.SuccessDate</span>
                        }

                    </div>
                </div>
            </div> 
            <button class="small-button" @onclick = "() => RemoveList(todo.item, todo.index)" style="position: absolute; right: 4px; bottom: 4px;">
                🗑️
            </button>
        </li>
    }
</ul>

@if(doneTodos.Count > 0)
{
    <hr>
    <h2>Done List</h2>
}
<ul style="padding-left: 0;">
    @foreach (var todo in doneTodos.Select((item, index) => new { item, index }))
    {
        <li style="list-style: none; margin-top: 5px; margin-bottom: 5px; position: relative;">
            <div class="list-item" @onclick="() => ToggleTodo(todo.item, todo.index)" style="cursor: pointer;">
                <input type="checkbox" @bind="todo.item.IsDone" />
                <div class="text-content">
                    <div class="small-text">
                        @if (todo.item.IsDone)
                        {
                            <del>
                                <span>생성일: @todo.item.InputDate</span>
                            </del>
                        }
                        else
                        {
                            <span>생성일: @todo.item.InputDate</span>
                        }
                    </div>

                    <div class="normal-text">
                        @if (todo.item.IsDone)
                        {
                            <del>
                                @todo.item.Title
                            </del>
                        }
                        else
                        {
                            @todo.item.Title
                        }
                    </div>

                    <div class="small-text">
                        @if (todo.item.IsDone)
                        {
                            <span>마감일: @todo.item.SuccessDate</span>
                        }

                    </div>
                </div>
            </div>
            <button class="small-button" @onclick = "() => RemoveList(todo.item, todo.index)" style="position: absolute; right: 4px; bottom: 4px;">
                🗑️
            </button>
        </li>
    }
</ul>