{% extends "layout.html" %}
{% block body %}
<div id="main" class="container">

    <table class="table table-bordered">
    <div class="control-group">
      <a href="{{ url_for('new') }}" class="btn btn-primary">New Todo</a>
    </div>
    <thead>
      <tr>
        <th>Id
        <th>Todo Item
        <th>Created
        <th>Done
        <th>Action
      </tr>
      <tbody>
      {%- for todo in todos %}
      <tr class={{ "success" if todo.done }}>
        <td><a href="/todos/{{ todo.id }}">{{ todo.id }}</a></td>
        <td style={{ "text-decoration:line-through" if todo.done }}>{{ todo.content }}</td>
        <td>{%- if todo.done %}
              <span class="label label-success">Completed</span>
            {%- else %}
              <span class="label label-warning">Pending</span>
            {%- endif %}
        </td>
        <td>{{ todo.created_at.strftime('%d-%m-%Y') }}</td>
        <td><a href="/todos/{{ todo.id }}" class="btn btn-danger">Edit</a>
            <a href="{{ url_for('delete', todo_id = todo.id) }}" class="btn btn-danger">Delete</a>
        </td>
      {%- endfor %}

    </tr>
    </tbody>
    </table>
    <p>

</div>
{% endblock %}