Bug 22293: Sticky toolbar making vendor form uneditable
[koha_ffzg] / koha-tmpl / intranet-tmpl / prog / en / modules / acqui / supplier.tt
index 201c080..626417d 100644 (file)
+[% USE raw %]
+[% USE Asset %]
 [% USE KohaDates %]
-[% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Vendor [% bookselname %]</title>
-<link rel="stylesheet" type="text/css" href="[% themelang %]/css/datatables.css" />
-[% INCLUDE 'doc-head-close.inc' %]
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.dataTables.min.js"></script>
-[% INCLUDE 'datatables-strings.inc' %]
-<script type="text/javascript" src="[% themelang %]/js/datatables.js"></script>
-
-<script type="text/javascript">
-//<![CDATA[
-function confirm_deletion() {
-    if (confirm(_("Confirm deletion of this vendor ?"))) {
-        window.location="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% booksellerid %]&op=delete";
-    }
-}
-function check(f) {
-if (f.company.value == "") {
-    alert(_("You must specify a name for this vendor."));
-    return false;
-}
-    f.submit();
-}
+[% BLOCK edit_contact %]
+    <ol id="contact-form">
+        <input type="hidden" name="contact_id" value="[% contact.id | html %]" />
+        <li><label for="contact_name[% contact.id | html %]">Contact name: </label>
+            <input type="text" size="40" id="contact_name[% contact.id | html %]" name="contact_name" value="[% contact.name | html %]" /></li>
+        <li><label for="contact_position[% contact.id | html %]">Position: </label>
+            <input type="text" size="40" id="contact_position[% contact.id | html %]" name="contact_position" value="[% contact.position | html %]" /></li>
+        <li><label for="contact_phone[% contact.id | html %]">Phone: </label>
+                <input type="text" size="20" id="contact_phone[% contact.id | html %]" name="contact_phone" value="[% contact.phone | html %]" /> </li>
+        <li><label for="contact_altphone[% contact.id | html %]">Alternative phone: </label>
+            <input type="text" size="20" id="contact_altphone[% contact.id | html %]" name="contact_altphone" value="[% contact.altphone | html %]" /></li>
+        <li><label for="contact_fax[% contact.id | html %]">Fax: </label>
+            <input type="text" size="20" id="contact_fax[% contact.id | html %]" name="contact_fax" value="[% contact.fax | html %]" /></li>
+        <li><label for="contact_email[% contact.id | html %]">Email: </label>
+            <input type="text" size="40" id="contact_email[% contact.id | html %]" name="contact_email" value="[% contact.email | html %]" class="email" /></li>
+        <li><label for="contact_notes[% contact.id | html %]">Notes: </label>
+            <textarea id="contact_notes[% contact.id | html %]" name="contact_notes" cols="40" rows="4">[% contact.notes | html %]</textarea></li>
+        <li><label for="contact_acqprimary[% contact.id | html %]">Primary acquisitions contact:</label>
+            [% IF contact.acqprimary %]
+                <input type="checkbox" id="contact_acqprimary[% contact.id | html %]" class="contact_acqprimary" checked="checked"></input>
+            [% ELSE %]
+                <input type="checkbox" id="contact_acqprimary[% contact.id | html %]" class="contact_acqprimary"></input>
+            [% END %]
+            <input type="hidden" class="contact_acqprimary_hidden" name="contact_acqprimary" value="[% contact.acqprimary | html %]"></input>
+        <li><label for="contact_serialsprimary[% contact.id | html %]">Primary serials contact:</label>
+            [% IF contact.serialsprimary %]
+                <input type="checkbox" id="contact_serialsprimary[% contact.id | html %]" class="contact_serialsprimary" checked="checked"></input>
+            [% ELSE %]
+                <input type="checkbox" id="contact_serialsprimary[% contact.id | html %]" class="contact_serialsprimary"></input>
+            [% END %]
+            <input type="hidden" class="contact_serialsprimary_hidden" name="contact_serialsprimary" value="[% contact.serialsprimary | html %]"></input>
+        <li><label for="contact_orderacquisition[% contact.id | html %]">Contact when ordering?</label>
+            [% IF contact.orderacquisition %]
+                <input type="checkbox" id="contact_orderacquisition[% contact.id | html %]" class="contact_orderacquisition" checked="checked"></input>
+            [% ELSE %]
+                <input type="checkbox" id="contact_orderacquisition[% contact.id | html %]" class="contact_orderacquisition"></input>
+            [% END %]
+            <input type="hidden" class="contact_orderacquisition_hidden" name="contact_orderacquisition" value="[% contact.orderacquisition | html %]"></input>
+        <li><label for="contact_claimacquisition[% contact.id | html %]">Contact about late orders?</label>
+            [% IF contact.claimacquisition %]
+                <input type="checkbox" id="contact_claimacquisition[% contact.id | html %]" class="contact_claimacquisition" checked="checked"></input>
+            [% ELSE %]
+                <input type="checkbox" id="contact_claimacquisition[% contact.id | html %]" class="contact_claimacquisition"></input>
+            [% END %]
+            <input type="hidden" class="contact_claimacquisition_hidden" name="contact_claimacquisition" value="[% contact.claimacquisition | html %]"></input>
+        <li><label for="contact_claimissues[% contact.id | html %]">Contact about late issues?</label>
+            [% IF contact.claimissues %]
+                <input type="checkbox" id="contact_claimissues[% contact.id | html %]" class="contact_claimissues" checked="checked"></input>
+            [% ELSE %]
+                <input type="checkbox" id="contact_claimissues[% contact.id | html %]" class="contact_claimissues"></input>
+            [% END %]
+            <input type="hidden" class="contact_claimissues_hidden" name="contact_claimissues" value="[% contact.claimissues | html %]"></input>
+        </li>
+        [% IF contact.id %]<li><button class="btn btn-default delete-contact"><i class="fa fa-trash"></i> Delete contact</li>[% END %]
+    </ol>
+[% END %]
 
- $(document).ready(function() {
-    [% IF (dateformat == 'metric') %]
-        dt_add_type_uk_date();
+[% BLOCK show_contact %]
+    <h3>[% contact.name | html %]</h3>
+    <p><span class="label">Position: </span>[% contact.position | html %]</p>
+    <p><span class="label">Phone: </span>[% contact.phone | html %]</p>
+    <p><span class="label">Alternative phone: </span>[% contact.altphone | html %]</p>
+    <p><span class="label">Fax: </span>[% contact.fax | html %]</p>
+    [% IF ( contact.email ) %]
+        <p><span class="label">Email: </span><a href="mailto:[% contact.email | uri %]">[% contact.email | html %]</a></p>
+    [% END %]
+    [% IF ( contact.notes ) %]
+        <p><span class="label">Notes: </span>[% contact.notes | html %]</p>
+    [% END %]
+    [% IF ( contact.acqprimary ) %]
+        <p><span class="label">Primary acquisitions contact</span></p>
     [% END %]
-    var contractst = $("#contractst").dataTable($.extend(true, {}, dataTablesDefaults, {
-        "aoColumnDefs": [
-          { "aTargets": [ -1, -2 ], "bSortable": false, "bSearchable": false },
-          [% IF (dateformat == 'metric') %]
-            { "aTargets": [ 2, 3 ], "sType": "uk_date" },
-          [% END %]
-        ],
-        'bPaginate': false,
-        'bFilter': false,
-        'bInfo': false,
-    } ) );
- });
-//]]>
-</script>
+    [% IF ( contact.serialsprimary ) %]
+        <p><span class="label">Primary serials contact</span></p>
+    [% END %]
+    [% IF ( contact.orderacquisition ) %]
+        <p><span class="label">Receives orders</span></p>
+    [% END %]
+    [% IF ( contact.claimacquisition ) %]
+        <p><span class="label">Receives claims for late orders</span></p>
+    [% END %]
+    [% IF ( contact.claimissues ) %]
+        <p><span class="label">Receives claims for late issues</span></p>
+    [% END %]
+[% END %]
+
+[% SET footerjs = 1 %]
+[% INCLUDE 'doc-head-open.inc' %]
+<title>Koha &rsaquo; Vendor [% name | html %]</title>
+[% Asset.css("css/datatables.css") | $raw %]
+[% INCLUDE 'doc-head-close.inc' %]
 </head>
+
 <body id="acq_supplier" class="acq">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'acquisitions-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/acqui/acqui-home.pl">Acquisitions</a> &rsaquo; [% IF ( enter ) %][% IF ( booksellerid ) %] <a href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% booksellerid %]">[% name %]</a> &rsaquo; Update: [% name %][% ELSE %]Add vendor[% END %] [% ELSE %][% name %][% END %]</div>
+<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/acqui/acqui-home.pl">Acquisitions</a> &rsaquo; [% IF ( enter ) %][% IF ( booksellerid ) %] <a href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% booksellerid | html %]">[% name | html %]</a> &rsaquo; Update: [% name | html %][% ELSE %]Add vendor[% END %] [% ELSE %][% name | html %][% END %]</div>
 
-<div id="doc" class="yui-t7">
+<div class="main container-fluid">
+    <div class="row">
+        <div class="col-sm-10 col-sm-push-2">
+            <main>
 
-<div id="bd">
-    <div id="yui-main">
     [% IF ( enter ) %]
         [% IF ( booksellerid ) %]
-        <h1>Update: [% name %]</h1>
+        <h1>Update: [% name | html %]</h1>
     [% ELSE %]
         <h1>Add vendor</h1>
     [% END %]
     [% END %]
 [% UNLESS ( enter ) %][% INCLUDE 'acquisitions-toolbar.inc' %][% END %]
 [% IF ( enter ) %]
-    <form action="updatesupplier.pl" name="updatesupplier" method="post">
-    <div class="yui-g">
-        <input type="hidden" name="booksellerid" value="[% booksellerid %]" />
+    <form action="updatesupplier.pl" name="updatesupplier" style="display:block" class="validated" method="post">
+        <div id="toolbar" class="btn-toolbar">
+            <button class="btn btn-default btn-sm" type="submit"><i class="fa fa-save"></i> Save</button>
+            [% IF ( booksellerid ) %]
+                <a class="btn btn-default btn-sm cancel" href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% booksellerid | html %]">
+            [% ELSE %]
+                <a class="btn btn-default btn-sm cancel" href="/cgi-bin/koha/acqui/acqui-home.pl">
+            [% END %] <i class="fa fa-remove"></i> Cancel</a>
+        </div>
+
+        <input type="hidden" name="booksellerid" value="[% booksellerid | html %]" />
         <fieldset class="rows">
             <legend>Company details</legend>
