component TodoItem {
    props {
        text: String
        done: Bool = false
    }

    state {
        completed: Bool = false
    }

    template {
        <li class={completed ? "item done" : "item"}>
            <input type="checkbox" on:change={() => completed = !completed} />
            <span>{text}</span>
        </li>
    }
}

component TodoApp {
    state {
        newItem: String = ""
        items: String = ""
    }

    fn addItem() -> Void {
        if newItem != "" {
            items = items + newItem + ";"
            newItem = ""
        }
    }

    template {
        <div class="todo-app">
            <h1>Todos</h1>
            <div class="input-row">
                <input
                    type="text"
                    value={newItem}
                    on:input={(e) => newItem = e.target.value}
                    placeholder="Add a todo..."
                />
                <button on:click={() => addItem()}>Add</button>
            </div>
        </div>
    }
}

component App {
    template {
        <div class="app">
            <TodoApp />
        </div>
    }
}