Index: /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser.py
===================================================================
--- /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser.py	(revision 12766)
+++ /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser.py	(revision 12767)
@@ -39,5 +39,5 @@
 
 grok.context(IIkobaObject)  # Make IIkobaObject the default context
-grok.templatedir('templates')
+grok.templatedir('browser_templates')
 
 
Index: /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/containermanagepage.pt
===================================================================
--- /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/containermanagepage.pt	(revision 12767)
+++ /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/containermanagepage.pt	(revision 12767)
@@ -0,0 +1,70 @@
+<form method="POST" i18n:domain="waeup.ikoba" class="form-inline">
+  <br />
+    <div class="form-group">
+      <input class="btn btn-primary" type="submit" name="search"
+        tal:attributes="value view/search_button" />
+    </div>
+    <div class="form-group">
+      <select name="searchtype" class="form-control">
+        <option i18n:translate="" value="payment_id">with payment id</option>
+        <option i18n:translate="" value="payer_id">with payer id</option>
+        <option i18n:translate="" value="payable_id">with contract id</option>
+      </select>
+    </div>
+    <div class="form-group">
+      <input type="text" class="form-control" name="searchterm" />
+    </div>
+  <br />
+  <div tal:condition="view/hitlist">
+    <h3 i18n:translate="">Search Results</h3>
+    <input type="hidden" name="old_searchterm"
+         tal:attributes="value view/searchterm" />
+    <input type="hidden" name="old_searchtype"
+         tal:attributes="value view/searchtype" />
+
+    <br /><br />
+    <table class="ikoba-data-table dataTableManage">
+      <thead>
+      <tr>
+        <th>&nbsp;</th>
+        <th i18n:translate="">Payment Id</th>
+        <th i18n:translate="">Creation Date</th>
+        <th i18n:translate="">Payment Date</th>
+        <th i18n:translate="">Service</th>
+        <th i18n:translate="">Amount</th>
+        <th i18n:translate="">Currency</th>
+        <th i18n:translate="">State</th>
+        <th i18n:translate="">Contract</th>
+      </tr>
+      </thead>
+      <tbody>
+        <tr tal:repeat="value view/hitlist">
+      	  <td>
+            <input type="checkbox" name="entries" tal:attributes="value python:value[0].__name__" />
+          </td>
+          <td><span tal:content="python: value[0].payment_id[:9]"></span>...</td>
+          <td tal:content="python: layout.formatDatetime(value[0].creation_date)">CREATION DATE</td>
+          <td tal:content="python: layout.formatDatetime(value[0].payment_date)">PAYMENT DATE</td>
+          <td tal:content="python: view.gateway_services[value[0].gateway_service].title">SERVICE</td>
+          <td tal:content="python: value[0].amount">AMOUNT</td>
+          <td tal:content="python: value[0].currency">CURRENCY</td>
+          <td tal:content="python: view.payment_states.getTerm(value[0].state).title">STATE</td>
+          <td>
+            <span tal:condition="python: value[1] is not None">
+              <a tal:attributes="href python: view.url(value[2])">
+                <span tal:content="python: value[1].title">PAYABLETITLE</span>
+              </a>
+            </span>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+    <input type="checkbox" onClick="toggle(this, 'entries')" />
+    <span  i18n:translate="">Select all</span>
+    <br /><br />
+    <input type="submit" name="remove"
+           tal:attributes="value view/remove_button" class="btn btn-default"
+           onclick="return confirmPost('Are you sure?')"/>
+  </div>
+</form>
+
Index: /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/containerpage.pt
===================================================================
--- /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/containerpage.pt	(revision 12767)
+++ /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/containerpage.pt	(revision 12767)
@@ -0,0 +1,58 @@
+<form method="POST" i18n:domain="waeup.ikoba" class="form-inline">
+<br />
+  <div class="form-group">
+    <input class="btn btn-primary" type="submit" name="search"
+      tal:attributes="value view/search_button" />
+  </div>
+  <div class="form-group">
+    <select name="searchtype" class="form-control">
+      <option i18n:translate="" value="payment_id">with payment id</option>
+      <option i18n:translate="" value="payer_id">with payer id</option>
+      <option i18n:translate="" value="payable_id">with contract id</option>
+    </select>
+  </div>
+  <div class="form-group">
+    <input type="text" class="form-control" name="searchterm" />
+  </div>
+</form>
+<br />
+<div tal:condition="view/hitlist">
+  <h3 i18n:translate="">Search Results</h3>
+  <input type="hidden" name="old_searchterm"
+       tal:attributes="value view/searchterm" />
+  <input type="hidden" name="old_searchtype"
+       tal:attributes="value view/searchtype" />
+  <table class="ikoba-data-table dataTable">
+    <thead>
+    <tr>
+      <th i18n:translate="">Payment Id</th>
+      <th i18n:translate="">Creation Date</th>
+      <th i18n:translate="">Payment Date</th>
+      <th i18n:translate="">Service</th>
+      <th i18n:translate="">Amount</th>
+      <th i18n:translate="">Currency</th>
+      <th i18n:translate="">State</th>
+      <th i18n:translate="">Contract</th>
+    </tr>
+    </thead>
+    <tbody>
+      <tr tal:repeat="value view/hitlist">
+        <td><span tal:content="python: value[0].payment_id[:9]"></span>...</td>
+        <td tal:content="python: layout.formatDatetime(value[0].creation_date)">CREATION DATE</td>
+        <td tal:content="python: layout.formatDatetime(value[0].payment_date)">PAYMENT DATE</td>
+        <td tal:content="python: view.gateway_services[value[0].gateway_service].title">SERVICE</td>
+        <td tal:content="python: value[0].amount">AMOUNT</td>
+        <td tal:content="python: value[0].currency">CURRENCY</td>
+        <td tal:content="python: view.payment_states.getTerm(value[0].state).title">STATE</td>
+        <td>
+          <span tal:condition="python: value[1] is not None">
+            <a tal:attributes="href python: view.url(value[2])">
+              <span tal:content="python: value[1].title">PAYABLETITLE</span>
+            </a>
+          </span>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
Index: /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/demo_cc_step1.pt
===================================================================
--- /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/demo_cc_step1.pt	(revision 12767)
+++ /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/demo_cc_step1.pt	(revision 12767)
@@ -0,0 +1,148 @@
+<form class="form-horizontal">
+  <div class="form-group"
+       tal:attributes="class view/validations/first_name">
+    <label for="firstname" class="col-sm-3 control-label">
+      Cardholder's First Name:
+    </label>
+    <div class="col-sm-5">
+      <input type="text" class="form-control" placeholder="John"
+             id="firstname" name="first_name"
+             tal:attributes="value view/first_name" />
+    </div>
+  </div>
+
+  <div tal:attributes="class view/validations/last_name" class="form-group">
+    <label for="lastname" class="col-sm-3 control-label">
+      Cardholder's Last Name:
+    </label>
+    <div class="col-sm-5">
+      <input type="text" class="form-control" placeholder="Smith"
+             id="lastname" name="last_name"
+             tal:attributes="value view/last_name" />
+    </div>
+  </div>
+
+  <div class="form-group"
+       tal:attributes="class view/validations/cc_number">
+    <label for="ccnumber" class="col-sm-3 control-label">
+      Credit Card Number:
+    </label>
+    <div class="col-sm-5">
+      <input type="text" class="form-control" id="ccnumber"
+             name="cc_number" tal:attributes="value view/cc_number" />
+    </div>
+  </div>
+
+  <div class="form-group"
+       tal:attributes="class view/validations/exp_date">
+    <label for="exp_date" class="col-sm-3 control-label">
+      Expiration Date:
+    </label>
+
+    <div class="col-sm-2">
+      <select class="form-control text-right" id="exp_date_month"
+              name="exp_month" tal:content="structure view/months">
+        <option>1</option>
+        <option>2</option>
+        <option selected="selected">3</option>
+        <option>4</option>
+        <option>5</option>
+        <option>6</option>
+        <option>7</option>
+        <option>8</option>
+        <option>9</option>
+        <option>10</option>
+        <option>11</option>
+        <option>12</option>
+      </select>
+    </div>
+
+    <div class="col-sm-2">
+      <select class="form-control" id="exp_date_month" name="exp_year"
+              tal:content="structure view/years">
+        <option>2014</option>
+        <option selected="selected">2015</option>
+        <option>2016</option>
+        <option>2017</option>
+        <option>2018</option>
+        <option>2019</option>
+      </select>
+    </div>
+  </div>
+
+  <div class="form-group"
+       tal:attributes="class view/validations/csc">
+    <label for="sec_code" class="col-sm-3 control-label">
+      Security Code (CSC):
+      <div class="small">
+        <a href="#collapseExample" data-toggle="collapse"
+           aria-expanded="false" aria-controls="collapseExample">
+          What is a CSC?
+        </a>
+      </div>
+    </label>
+    <div class="col-sm-3">
+      <input type="password" class="form-control" maxlength="4" id="sec_code"
+             name="csc" tal:attributes="value view/csc" />
+    </div>
+
+  </div>
+
+  <div class="form-group">
+    <div class="collapse col-sm-12" id="collapseExample">
+      <div class="well">
+        <p class="strong"><b>Card Security Code (CSC)</b></p>
+        <p>
+          The card security code, also known as card verification
+          value (CVV or CVV2) is a counter-measure to protect you from
+          credit card fraud.
+        </p>
+
+        <p>
+            The security code is located on the back of MasterCard,
+            Visa and Discover credit or debit cards and is typically a
+            separate group of 3 digits within or to the right of the
+            signature strip.
+        </p>
+        <div class="col-sm-12">
+          <div>
+            <img src="/static/img/cvv2-sample-visa.png"
+                 class="img-responsive col-sm-3" />
+            </div><div>
+            <img src="/static/img/cvv2-sample-amex.png"
+                 class="img-responsive col-sm-3" />
+          </div>
+        </div>
+
+        <p>
+          On American Express cards, the card security code is a
+          printed, not embossed, group of four digits on the front
+          towards the right.
+        </p>
+      </div>
+    </div>
+
+  </div>
+
+  <hr />
+
+  <div class="form-group">
+    <div class="col-sm-offset-1 col-sm-2">
+      <b>Payment Total:</b>
+    </div>
+    <div class="col-sm-9 text-left">
+      <b tal:content="view/amount">$&nbsp;3,012.40&nbsp;USD</b>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <div class="col-sm-offset-2 col-sm-10">
+      <div tal:condition="view/availableActions">
+        <input tal:repeat="action view/actions"
+               tal:replace="structure action/render"
+               />
+      </div>
+    </div>
+  </div>
+
+</form>
Index: /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/demo_cc_step2.pt
===================================================================
--- /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/demo_cc_step2.pt	(revision 12767)
+++ /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/browser_templates/demo_cc_step2.pt	(revision 12767)
@@ -0,0 +1,17 @@
+<form class="form-horizontal">
+  <div class="jumbotron">
+    <h1>Thank you!</h1>
+    <p>
+      Your payment will now be verified by our financial
+      partners. Please bear with us.
+    </p>
+    <p>
+      <input type="submit" name="SUBMIT" class="btn btn-primary btn-lg"
+             role="button" value="Update Status" />
+    </p>
+    <input type="hidden" name="cnt"
+           tal:attributes="value view/cnt" />
+
+  </div>
+
+</form>
Index: /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/demo_provider.py
===================================================================
--- /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/demo_provider.py	(revision 12766)
+++ /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/demo_provider.py	(revision 12767)
@@ -15,5 +15,5 @@
 
 
-grok.templatedir('templates')
+grok.templatedir('browser_templates')
 
 
Index: /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/tests/test_browser.py
===================================================================
--- /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/tests/test_browser.py	(revision 12766)
+++ /main/waeup.ikoba/trunk/src/waeup/ikoba/payments/tests/test_browser.py	(revision 12767)
@@ -54,5 +54,4 @@
         self.add_product_option(self.contract)
         self.setup_payment()
-
         # Managers can access the pages of payments section
         # and can remove payments
@@ -65,5 +64,4 @@
         self.assertEqual(self.browser.url, self.payments_path + '/manage')
         # Payment can be found
-
         self.browser.getControl("Find payment(s)").click()
         self.assertTrue('Empty search string' in self.browser.contents)
@@ -74,5 +72,4 @@
             '<a href="http://localhost/app/customers/K1000000/contracts/CON1">'
             in self.browser.contents)
-
         # Payments can be removed
         ctrl = self.browser.getControl(name='entries')
@@ -80,6 +77,4 @@
         self.browser.getControl("Remove selected", index=0).click()
         self.assertTrue('Successfully removed' in self.browser.contents)
-
-
         # All actions are being logged
         logfile = os.path.join(
@@ -89,3 +84,2 @@
             'INFO - zope.mgr - payments.browser.PaymentsContainerManagePage - removed: %s'
             % self.payment.payment_id in logcontent)
-