-            <ol><li><label for="company" class="required">Name * </label>
-                <input type="text" size="40" id="company" name="company" value="[% name %]" /></li>
-            <li><label for="company_postal">Postal address</label>
-                    <textarea id="company_postal" name="company_postal" cols="40" rows="3">[% postal %]</textarea></li>
-            <li><label for="physical">Physical address</label>
-                <textarea id="physical" name="physical" cols="40" rows="3">[% address1 %][% address2 %][% address3 %][% address4 %]</textarea></li>
-            <li><label for="company_phone">Phone</label>
-                <input type="text" size="20" id="company_phone" name="company_phone" value="[% phone %]" /></li>
-            <li><label for="company_fax">Fax</label>
-                <input type="text" size="20" id="company_fax" name="company_fax" value="[% fax %]" /></li>
-            <li><label for="website">Website</label>
-                <input type="text" size="40" id="website" name="website" value="[% url %]" /></li>
-            <li><label for="accountnumber">Account number</label>
-                <input type="text" size="40" id="accountnumber" name="accountnumber" value="[% accountnumber %]" /></li></ol>
+            <ol><li><label for="company" class="required">Name:</label>
+                <input type="text" size="40" id="company" name="company" value="[% name | html %]" required="required" class="required" /><span class="required">Required</span></li>
+            <li><label for="company_postal">Postal address</label>
+                    <textarea id="company_postal" name="company_postal" cols="40" rows="3">[% postal | html %]</textarea></li>
+            <li><label for="physical">Physical address</label>
+                <textarea id="physical" name="physical" cols="40" rows="3">[% address1 | html %][% address2 | html %][% address3 | html %][% address4 | html %]</textarea></li>
+            <li><label for="company_phone">Phone</label>
+                <input type="text" size="20" id="company_phone" name="company_phone" value="[% phone | html %]" /></li>
+            <li><label for="company_fax">Fax</label>
+                <input type="text" size="20" id="company_fax" name="company_fax" value="[% fax | html %]" /></li>
+            <li><label for="website">Website</label>
+                <input type="text" size="40" id="website" name="website" value="[% url | html %]" class="url" /></li>
+            <li><label for="accountnumber">Account number</label>
+                <input type="text" size="40" id="accountnumber" name="accountnumber" value="[% accountnumber | html %]" /></li></ol>
         </fieldset>
         <fieldset class="rows">
