Render the contact detail page as a form.

templates/contact_detail.html

@@ -1,54 +1,34 @@
 {% extends "site_base.html" %}
 
 {% load famfam_icon %}
+{% load i18n %}
+{% load bootstrap_tags %}
 
 {% block head_title %}
-My contacts
+{{ contact.name }}
 {% endblock %}
 
 {% block body %}
 <div class="page-header">
     <a href="{% url add-contact %}"><div style="float:right;">{% famfam_silk 'user_add' %} Add a new contact</div></a>
-    <h1>My contacts</h1>
+    <h1>{{ contact.name }}</h1>
 </div>
-<div class="container">
-
-    <div class="row">
-        <div class="span10">
-          {% if contact_list %}
-          <table class="zebra-striped" id="projectsTable">
-            <thead>
-                <tr><th>Contact</th><th>Phone number</th><th>Twitter</th><th>Birthday</th><th>Frequency</th></tr>
-            </thead>
-            <tbody>
-            {% for c in contact_list %}
-            <tr>
-                <td><a href="{% url contact contact_id=c.id %}">{% famfam_silk 'user' %} {{c.name}}</a></td>
-                <td>{{ c.phone }}</td>
-                <td>{{ c.twitter }}</td>
-                <td>{{ c.birthday }}</td>
-                <td>{{ c.get_frequency_display }}</td>
-            </tr>
-            {% endfor %}
-            </tbody>
-          </table>
-          <a href="{% url call %}" class="btn success large">Start connecting me!</a>
-          <a href="#" class="btn danger large">Stop the calls</a>
-          {% else %}
-            <p>You have no contacts yet.</p>
-            <p>Why don't you start adding some?</p>
-            <a href="{% url add-contact %}" class="btn success large">Add a contact</a>
-          {% endif %}
-        </div>
-
-    </div>
+<div class="well">
+<form action="" method="post">
+  {% csrf_token %}
+  <fieldset class="inlineLabels">
+      {{ form|as_bootstrap }}
+  </fieldset>
+  <div class="actions">
+      <input class="btn primary large" type="submit" value="{% trans "Save" %}" />
+  </div>
+</form>
 </div>
 {% endblock %}
 {% block extra_body %}
-<script src="{{ STATIC_URL }}js/jquery.tablesorter.min.js"></script>
-<script >
-  $(function() {
-    $("table#projectsTable").tablesorter({ sortList: [[0,0]] });
-  });
-</script>
+    <script type="text/javascript">
+        $(function(){
+            $("#id_name").focus();
+        });
+    </script>
 {% endblock %}