<html>


<head>

<title>ToDo</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<style type="text/css">
body { font-family: "monospace"; width: 540px; margin: 40px auto; }
h1 { font-size: 65px; text-align: right; }
a.del { color: #FF0000; border-bottom: 1px dotted #FF0000; text-decoration: none; }
a:hover.del { color: #FF0000; border-bottom: 1px solid #FF0000; }
span.c1 { font-size: 18px; }
span.c3 { font-size: 11px; }
a.tag { color: #000000; border-bottom: 1px dotted #000000; text-decoration: none; }
a:hover.tag { color: #000000; border-bottom: 1px solid #0000FF; }
</style>

</head>


<body>

<h1>ToDo List</h1>

<form action="/add" method="POST">
  <div class="form-group">
    <label for="new entry">Add new a item to your list:</label>
    <input type="text" class="form-control" name="content" id="content" placeholder="New ToDo Task">
    <label for="tags">Add tags, seperated by a whitespace:</label>
    <input type="text" class="form-control" name="tags" id="tags" placeholder="tag1 tag2 tag3 etc">
  </div>
  <button type="submit" class="btn btn-default">Add</button>
</form>
<hr>
<span class="c1">All tags:</span> {% for each in tags %}
[ <span class="c3"><a href="/tag/{{ each }}">{{ each }}</a></span> ]
{% endfor %}<hr>
{% for each in seq %}
<span class="c1">{{ each.content }}</span>
<span class="c3">
<br>Tags:
{% for x in each.tags %}
<a class="tag" href="/tag/{{ x }}">{{ x }}</a> /
{% endfor %}
<a class="del" href="/delete/{{ each.id }}">Delete item</a>
</span>
<hr>
{% endfor %}

</body>


</html>

