A bunch of fixes

40 files changed, 346 insertions, 55 deletions

diff --git a/TODO.rst b/TODO.rst
new file mode 100644
index 0000000..57d8db9
--- /dev/null
+++ b/TODO.rst
@@ -0,0 +1,3 @@
+- tie checkin to a service location
+- add user menu to checkin (list location's users)
+- lookup case status with order number
diff --git a/apps/docs/admin.py b/apps/docs/admin.py
index 4902ccc..8ab5731 100644
--- a/apps/docs/admin.py
+++ b/apps/docs/admin.py
@@ -1,5 +1,5 @@
 from django.contrib import admin
-from docs.models import Article, Image
+from apps.docs.models import Article, Image
 
 admin.site.register(Article)
 admin.site.register(Image)
diff --git a/apps/issues/models.py b/apps/issues/models.py
index f2e162d..2306199 100644
--- a/apps/issues/models.py
+++ b/apps/issues/models.py
@@ -7,6 +7,7 @@ from apps.checkin.models import ServiceOrder
 
 class Issue(models.Model):
     sp = models.ForeignKey(ServiceProvider)
+    keywords = models.TextField(default='')
     description = models.CharField(max_length=256, default=_('No power'))
 
     def __unicode__(self):
@@ -19,8 +20,15 @@ class Issue(models.Model):
 class Question(models.Model):
     issue = models.ForeignKey(Issue)
     question = models.CharField(max_length=256)
+    description = models.TextField(default='')
     required = models.BooleanField(default=True)
 
+    def next(self):
+        return Question.objects.get(issue=self.issue, pk__gt=self.pk)
+
+    def prev(self):
+        return Question.objects.get(issue=self.issue, pk__lt=self.pk)
+
     def __unicode__(self):
         return self.question
 
diff --git a/apps/issues/views.py b/apps/issues/views.py
index 374c74e..6bc6d75 100644
--- a/apps/issues/views.py
+++ b/apps/issues/views.py
@@ -1,20 +1,37 @@
 from django import forms
 from gsxws import products
-from django.shortcuts import render
+from django.shortcuts import render, redirect
 from django.views.generic.list import ListView
+from django.utils.translation import ugettext as _
 from django.views.generic.edit import FormView, CreateView, UpdateView
 from apps.core.views import DefaultEditView, DefaultListView
 from apps.issues.models import Issue, Question, Choice
 
 
+class WarrantyForm(forms.Form):
+    sn = forms.CharField(
+        required=False,
+        initial='DGKFL06JDHJP',
+        label=_('Serial number')
+    )
+
+
+class IssueForm(forms.Form):
+    description = forms.CharField(
+        required=False,
+        widget=forms.Textarea()
+    )
+    attachment = forms.FileField(required=False)
+
+
 class CustomerForm(forms.Form):
-    fname = forms.CharField()
-    lname = forms.CharField()
-    email = forms.EmailField()
-    phone = forms.CharField()
-    address = forms.CharField()
-    city = forms.CharField()
-    postal_code = forms.CharField()
+    fname = forms.CharField(label=_('First name'), initial='Filipp')
+    lname = forms.CharField(label=_('Last name'), initial='Lepalaan')
+    email = forms.EmailField(label=_('Email'), initial='filipp@fps.ee')
+    phone = forms.CharField(label=_('Phone number'), initial='451202717')
+    address = forms.CharField(label=_('Address'), initial='Kustaankatu 2 C 96')
+    city = forms.CharField(label=_('City'), initial='Helsinki')
+    postal_code = forms.CharField(label=_('Postal code'), initial='00500')
 
 
 class IssueListView(DefaultListView):
@@ -32,28 +49,64 @@ class IssueEditView(DefaultEditView):
 
 
 def welcome(request):
+    form = WarrantyForm()
     return render(request, "issues/welcome.html", locals())
 
 
+def details(request, device=None):
+    form = IssueForm()
+
+    if request.method == "POST":
+        request.session['details'] = request.POST.get('details')
+        return redirect(list_issues)
+
+    return render(request, "issues/details.html", locals())
+
+
 def list_issues(request, idx=None):
     questions = Question.objects.filter(issue__sp_id=1)
-    question = questions[0]
-    dump = {}
-    return render(request, "issues/index.html", locals())
+
+    if idx is None:
+        question = questions[0]
+        request.session['choices'] = []
+    else:
+        choice = Choice.objects.get(pk=idx)
+        current = questions.get(choice=idx)
+        current.choice = choice
+        request.session['choices'].append(current)
+        try:
+            question = current.next()
+        except Question.DoesNotExist:
+            return redirect(customer)
+
+    dump = request.session.get('choices')
+    return render(request, "issues/question.html", locals())
 
 
 def choose_device(request, device=None):
     models = products.models()
-    return render(request, "issues/device.html", locals())
+    tpl = "issues/%s.html" % (device or 'device')
+    return render(request, tpl, locals())
 
 
 def warranty(request):
     return render(request, "issues/warranty.html", locals())
 
 
+def thanks(request):
+    return render(request, "issues/thanks.html", locals())
+
+
 def customer(request):
     form = CustomerForm()
     if request.method == "POST":
         form = CustomerForm(request.POST)
+        if form.is_valid():
+            return redirect(thanks)
 
     return render(request, "issues/customer.html", locals())
+
+
+def restart(request):
+    request.session = None
+    return redirect(welcome)
diff --git a/motor/urls.py b/motor/urls.py
index 394a7fd..85ec915 100644
--- a/motor/urls.py
+++ b/motor/urls.py
@@ -10,9 +10,12 @@ urlpatterns = patterns(
     '',
     #url(r'^$', 'docs.views.index', name='docs-index'),
     url(r'^$', welcome, name='issues-welcome'),
-    url(r'^issues/(\d+)/$', list_issues, name='issues-index'),
-    url(r'^issues/device/$', choose_device, name='issues-choose_device'),
-    url(r'^issues/device/([A-Z]+)/$', choose_device, name='issues-choose_device'),
+    url(r'^issues/thanks/$', thanks, name='issues-thanks'),
+    url(r'^issues/notes/$', details, name='issues-details'),
+    url(r'^issues/notes/([a-z]+)/$', details, name='issues-details'),
+    url(r'^issues/(\d+)?/$', list_issues, name='issues-index'),
+    url(r'^issues/devices/$', choose_device, name='issues-choose_device'),
+    url(r'^issues/devices/([a-z]+)/$', choose_device, name='issues-choose_device'),
     url(r'^issues/warranty/$', warranty, name='issues-warranty'),
     url(r'^issues/customer/$', customer, name='issues-customer'),
     url(r'^manage/$', LoginView.as_view(), name='core-login'),
@@ -29,7 +32,8 @@ urlpatterns = patterns(
     url(r'^manage/issues/$', IssueListView.as_view(), name='issues-list_issues'),
     url(r'^manage/issues/add/$', IssueCreateView.as_view(), name='issues-add_issue'),
     url(r'^manage/issues/(?P<pk>\d+)/$', IssueEditView.as_view(), name='issues-edit_issue'),
-    url(r'^terms/$', TemplateView.as_view(template_name="terms.html"), {'title': 'ServoApp Terms of Service'}),
+    url(r'^terms/$', TemplateView.as_view(template_name="terms.html"),
+        {'title': 'ServoApp Terms of Service'}),
     (r'^admin/', include(admin.site.urls)),
    #url(r'^([\w\-]+)/$', 'docs.views.view_article', name='docs-view'),
 )
diff --git a/static/img/products/display.png b/static/img/products/display.png
new file mode 100644
index 0000000..4dd759b
--- /dev/null
+++ b/static/img/products/display.png
diff --git a/static/img/products/done.png b/static/img/products/done.png
new file mode 100755
index 0000000..a43ff28
--- /dev/null
+++ b/static/img/products/done.png
diff --git a/static/img/products/imac.jpg b/static/img/products/imac.jpg
new file mode 100644
index 0000000..f0824f6
--- /dev/null
+++ b/static/img/products/imac.jpg
diff --git a/static/img/products/imac.png b/static/img/products/imac.png
new file mode 100644
index 0000000..7824d37
--- /dev/null
+++ b/static/img/products/imac.png
diff --git a/static/img/products/ipad.png b/static/img/products/ipad.png
new file mode 100644
index 0000000..658c93f
--- /dev/null
+++ b/static/img/products/ipad.png
diff --git a/static/img/products/iphone.png b/static/img/products/iphone.png
new file mode 100644
index 0000000..6432059
--- /dev/null
+++ b/static/img/products/iphone.png
diff --git a/static/img/products/ipod.png b/static/img/products/ipod.png
new file mode 100644
index 0000000..4826c08
--- /dev/null
+++ b/static/img/products/ipod.png
diff --git a/static/img/products/ipod_classic_2011.jpg b/static/img/products/ipod_classic_2011.jpg
new file mode 100644
index 0000000..8be2b35
--- /dev/null
+++ b/static/img/products/ipod_classic_2011.jpg
diff --git a/static/img/products/ipod_nano_2011.jpg b/static/img/products/ipod_nano_2011.jpg
new file mode 100644
index 0000000..e07f717
--- /dev/null
+++ b/static/img/products/ipod_nano_2011.jpg
diff --git a/static/img/products/ipod_nano_7thgen.jpg b/static/img/products/ipod_nano_7thgen.jpg
new file mode 100644
index 0000000..11bf41c
--- /dev/null
+++ b/static/img/products/ipod_nano_7thgen.jpg
diff --git a/static/img/products/ipod_shuffle_2012.jpg b/static/img/products/ipod_shuffle_2012.jpg
new file mode 100644
index 0000000..6fc963c
--- /dev/null
+++ b/static/img/products/ipod_shuffle_2012.jpg
diff --git a/static/img/products/ipodnano2009-72.png b/static/img/products/ipodnano2009-72.png
new file mode 100644
index 0000000..1d95bfa
--- /dev/null
+++ b/static/img/products/ipodnano2009-72.png
diff --git a/static/img/products/ipodtouch.png b/static/img/products/ipodtouch.png
new file mode 100644
index 0000000..cd2035f
--- /dev/null
+++ b/static/img/products/ipodtouch.png
diff --git a/static/img/products/keyboard_mouse.jpg b/static/img/products/keyboard_mouse.jpg
new file mode 100644
index 0000000..5f67c9e
--- /dev/null
+++ b/static/img/products/keyboard_mouse.jpg
diff --git a/static/img/products/mac.png b/static/img/products/mac.png
new file mode 100644
index 0000000..0d6a666
--- /dev/null
+++ b/static/img/products/mac.png
diff --git a/static/img/products/macbook.png b/static/img/products/macbook.png
new file mode 100644
index 0000000..34bbfdf
--- /dev/null
+++ b/static/img/products/macbook.png
diff --git a/static/img/products/macbookair.png b/static/img/products/macbookair.png
new file mode 100644
index 0000000..b0f98d7
--- /dev/null
+++ b/static/img/products/macbookair.png
diff --git a/static/img/products/macbookpro.png b/static/img/products/macbookpro.png
new file mode 100644
index 0000000..dbbf493
--- /dev/null
+++ b/static/img/products/macbookpro.png
diff --git a/static/img/products/macmini.png b/static/img/products/macmini.png
new file mode 100644
index 0000000..fb4233c
--- /dev/null
+++ b/static/img/products/macmini.png
diff --git a/static/img/products/macpro.jpg b/static/img/products/macpro.jpg
new file mode 100644
index 0000000..d841424
--- /dev/null
+++ b/static/img/products/macpro.jpg
diff --git a/static/img/products/other.png b/static/img/products/other.png
new file mode 100644
index 0000000..d408859
--- /dev/null
+++ b/static/img/products/other.png
diff --git a/static/img/products/wifi.png b/static/img/products/wifi.png
new file mode 100644
index 0000000..a34be0c
--- /dev/null
+++ b/static/img/products/wifi.png
diff --git a/templates/issues/customer.html b/templates/issues/customer.html
index a47ba32..ae5eff6 100644
--- a/templates/issues/customer.html
+++ b/templates/issues/customer.html
@@ -2,9 +2,17 @@
 {% load bootstrap3 %}
 {% load i18n %}
 
+{% block nav %}
+    <li><a href="#">{% trans "Product" %}</a></li>
+    <li><a href="#">{% trans "Issue" %}</a></li>
+    <li class="active"><a href="#">{% trans "Your info" %}</a></li>
+    <li><a href="#">{% trans "Done" %}</a></li>
+{% endblock nav %}
+
 {% block main %}
+    <h2>3. {% trans "Your info" %}</h2>
     <form method="post" action="">
-        {% csrf_token %}
+    {% csrf_token %}
     {% bootstrap_form form %}
     {% buttons %}
         <button type="submit" class="btn btn-primary">{% trans "Submit" %}</button>
diff --git a/templates/issues/details.html b/templates/issues/details.html
new file mode 100644
index 0000000..479eeeb
--- /dev/null
+++ b/templates/issues/details.html
@@ -0,0 +1,15 @@
+{% extends "issues/index.html" %}
+{% load bootstrap3 %}
+{% load i18n %}
+
+{% block main %}
+    <h2>2. {% trans "The Issue" %}</h2>
+    <p>Please describe the issue you're having with the product.</p>
+    <form method="post" action="{% url 'issues-details' %}" enctype="multipart/form-data">
+        {% csrf_token %}
+        {% bootstrap_form form %}
+        <div class="form-group text-center">
+            <button type="submit" class="btn btn-primary">{% trans "Continue" %}</button>
+        </div>
+    </form>
+{% endblock main %}
diff --git a/templates/issues/device.html b/templates/issues/device.html
index def5b8b..66830d3 100644
--- a/templates/issues/device.html
+++ b/templates/issues/device.html
@@ -1,7 +1,43 @@
-{% extends "issues/index.html" %}
+{% extends "issues/warranty.html" %}
+{% load i18n %}
 
 {% block main %}
-    {% for k, v in models.items %}
-        <a href="{% url 'issues-choose_device' k %}">{{ v.name }}</a>
-    {% endfor %}
+<h2>{% trans "Choose Your Device" %}</h2>
+<p>Help text..</p>
+<div class="devices">
+    <div class="row">
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'mac' %}">
+                <img src="{{ STATIC_URL }}img/products/mac.png"/>
+                <div>{% trans "Mac" %}</div>
+            </a>
+        </div>
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'ipod' %}">
+                <img src="{{ STATIC_URL }}img/products/ipod.png"/>
+                <div>{% trans "iPod" %}</div>
+            </a>
+        </div>
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'iphone' %}">
+                <img src="{{ STATIC_URL }}img/products/iphone.png"/>
+                <div>{% trans "iPhone" %}</div>
+            </a>
+        </div>
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'ipad' %}">
+                <img src="{{ STATIC_URL }}img/products/ipad.png"/>
+                <div>{% trans "iPad" %}</div>
+            </a>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'other' %}">
+                <img src="{{ STATIC_URL }}img/products/other.png"/>
+                <div>{% trans "Other" %}</div>
+            </a>
+        </div>
+    </div>
+</div>
 {% endblock main %}