-            <legend>Contact details</legend>
-        <ol> <li><label for="company_contact_name">Contact name</label>
-                <input type="text" size="40" id="company_contact_name" name="company_contact_name" value="[% contact %]" /></li>
-            <li><label for="company_contact_position">Position</label>
-                <input type="text" size="40" id="company_contact_position" name="company_contact_position" value="[% contpos %]" /></li>
-            <li><label for="contact_phone">Phone</label>
-                <input type="text" size="20" id="contact_phone" name="contact_phone" value="[% contphone %]" /> </li>
-            <li><label for="contact_phone_2">Alternative phone</label>
-                <input type="text" size="20" id="contact_phone_2" name="contact_phone_2" value="[% contaltphone %]" /></li>
-            <li><label for="contact_fax">Fax</label>
-                <input type="text" size="20" id="contact_fax" name="contact_fax" value="[% contfax %]" /></li>
-            <li><label for="company_email">Email</label>
-                <input type="text" size="40" id="company_email" name="company_email" value="[% contemail %]" /></li>
-            <li><label for="contact_notes">Notes</label>
-                <textarea id="contact_notes" name="contact_notes" cols="40" rows="4">[% contnotes %]</textarea></li></ol>
+            <legend>Contacts</legend>
+            <fieldset id="contact-template" class="supplier-contact">
+                <legend>Contact details</legend>
+                [% INCLUDE edit_contact %]
+            </fieldset>
+            [% FOREACH contact IN contacts %]
+                <fieldset class="supplier-contact">
+                    <legend>Contact details</legend>
+                    [% INCLUDE edit_contact %]
+                </fieldset>
+            [% END %]
+            <button id="add-contact" class="btn btn-default"><i class="fa fa-plus"></i> Add another contact</button>
         </fieldset>
