{% import "todo/models" %}

{% code
type EditPage struct {
    Todos []models.Todo
    EditingTodo models.Todo
}
%}

{% func (p *EditPage ) Title() %}
Todo
{% endfunc %}

{% func (p *EditPage ) Stylesheets() %}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" type="text/css" href="/static/custom.css">
{% endfunc %}

{% func (p *EditPage ) Scripts() %}
{% endfunc %}

{% func (p *EditPage ) Body() %}
<div class="container">
    <a href="/" class="title"><h1>TODO in Golang</h1></a>
    <form action="/update/{%d p.EditingTodo.Id %}" method="post">
        <div class="row">
            <div class="nine columns">
                <input type="text" class="u-full-width" name="todo" id="todo" value="{%s p.EditingTodo.Todo %}">
            </div>
            <div class="three columns">
                <input type="submit" class="button-primary u-full-width" value="Update">
            </div>
        </div>
    </form>

    {% for _, todo := range p.Todos %}
    <div class="row">
            <div class="one column">
                <form action="/undo/{%d todo.Id %}" method="post">
                    {%= GetDoneButton(todo.Done) %}
                </form>
            </div>
            <div class="seven columns">
                <p>{%s todo.Todo %}</p>
            </div>
            {% if todo.Id == p.EditingTodo.Id %}
            <div class="two columns">
                <input type="submit" disabled="disabled" class="u-full-width" value="Editing">
            </div>
            {% else %}
            <div class="two columns">
                <form action="/edit/{%d todo.Id %}">
                    <input type="submit" class="button-primary u-full-width" value="Edit">
                </form>
            </div>
            {% endif %}
            <div class="two columns">
                <form action="/undo/{%d todo.Id %}" method="post">
                    <input type="submit" class="button-red u-full-width" value="Delete">
                </form>
            </div>
    </div>
    {% endfor %}

</div>
{% endfunc %}