{% import "todo/models" %}

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

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

{% func (p *IndexPage ) 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 *IndexPage ) Scripts() %}
{% endfunc %}

{% func (p *IndexPage ) Body() %}
<div class="container">
    <a href="/" class="title"><h1>TODO in Golang</h1></a>
    <form action="/create" method="post">
        <div class="row">
            <div class="nine columns">
                <input type="text" class="u-full-width" name="todo" id="todo">
            </div>
            <div class="three columns">
                <input type="submit" class="button-primary u-full-width" value="add">
            </div>
        </div>
    </form>

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

</div>
{% endfunc %}