-    </div>
-        <div class="yui-g">
+
         <fieldset class="rows">
             <legend>Ordering information</legend>
-            <ol class="radio"><li><label for="activestatus" class="radio">Vendor is:</label>
+            <ol><li><label for="activestatus">Vendor is:</label>
                     [% IF ( active ) %]
-                        <label for="activestatus">Active</label> <input type="radio" id="activestatus" name="status" value="1" checked="checked" />
-                        <label for="inactivestatus">Inactive</label> <input type="radio" id="inactivestatus" name="status" value="0" />
+                        <label class="radio" for="activestatus">
+                            Active <input type="radio" id="activestatus" name="status" value="1" checked="checked" />
+                        </label>
+                        <label class="radio" for="inactivestatus">
+                            Inactive <input type="radio" id="inactivestatus" name="status" value="0" />
+                        </label>
                     [% ELSE %]
-                        <label for="activestatus">Active</label> <input type="radio" id="activestatus" name="status" value="1" />
-                        <label for="inactivestatus">Inactive</label> <input type="radio" id="inactivestatus" name="status" value="0" checked="checked" />
+                        <label class="radio" for="activestatus">
+                            Active <input type="radio" id="activestatus" name="status" value="1" />
+                        </label>
+                        <label class="radio" for="inactivestatus">
+                            Inactive <input type="radio" id="inactivestatus" name="status" value="0" checked="checked" />
+                        </label>
                     [% END %]</li>
-            </ol>
-            <ol>
-            <li><label for="list_currency">List prices are</label>
-                    <select name="list_currency" id="list_currency">
-                    [% FOREACH loop_currenc IN loop_currency %]
-                        [% IF ( loop_currenc.listprice ) %]<option value="[% loop_currenc.currency %]" selected="1">[% loop_currenc.currency %]</option>
-                        [% ELSE %]<option value="[% loop_currenc.currency %]">[% loop_currenc.currency %]</option>[% END %]
+            <li><label for="list_currency">List prices are: </label>
+                <select name="list_currency" id="list_currency">
+                    [% FOREACH c IN currencies %]
+                        [% IF booksellerid and c.currency == listprice or not booksellerid and c.active %]
+                            <option value="[% c.currency | html %]" selected="selected">[% c.currency | html %]</option>
+                        [% ELSIF not c.archived %]
+                            <option value="[% c.currency | html %]">[% c.currency | html %]</option>
+                        [% END %]
                     [% END %]
-                    </select>
+                </select>
             </li>
-            <li><label for="invoice_currency">Invoice prices are</label>
-                    <select name="invoice_currency" id="invoice_currency">
-                    [% FOREACH loop_currenc IN loop_currency %]
-                        [% IF ( loop_currenc.invoiceprice ) %]<option value="[% loop_currenc.currency %]" selected="1">[% loop_currenc.currency %]</option>
-                        [% ELSE %]<option value="[% loop_currenc.currency %]">[% loop_currenc.currency %]</option>[% END %]
+            <li><label for="invoice_currency">Invoice prices are: </label>
+                <select name="invoice_currency" id="invoice_currency">
+                    [% FOREACH c IN currencies %]
+                        [% IF booksellerid and c.currency == invoiceprice or not booksellerid and c.active %]
+                            <option value="[% c.currency | html %]" selected="selected">[% c.currency | html %]</option>
+                        [% ELSIF not c.archived %]
+                            <option value="[% c.currency | html %]">[% c.currency | html %]</option>
+                        [% END %]
                     [% END %]
-                    </select>
+                </select>
             </li>
-            </ol>
-            <ol class="radio">
-            <li><label for="gstyes" class="radio">Tax number registered:</label>
+            <li><label for="gstyes">Tax number registered:</label>
                 [% IF ( gstreg ) %]
-                    <label for="gstyes">Yes</label> <input type="radio" name="gst" id="gstyes" value="1" checked="checked" />
-                    <label for="gstno">No</label> <input type="radio" name="gst" id="gstno" value="0" />
+                    <label class="radio" for="gstyes">
+                        Yes <input type="radio" name="gst" id="gstyes" value="1" checked="checked" />
+                    </label>
+                    <label class="radio" for="gstno">
+                        No <input type="radio" name="gst" id="gstno" value="0" />
+                    </label>
                 [% ELSE %]