diff --git a/templates/issues/index.html b/templates/issues/index.html
index 70a84e7..eac766d 100644
--- a/templates/issues/index.html
+++ b/templates/issues/index.html
@@ -1,32 +1,51 @@
+{% load i18n %}
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <title>{{ title }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- Bootstrap -->
     <link href="{{ STATIC_URL }}bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
     <link href="{{ STATIC_URL }}bootstrap/css/bootstrap-theme.min.css" rel="stylesheet" media="screen">
-    <link href="{{ STATIC_URL }}css/signin.css" rel="stylesheet" media="screen">
     <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
     <!--[if lt IE 9]>
       <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
       <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
     <![endif]-->
+    <style type="text/css">
+        body {
+            padding-top: 20px;
+        }
+        .devices > div {
+            text-align: center;
+        }
+        .devices > div div {
+            padding: 10px;
+        }
+        label {
+            display: none;
+        }
+    </style>
   </head>
   <body>
-    <div class="container-fluid">
-      {% block main %}
-        <h2>{{ question.question }}</h2>
-        {% for i in question.choice_set.all %}
-          <a class="btn btn-default" href="{% url 'issues-index' i.pk %}">{{ i.choice }}</a>
-        {% endfor %}
-        <blockquote>{{ dump }}</blockquote>
-      {% endblock main %}
+    <div class="container">
+        <div class="navbar navbar-default" role="navbar">
+            <ul class="nav navbar-nav">
+            {% block nav %}
+                <li><a href="#">{% trans "Product" %}</a></li>
+                <li class="active"><a href="#">{% trans "Issue" %}</a></li>
+                <li><a href="#">{% trans "Your info" %}</a></li>
+                <li><a href="#">{% trans "Done" %}</a></li>
+            {% endblock nav %}
+            </ul>
+        </div>
+        {% block main %}
+        {% endblock main %}
     </div><!-- /container -->
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script src="{{ STATIC_URL }}js/jquery.min.js"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="{{ STATIC_URL }}bootstrap/js/bootstrap.min.js"></script>
-  </body>
+    </body>
 </html>
diff --git a/templates/issues/ipad.html b/templates/issues/ipad.html
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/templates/issues/ipad.html
diff --git a/templates/issues/iphone.html b/templates/issues/iphone.html
new file mode 100644
index 0000000..3f5faf2
--- /dev/null
+++ b/templates/issues/iphone.html
@@ -0,0 +1 @@
+{% extends "issues/device.html" %}
diff --git a/templates/issues/ipod.html b/templates/issues/ipod.html
new file mode 100644
index 0000000..0c34c5b
--- /dev/null
+++ b/templates/issues/ipod.html
@@ -0,0 +1,20 @@
+{% extends "issues/device.html" %}
+{% load i18n %}
+
+{% block main %}
+    <h2>{% trans "iPod" %}</h2>
+    <div class="row">
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'mac' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/ipodtouch.png"/>
+                <div>{% trans "iPod touch" %}</div>
+            </a>
+        </div>
+        <div class="col-md-3">
+            <a href="{% url 'issues-choose_device' 'mac' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/ipodtouch.png"/>
+                <div>{% trans "iPod touch" %}</div>
+            </a>
+        </div>
+    </div>    
+{% endblock main %}
diff --git a/templates/issues/mac.html b/templates/issues/mac.html
new file mode 100644
index 0000000..97bd6f9
--- /dev/null
+++ b/templates/issues/mac.html
@@ -0,0 +1,49 @@
+{% extends "issues/device.html" %}
+{% load i18n %}
+
+{% block main %}
+<h2>{% trans "Mac" %}</h2>
+<p>{% trans "Choose your Mac" %}</p>
+<div class="devices">
+    <div class="row">
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'mac' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macbook.png"/>
+                <div>{% trans "MacBook" %}</div>
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'ipod' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macbookpro.png"/>
+                <div>{% trans "MacBook Pro" %}</div>
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'iphone' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macbookair.png"/>
+                <div>{% trans "MacBook Air" %}</div>
+            </a>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'ipad' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/imac.png"/>
+                <div>{% trans "iMac" %}</div>
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'ipad' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macpro.jpg"/>
+                <div>{% trans "Mac Pro" %}</div>
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'ipad' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/macmini.png"/>
+                <div>{% trans "Mac mini" %}</div>
+            </a>
+        </div>
+    </div>
+</div>    
+{% endblock main %}
diff --git a/templates/issues/other.html b/templates/issues/other.html
new file mode 100644
index 0000000..2d4d0ee
--- /dev/null
+++ b/templates/issues/other.html
@@ -0,0 +1,29 @@
+{% extends "issues/device.html" %}
+{% load i18n %}
+
+{% block main %}
+<h2>{% trans "Other" %}</h2>
+<p>{% trans "Choose your product" %}</p>
+<div class="devices">
+    <div class="row">
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'mac' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/wifi.png"/>
+                <div>{% trans "AirPort Express" %}</div>
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'mac' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/wifi.png"/>
+                <div>{% trans "AirPort Express" %}</div>
+            </a>
+        </div>
+        <div class="col-md-4">
+            <a href="{% url 'issues-details' 'mac' %}">
+                <img class="img-responsive" src="{{ STATIC_URL }}img/products/wifi.png"/>
+                <div>{% trans "AirPort Time Capsule" %}</div>
+            </a>
+        </div>
+    </div>
+</div>
+{% endblock main %}
diff --git a/templates/issues/question.html b/templates/issues/question.html
new file mode 100644
index 0000000..8da6e10
--- /dev/null
+++ b/templates/issues/question.html
@@ -0,0 +1,12 @@
+{% extends "issues/index.html" %}
+{% load i18n %}
+
+{% block main %}
+<div style="text-align:center">
+    <h1>{{ question.question }}</h1>
+    <p>{{ question.description|default:"" }}</p>
+    {% for i in question.choice_set.all %}
+        <a class="btn btn-default" href="{% url 'issues-index' i.pk %}">{{ i.choice }}</a>
+    {% endfor %}
+</div>
+{% endblock main %}
diff --git a/templates/issues/thanks.html b/templates/issues/thanks.html
index e69de29..0803d57 100644
--- a/templates/issues/thanks.html
+++ b/templates/issues/thanks.html
@@ -0,0 +1,18 @@
+{% extends "issues/index.html" %}
+{% load i18n %}
+
+{% block nav %}
+    <li><a href="#">{% trans "Product" %}</a></li>
+    <li><a href="#">{% trans "Issue" %}</a></li>
+    <li><a href="#">{% trans "Your info" %}</a></li>
+    <li class="active"><a href="#">{% trans "Done" %}</a></li>
+{% endblock nav %}
+
+{% block main %}
+<div style="text-align:center">
+    <h1>{% trans "Thanks!" %}</h1>
+    <img src="{{ STATIC_URL }}img/products/done.png" alt=""/><br/>
+    <p>Put description here...</p>
+    <a class="btn btn-primary" href="{% url 'issues-welcome' %}"><i class="glyphicon glyphicon-repeat"></i> {% trans "Restart" %}</a>
+</div>
+{% endblock main %}
diff --git a/templates/issues/warranty.html b/templates/issues/warranty.html
index b944ea5..2e0be24 100644
--- a/templates/issues/warranty.html
+++ b/templates/issues/warranty.html
@@ -1,28 +1,37 @@
 {% extends "issues/index.html" %}
 {% load i18n %}
 
+{% block nav %}
+    <li class="active"><a href="#">{% trans "Product" %}</a></li>
+    <li><a href="#">{% trans "Issue" %}</a></li>
+    <li><a href="#">{% trans "Your info" %}</a></li>
+    <li><a href="#">{% trans "Done" %}</a></li>
+{% endblock nav %}
+
 {% block main %}
     <div class="row">
         <div class="col-md-5">
             <img src="http://service.info.apple.com/parts/service_parts/products/imac_27_mid2011.jpg" alt="iMac (27-inch, Mid 2011)" title="iMac (27-inch, Mid 2011)">
         </div>
         <div class="col-md-7">
-            <h3>iMac (27-inch, Mid 2011)</h3>
-            <dl class="dl-horizontal">
-                <dt>{% trans "Warranty" %}</dt>
-                <dd>Out Of Warranty (No Coverage)</dd>
-                <dt>{% trans "Purchased" %}</dt>
-                <dd>2.6.2011, Sweden</dd>
-                <dt>{% trans "Serial Number" %}</dt>
-                <dd>DGKFL06JDHJP</dd>
-                <dt>{% trans "Configuration" %}</dt>
-                <dd>IMAC 27"/2.7QC/2X2GB/1TB/6770M</dd>
-            </dl>
+            <div style="padding: 20px">
+                <h3>iMac (27-inch, Mid 2011)</h3>
+                <dl class="dl-horizontal">
+                    <dt>{% trans "Warranty" %}</dt>
+                    <dd>Out Of Warranty (No Coverage)</dd>
+                    <dt>{% trans "Purchased" %}</dt>
+                    <dd>2.6.2011, Sweden</dd>
+                    <dt>{% trans "Serial Number" %}</dt>
+                    <dd>DGKFL06JDHJP</dd>
+                    <dt>{% trans "Configuration" %}</dt>
+                    <dd>IMAC 27"/2.7QC/2X2GB/1TB/6770M</dd>
+                </dl>
+            </div>
         </div>
     </div>
     <div class="row">
-        <div class="col-md-12">
-            <a class="btn btn-default" href="{% url 'issues-index' 0 %}">{% trans "Continue" %}</a>
+        <div class="col-md-12 text-center">
+            <a class="btn btn-primary" href="{% url 'issues-details' %}">{% trans "Continue" %}</a>
         </div>
     </div>
 {% endblock main %}
diff --git a/templates/issues/welcome.html b/templates/issues/welcome.html
index 38c0dcd..daef11b 100644
--- a/templates/issues/welcome.html
+++ b/templates/issues/welcome.html
@@ -1,15 +1,22 @@
 {% extends "issues/index.html" %}
+{% load bootstrap3 %}
 {% load i18n %}
 
+{% block nav %}
+    <li class="active"><a href="#">{% trans "Product" %}</a></li>
+    <li><a href="#">{% trans "Issue" %}</a></li>
+    <li><a href="#">{% trans "Your info" %}</a></li>
+    <li><a href="#">{% trans "Done" %}</a></li>
+{% endblock nav %}
+
 {% block main %}
-    <form method="post" action="{% url 'issues-warranty' %}">
-        {% csrf_token %}
-        <div class="form-group">
-            <label for="exampleInputEmail1">Serial Number</label>
-            <input type="email" class="form-control" id="exampleInputEmail1" placeholder="{% trans "Serial Number" %}" value="DGKFL06JDHJP">
-      </div>
-      <div class="form-group">
+<h2>1. {% trans "Product" %}</h2>
+<p>Let's start by identifying your device. Please enter your <a href="http://support.apple.com/kb/HT1349" target="_blank">serial number</a> or click Skip.</p>
+<form method="post" action="{% url 'issues-warranty' %}">
+    {% csrf_token %}
+    {% bootstrap_form form %}
+    <div class="form-group">
         <a href="{% url 'issues-choose_device' %}" class="btn btn-default">{% trans "Skip" %}</a>
-      </div>
-    </form>
+    </div>
+</form>
 {% endblock main %}