Chapter 11

app/templates/index.html

@@ -1,27 +1,27 @@
-{% extends 'base.html' %}
+{% extends "base.html" %}
+{% import 'bootstrap/wtf.html' as wtf %}
 
-{% block content %}
-  <h1>Hi, {{ current_user.username }}!</h1>
-  {% if form %}
-    <form action="" method="post">
-      {{ form.hidden_tag() }}
-      <p>
-        {{ form.post.label }}<br />
-        {{ form.post(cols = 32, rows = 4) }}<br />
-        {% for error in form.post.errors %}
-          <span style="color: red;">[{{ error }}]</span>
-        {% endfor %}
-      </p>
-      <p>{{ form.submit() }}</p>
-    </form>
-  {% endif %}
-  {% for post in posts %}
-      {% include '_post.html' %}
-  {% endfor %}
-  {% if prev_url %}
-    <a href="{{ prev_url }}">Newer posts</a>
-  {% endif %}
-  {% if next_url %}
-    <a href="{{ next_url }}">Older posts</a>
-  {% endif %}
-{% endblock %}s
+{% block app_content %}
+    <h1>Hi, {{ current_user.username }}!</h1>
+    {% if form %}
+    {{ wtf.quick_form(form) }}
+    <br>
+    {% endif %}
+    {% for post in posts %}
+        {% include '_post.html' %}
+    {% endfor %}
+    <nav aria-label="...">
+        <ul class="pager">
+            <li class="previous{% if not prev_url %} disabled{% endif %}">
+                <a href="{{ prev_url or '#' }}">
+                    <span aria-hidden="true">&larr;</span> Newer posts
+                </a>
+            </li>
+            <li class="next{% if not next_url %} disabled{% endif %}">
+                <a href="{{ next_url or '#' }}">
+                    Older posts <span aria-hidden="true">&rarr;</span>
+                </a>
+            </li>
+        </ul>
+    </nav>
+{% endblock %}