-                    <label for="gstyes">Yes</label> <input type="radio" name="gst" id="gstyes" value="1" />
-                    <label for="gstno">No</label> <input type="radio" name="gst" id="gstno" value="0" checked="checked" />
+                    <label class="radio" for="gstyes">
+                        Yes <input type="radio" name="gst" id="gstyes" value="1" />
+                    </label>
+                    <label class="radio" for="gstno">
+                        No <input type="radio" name="gst" id="gstno" value="0" checked="checked" />
+                    </label>
                 [% END %]</li>
-            
-            <li><label for="list_gstyes" class="radio">List prices:</label>
+
+            <li><label for="list_gstyes">List prices:</label>
                 [% IF ( listincgst ) %]
-                    <label for="list_gstyes">Include tax</label> <input type="radio" id="list_gstyes" name="list_gst" value="1" checked="checked" />
-                    <label for="list_gstno">Don't include tax</label> <input type="radio" id="list_gstno" name="list_gst" value="0" />
+                    <label class="radio" for="list_gstyes">
+                        Include tax <input type="radio" id="list_gstyes" name="list_gst" value="1" checked="checked" />
+                    </label>
+                    <label class="radio" for="list_gstno">
+                        Don't include tax <input type="radio" id="list_gstno" name="list_gst" value="0" />
+                    </label>
                 [% ELSE %]
-                    <label for="list_gstyes">Include tax</label> <input type="radio" id="list_gstyes" name="list_gst" value="1" />
-                    <label for="list_gstno">Don't include tax</label> <input type="radio" id="list_gstno" name="list_gst" value="0" checked="checked" />
+                    <label class="radio" for="list_gstyes">
+                        Include tax <input type="radio" id="list_gstyes" name="list_gst" value="1" />
+                    </label>
+                    <label class="radio" for="list_gstno">
+                        Don't include tax <input type="radio" id="list_gstno" name="list_gst" value="0" checked="checked" />
+                    </label>
                 [% END %]</li>
-            
-            <li><label for="invoice_gstyes" class="radio">Invoice prices:</label>
+
+            <li><label for="invoice_gstyes">Invoice prices:</label>
                 [% IF ( invoiceincgst ) %]
-                    <label for="invoice_gstyes">Include tax</label> <input type="radio" id="invoice_gstyes" name="invoice_gst" value="1" checked="checked" />
-                    <label for="invoice_gstno">Don't include tax</label> <input type="radio" id="invoice_gstno" name="invoice_gst" value="0" />
+                    <label class="radio" for="invoice_gstyes">
+                        Include tax <input type="radio" id="invoice_gstyes" name="invoice_gst" value="1" checked="checked" />
+                    </label>
+                    <label class="radio" for="invoice_gstno">
+                        Don't include tax <input type="radio" id="invoice_gstno" name="invoice_gst" value="0" />
+                    </label>
                     [% ELSE %]
-                    <label for="invoice_gstyes">Include tax</label> <input type="radio" id="invoice_gstyes" name="invoice_gst" value="1" />
-                    <label for="invoice_gstno">Don't include tax</label> <input type="radio" id="invoice_gstno" name="invoice_gst" value="0" checked="checked" />
+                    <label class="radio" for="invoice_gstyes">
+                        Include tax <input type="radio" id="invoice_gstyes" name="invoice_gst" value="1" />
+                    </label>
+                    <label class="radio" for="invoice_gstno">
+                        Don't include tax <input type="radio" id="invoice_gstno" name="invoice_gst" value="0" checked="checked" />
+                    </label>
                 [% END %]</li>
-            </ol>
+
             [% IF gst_values %]
-                <ol>
-                  <li>
-                    <label for="gst">Tax rate</label>
-                    <select name="gstrate" id="gstrate">
-                    [% FOREACH gst IN gst_values %]
-                      [% IF ( gstrate == gst.option ) %]
-                        <option value="[% gst.option %]" selected="selected">[% gst.option * 100 | format ("%.1f") %] %</option>
-                      [% ELSE %]
-                        <option value="[% gst.option %]">[% gst.option * 100 | format ("%.1f") %] %</option>
-                      [% END %]
+                <li>
+                  <label for="tax_rate">Tax rate: </label>
+                  <select name="tax_rate" id="tax_rate">
+                  [% FOREACH gst IN gst_values %]
+                    [% IF ( tax_rate == gst.option ) %]
+                      <option value="[% gst.option | html %]" selected="selected">[% gst.option * 100 | html %] %</option>
+                    [% ELSE %]
+                      <option value="[% gst.option | html %]">[% gst.option * 100 | html %] %</option>
                     [% END %]
-                    </select>
-                  </li>
-                </ol>
+                  [% END %]
+                  </select>
+                </li>
             [% ELSE %]
-                <input type="hidden" name="gstrate" value="0" />
+                <input type="hidden" name="tax_rate" value="0" />
             [% END %]
-            <ol>
-            <li><label for="discount">Discount</label>
-                <input type="text" size="6" id="discount" name="discount" value="[% discount %]" />%</li>
+            <li><label for="discount">Discount: </label>
+                <input type="text" size="6" id="discount" name="discount" value="[% discount | format ("%.1f") %]" />%</li>
             <li>
-                <label for="deliverytime">Delivery time</label>
-                <input type="text" size="2" id="deliverytime" name="deliverytime" value="[% deliverytime %]" /> days
+                <label for="deliverytime">Delivery time</label>
+                <input type="text" size="2" id="deliverytime" name="deliverytime" value="[% deliverytime | html %]" /> days
             </li>
-            <li><label for="notes">Notes</label>
-                <textarea cols="40" rows="4" id="notes" name="notes" >[% notes %]</textarea></li></ol>
+            <li><label for="notes">Notes: </label>
+                <textarea cols="40" rows="4" id="notes" name="notes" >[% notes | html %]</textarea></li>
+            </ol>
         </fieldset>
-        <fieldset class="action"><input type="button" value="Save" onclick="check(this.form);" /> [% IF ( booksellerid ) %]
-        <a class="cancel" href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% booksellerid %]">[% ELSE %]<a class="cancel" href="/cgi-bin/koha/acqui/acqui-home.pl">
+        <fieldset class="action"><input type="submit" value="Save" /> [% IF ( booksellerid ) %]
+        <a class="cancel" href="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% booksellerid | html %]">[% ELSE %]<a class="cancel" href="/cgi-bin/koha/acqui/acqui-home.pl">
         [% END %]Cancel</a></fieldset>
-        </div>
+
     </form>
 [% ELSE %]
-    <h1>[% name %]</h1>
-        <div class="yui-g">
-            <div id="supplier-company-details" class="yui-u first">
+    <h1>[% name | html %]</h1>
+        <div class="row">
+            <div id="supplier-company-details" class="col-sm-6">
                 <h2>Vendor details</h2>
-                <p><span class="label">Company name: </span>[% name %]</p>
-                <p><span class="label">Postal address: </span>[% postal %]</p>
-                <p><span class="label">Physical address: </span>[% address1 %][% address2 %][% address3 %][% address4 %]</p>
-                <p><span class="label">Phone: </span>[% phone %]</p>
-                <p><span class="label">Fax: </span>[% fax %]</p>
+                <p><span class="label">Company name: </span>[% name | html %]</p>
+                <p><span class="label">Postal address: </span>[% postal | html %]</p>
+                <p><span class="label">Physical address: </span>[% address1 | html %][% address2 | html %][% address3 | html %][% address4 | html %]</p>
+                <p><span class="label">Phone: </span>[% phone | html %]</p>
+                <p><span class="label">Fax: </span>[% fax | html %]</p>
                 [% IF ( url ) %]
-                    <p><span class="label">Website: </span><a href="[% url %]">[% url %]</a></p>
+                    <p><span class="label">Website: </span><a href="[% url | url %]">[% url | html %]</a></p>
                 [% END %]
                 [% IF ( accountnumber ) %]
-                    <p><span class="label">Account number: </span>[% accountnumber %]</p>
-                [% END %]
-            </div>
-            <div id="supplier-contact-details" class="yui-u">
-                <h2>Contact details</h2>
-                <p><span class="label">Contact name: </span>[% contact %]</p>
-                <p><span class="label">Position: </span>[% contpos %]</p>
-                <p><span class="label">Phone: </span>[% contphone %]</p>
-                <p><span class="label">Alternative phone: </span>[% contaltphone %]</p>
-                <p><span class="label">Fax: </span>[% contfax %]</p>
-                [% IF ( contemail ) %]
-                    <p><span class="label">Email: </span><a href="mailto:[% contemail %]">[% contemail %]</a></p>
+                    <p><span class="label">Account number: </span>[% accountnumber | html %]</p>
                 [% END %]
-                [% IF ( contnotes ) %]
-                    <p><span class="label">Notes: </span>[% contnotes %]</p>
+
+            <div id="supplier-ordering-information">
+            <h2>Ordering information</h2>
+                <p><strong>Vendor is: </strong>
+                        [% IF ( active ) %]
+                            Active
+                        [% ELSE %]
+                            Inactive
+                        [% END %]</p>
+                <p><strong>List prices are: </strong>[% listprice | html %]</p>
+                <p><strong>Invoice prices are: </strong>[% invoiceprice | html %]</p>
+                [% IF ( tax_rate ) %]<p><strong>Tax number registered: </strong>
+                        [% IF ( gstreg ) %]Yes[% ELSE %]No[% END %]</p>
+                <p><strong>List item price includes tax: </strong>
+                        [% IF ( listincgst ) %]Yes[% ELSE %]No[% END %]</p>
+                <p><strong>Invoice item price includes tax: </strong>
+                        [% IF ( invoiceincgst ) %]Yes[% ELSE %]No[% END %]</p>[% END %]
+                <p><strong>Discount: </strong>
+                    [% discount | format("%.1f") %] %</p>
+                <p><strong>Tax rate: </strong>
+                    [% ( tax_rate || 0 ) * 100 | html %] %</p>
+                [% IF deliverytime.defined %]
+                    <p><strong>Delivery time: </strong>
+                        [% deliverytime | html %] days</p>
                 [% END %]
+                [% IF ( notes ) %]<p><strong>Notes: </strong>
+                    [% notes | html %]</p>[% END %]
+            </div> <!-- .supplier-ordering-information -->
+            </div> <!-- /.col-sm-6 -->
+
+            <div class="col-sm-6">
+                <div class="supplier-contact-details">
+                    <h2>Contact</h2>
+                    [% FOREACH contact IN contacts %]
+                        [% INCLUDE show_contact %]
+                    [% END %]
+                </div>
+
+                <div class="subscription-details">
+                    <h2>Subscription details</h2>
+                    <p><strong>Number of subscriptions: </strong>[% subscriptioncount | html %]</p>
+                </div>
+
             </div>
+
         </div>
-        <div id="supplier-ordering-information" class="yui-g">
-        <h3>Ordering information</h3>
-            <p><strong>Vendor is: </strong>
-                    [% IF ( active ) %]
-                        Active
-                    [% ELSE %]
-                        Inactive
-                    [% END %]</p>
-            <p><strong>List prices are: </strong>[% listprice %]</p>
-            <p><strong>Invoice prices are: </strong>[% invoiceprice %]</p>
-            [% IF ( gstrate ) %]<p><strong>Tax number registered: </strong>
-                    [% IF ( gstreg ) %]Yes[% ELSE %]No[% END %]</p>
-            <p><strong>List item price includes tax: </strong>
-                    [% IF ( listincgst ) %]Yes[% ELSE %]No[% END %]</p>
-            <p><strong>Invoice item price includes tax: </strong>
-                    [% IF ( invoiceincgst ) %]Yes[% ELSE %]No[% END %]</p>[% END %]
-            <p><strong>Discount: </strong>
-                [% discount %] %</p>
-            <p><strong>Tax rate: </strong>
-                [% 0 + gstrate * 100 | format("%.1f") %]%</p>
-            [% IF deliverytime.defined %]
-                <p><strong>Delivery time: </strong>
-                    [% deliverytime %] days</p>
-            [% END %]
-            [% IF ( notes ) %]<p><strong>Notes: </strong>
-                [% notes %]</p>[% END %]
-        </div>
+
         [% IF ( contracts ) %]
-            <div id="supplier-contracts" class="yui-g">
+            <div id="supplier-contracts">
                 <h2>Contract(s)</h2>
                 <table id="contractst">
                   <thead>
                     <tr>
                         <th scope="col">Name</th>
                         <th scope="col">Description</th>
-                        <th scope="col">Start date</th>
-                        <th scope="col">End date</th>
-                        <th scope="col">&nbsp; </th>
-                        <th scope="col">&nbsp; </th>
+                        <th scope="col" class="title-string">Start date</th>
+                        <th scope="col" class="title-string">End date</th>
+                        <th scope="col">Actions</th>
                     </tr>
                   </thead>
                   <tbody>
                     [% FOREACH contract IN contracts %]
-                        [% IF ( loop.even ) %]<tr class="highlight">[% ELSE %]<tr>[% END %]
+                        <tr>
                         <td>
-                            <a href="/cgi-bin/koha/admin/aqcontract.pl?op=add_form&amp;contractnumber=[% contract.contractnumber %]&amp;booksellerid=[% contract.booksellerid %]">[% contract.contractname %]</a>
+                            <a href="/cgi-bin/koha/admin/aqcontract.pl?op=add_form&amp;contractnumber=[% contract.contractnumber | uri %]&amp;booksellerid=[% contract.booksellerid | uri %]">[% contract.contractname | html %]</a>
+                        </td>
+                        <td>[% contract.contractdescription | html %]</td>
+                        <td><span title="[% contract.contractstartdate | html %]">[% contract.contractstartdate | $KohaDates %]</span></td>
+                        <td><span title="[% contract.contractenddate | html %]">[% contract.contractenddate | $KohaDates %]</span></td>
+                        <td class="actions">
+                            <a class="btn btn-default btn-xs" href="/cgi-bin/koha/admin/aqcontract.pl?op=add_form&amp;contractnumber=[% contract.contractnumber | html %]&amp;booksellerid=[% contract.booksellerid | html %]"><i class="fa fa-pencil"></i> Edit</a>
+                            <a class="btn btn-default btn-xs" href="/cgi-bin/koha/admin/aqcontract.pl?op=delete_confirm&amp;contractnumber=[% contract.contractnumber | html %]&amp;booksellerid=[% contract.booksellerid | html %]"><i class="fa fa-trash"></i> Delete</a>
                         </td>
-                        <td>[% contract.contractdescription %]</td>
-                        <td>[% contract.contractstartdate | $KohaDates %]</td>
-                        <td>[% contract.contractenddate | $KohaDates %]</td>
-                        <td><a href="/cgi-bin/koha/admin/aqcontract.pl?op=add_form&amp;contractnumber=[% contract.contractnumber %]&amp;booksellerid=[% contract.booksellerid %]">Edit</a></td>
-                        <td><a href="/cgi-bin/koha/admin/aqcontract.pl?op=delete_confirm&amp;contractnumber=[% contract.contractnumber %]&amp;booksellerid=[% contract.booksellerid %]">Delete</a></td>
                         </tr>
                     [% END %]
                   </tbody>
@@ -282,6 +377,98 @@ if (f.company.value == "") {
 
 [% END %]
 
-</div>
-</div>
+</main>
+</div> <!-- /.col-sm-10.col-sm-push-2 -->
+
+<div class="col-sm-2 col-sm-pull-10">
+    <aside>
+        [% INCLUDE 'vendor-menu.inc' %]
+    </aside>
+</div> <!-- /.col-sm-2.col-sm-pull-10 -->
+</div> <!-- /.row -->
+[% MACRO jsinclude BLOCK %]
+    [% Asset.js("js/acquisitions-menu.js") | $raw %]
+    [% Asset.js("lib/hc-sticky.js") | $raw %]
+    [% INCLUDE 'datatables.inc' %]
+    <script>
+        function confirm_deletion() {
+            if (confirm(_("Confirm deletion of this vendor ?"))) {
+                window.location="/cgi-bin/koha/acqui/supplier.pl?booksellerid=[% booksellerid | html %]&op=delete";
+            }
+        }
+
+        function add_contact() {
+            var new_contact = $('#contact-template').clone();
+            var timestamp = new Date().getTime();
+            $(new_contact).removeAttr('id');
+            $('input, textarea', new_contact).each(function () {
+                $(this).attr('id', $(this).attr('id') + '_' + timestamp);
+            });
+            $('label', new_contact).each(function () {
+                $(this).attr('for', $(this).attr('for') + '_' + timestamp);
+            });
+            $(new_contact).insertBefore(this);
+            if ($('.supplier-contact').length === 2) { // First contact
+                $.each(['.contact_acqprimary', '.contact_serialsprimary', '.contact_orderacquisition', '.contact_claimacquisition', '.contact_claimissues'], function (idx, checkbox) {
+                    $(checkbox, new_contact).click();
+                });
+            }
+            $('input[name="contact_name"]', new_contact).focus();
+            return false;
+        }
+
+        function delete_contact(ev) {
+            $(this).parents('.supplier-contact').remove();
+            ev.preventDefault();
+        }
+
+        var Sticky;
+
+         $(document).ready(function() {
+            var contractst = $("#contractst").dataTable($.extend(true, {}, dataTablesDefaults, {
+                "aoColumnDefs": [
+                    { "aTargets": [ -1 ], "bSortable": false, "bSearchable": false },
+                    { "sType": "title-string", "aTargets" : [ "title-string" ] }
+                ],
+                'sDom': 't'
+            } ) );
+            $('body').on('click', '.delete-contact', null, delete_contact);
+            $('#add-contact').click(add_contact);
+            $('body').on('click', '.contact_acqprimary', null, function () {
+                if ($(this).is(':checked')) {
+                    $('.contact_acqprimary').filter(':checked').not(this).prop('checked', false);
+                    $('.contact_acqprimary_hidden').each(function () {
+                        $(this).val('0');
+                    });
+                }
+                $(this).next('.contact_acqprimary_hidden').val('1');
+            });
+            $('body').on('click', '.contact_serialsprimary', null, function () {
+                if ($(this).is(':checked')) {
+                    $('.contact_serialsprimary').filter(':checked').not(this).prop('checked', false);
+                    $('.contact_serialsprimary_hidden').each(function () {
+                        $(this).val('0');
+                    });
+                }
+                $(this).next('.contact_serialsprimary_hidden').val($(this).is(':checked') ? '1' : '0');
+            });
+            $('body').on('click', '.contact_orderacquisition', null, function () {
+                $(this).next('.contact_orderacquisition_hidden').val($(this).is(':checked') ? '1' : '0');
+            });
+            $('body').on('click', '.contact_claimacquisition', null, function () {
+                $(this).next('.contact_claimacquisition_hidden').val($(this).is(':checked') ? '1' : '0');
+            });
+            $('body').on('click', '.contact_claimissues', null, function () {
+                $(this).next('.contact_claimissues_hidden').val($(this).is(':checked') ? '1' : '0');
+            });
+
+            Sticky = $("#toolbar");
+            Sticky.hcSticky({
+                stickTo: "main",
+                stickyClass: "floating"
+            });
+        });
+    </script>
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]