Bug 17981: Add a preview mode for notice templates
[koha.git] / koha-tmpl / intranet-tmpl / prog / en / modules / tools / letter.tt
index a0c2c37..f2e3ef2 100644 (file)
+[% USE Koha %]
+[% USE Branches %]
+[% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Tools &rsaquo; Notices[% IF ( add_form ) %][% IF ( modify ) %] &rsaquo; Modify notice[% ELSE %] &rsaquo; Add notice[% END %][% END %][% IF ( add_validate ) %] &rsaquo; Notice added[% END %][% IF ( delete_confirm ) %] &rsaquo; Confirm Deletion[% END %]</title>
+<title>Koha &rsaquo; Tools &rsaquo; Notices[% IF ( add_form or copy_form ) %][% IF ( modify ) %] &rsaquo; Modify notice[% ELSE %] &rsaquo; Add notice[% END %][% END %][% IF ( add_validate or copy_validate) %] &rsaquo; Notice added[% END %][% IF ( delete_confirm ) %] &rsaquo; Confirm deletion[% END %]</title>
 [% INCLUDE 'doc-head-close.inc' %]
-<script type="text/javascript" src="[% themelang %]/lib/jquery/plugins/jquery.tablesorter.min.js"></script>
-       <script type="text/javascript">
-       //<![CDATA[
-$(document).ready(function() {
-       $("#lettert:has(tbody tr)").tablesorter({
-               widgets : ['zebra'],
-               sortList: [[0,0]],
-               headers: { 3: {sorter:false},4: { sorter: false }}
-       }); 
-
-    $('#branch').change(function() {
-            $('#op').val("");
-            $('#selectlibrary').submit();
-    });
-    $('#newnotice').click(function() {
-            $('#op').val("add_form");
-            return true;
-    });
-}); 
-[% IF ( add_form ) %]
-       
-    function cancel(f) {
-        $('#op').val("");
-        f.method = "get";
-        f.submit();
-    }
-
-               function isNotNull(f,noalert) {
-                       if (f.value.length ==0) {
-       return false;
-                       }
-                       return true;
-               }
-       
-               function toUC(f) {
-                       var x=f.value.toUpperCase();
-                       f.value=x;
-                       return true;
-               }
-       
-               function isNum(v,maybenull) {
-               var n = new Number(v.value);
-               if (isNaN(n)) {
-                       return false;
-                       }
-               if (maybenull==0 && v.value=='') {
-                       return false;
-               }
-               return true;
-               }
-       
-               function isDate(f) {
-                       var t = Date.parse(f.value);
-                       if (isNaN(t)) {
-                               return false;
-                       }
-               }
-       
-               function Check(f) {
-                       var ok=1;
-                       var _alertString="";
-                       var alertString2;
-/*                     if (!(isNotNull(window.document.Aform.code))) {
-                               _alertString += "\n- " + _("Code missing");
-                       }*/
-/*                     if (!(isNotNull(window.document.Aform.name))) {
-                               _alertString += "\n- " + _("Name missing");
-                       }*/
-                       if (_alertString.length==0) {
-                               document.Aform.submit();
-                       } else {
-                               alertString2  = _("Form not submitted because of the following problem(s)");
-                               alertString2 += "\n------------------------------------------------------------------------------------\n";
-                               alertString2 += _alertString;
-                               alert(alertString2);
-                       }
-               }
-               // GPL code coming from PhpMyAdmin
-               function insertValueQuery() {
-                       var myQuery = document.Aform.content;
-                       var myListBox = document.Aform.SQLfieldname;
-               
-                       if(myListBox.options.length > 0) {
-                               var chaineAj = "";
-                               var NbSelect = 0;
-                               for(var i=0; i<myListBox.options.length; i++) {
-                                       if (myListBox.options[i].selected){
-                                               NbSelect++;
-                                               if (NbSelect > 1)
-                                                       chaineAj += ", ";
-                                               chaineAj += myListBox.options[i].value;
-                                       }
-                               }
-               
-                               //IE support
-                               if (document.selection) {
-                                       myQuery.focus();
-                                       sel = document.selection.createRange();
-                                       sel.text = chaineAj;
-                                       document.Aform.insert.focus();
-                               }
-                               //MOZILLA/NETSCAPE support
-                               else if (document.Aform.content.selectionStart || document.Aform.content.selectionStart == "0") {
-                                       var startPos = document.Aform.content.selectionStart;
-                                       var endPos = document.Aform.content.selectionEnd;
-                                       var chaineSql = document.Aform.content.value;
-                                       myQuery.value = chaineSql.substring(0, startPos) +'<<'+ chaineAj+'>>' + chaineSql.substring(endPos, chaineSql.length);
-                               } else {
-                                       myQuery.value += chaineAj;
-                               }
-                       }
-               }
-       [% END %]
-               //]]>
-               </script>
+<link rel="stylesheet" type="text/css" href="[% interface %]/[% theme %]/css/datatables_[% KOHA_VERSION %].css" />
 </head>
+
 <body id="tools_letter" class="tools">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'letters-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; [% IF ( add_form ) %][% IF ( modify ) %]<a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Modify notice[% ELSE %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Add notice[% END %][% ELSE %][% IF ( add_validate ) %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Notice added[% ELSE %][% IF ( delete_confirm ) %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Confirm Deletion[% ELSE %]Notices &amp; Slips[% END %][% END %][% END %]</div>
+<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/tools/tools-home.pl">Tools</a> &rsaquo; [% IF ( add_form or copy_form) %][% IF ( modify ) %]<a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Modify notice[% ELSE %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Add notice[% END %][% ELSE %][% IF ( add_validate or copy_validate) %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Notice added[% ELSE %][% IF ( delete_confirm ) %] <a href="/cgi-bin/koha/tools/letter.pl">Notices &amp; Slips</a> &rsaquo; Confirm deletion[% ELSE %]Notices &amp; Slips[% END %][% END %][% END %]</div>
+
+<div id="preview_template" class="modal in" tabindex="-1" role="dialog" aria-labelledby="preview_template_label" aria-hidden="true">
+    <div class="modal-dialog modal-lg">
+    <div class="modal-content">
+    <div class="modal-header">
+        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+        <h3 id="preview_template_label">Preview notice template</h3>
+    </div>
+    <div class="modal-body">
+        <div id="loading"> <img src="[% interface %]/[% theme %]/img/spinner-small.gif" alt="" /> Loading </div>
+    </div>
+    <div class="modal-footer">
+        <!-- TODO <a href="#" class="btn btn-default" id="preview_template_button" role="button" data-toggle="modal">Convert using the Template Toolkit syntax</a>-->
+        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+    </div>
+    </div>
+    </div>
+</div>
 
-[% IF ( add_form ) %]<div id="doc" class="yui-t7">[% ELSE %]<div id="doc3" class="yui-t2">[% END %]
-   
-   <div id="bd">
-       <div id="yui-main">
-       <div class="yui-b">
+[% IF add_form or copy_form %]
+    <div class="main container-fluid">
+        <div class="row">
+            <div class="col-md-8 col-md-offset-2">
+[% ELSE %]
+    <div id="doc3" class="yui-t2">
+        <div id="bd">
+            <div id="yui-main">
+                <div class="yui-b">
+[% END %]
 
 [% IF ( no_op_set ) %]
+    <h1>Notices and Slips</h1>
     <form method="get" action="/cgi-bin/koha/tools/letter.pl" id="selectlibrary">
-      <input type="hidden" name="searchfield" value="[% searchfield %]" />
+      <input type="hidden" name="searchfield" value="[% searchfield | html %]" />
     [% UNLESS independant_branch %]
       <p>
         Select a library :
             <select name="branchcode" id="branch" style="width:20em;">
-                <option value="">All libraries</option>
-            [% FOREACH branchloo IN branchloop %]
-                [% IF ( branchloo.selected ) %]<option value="[% branchloo.value %]" selected="selected">[% branchloo.branchname %]</option>[% ELSE %]<option value="[% branchloo.value %]">[% branchloo.branchname %]</option>[% END %]
-            [% END %]
+                <option value="*">All libraries</option>
+                [% PROCESS options_for_libraries libraries => Branches.all( selected => branchcode ) %]
             </select>
       </p>
     [% END %]
-      <p>
-             <input type="submit" id="newnotice" value="New Notice" />
+      <div id="toolbar" class="btn-toolbar">
+          <button type="submit" class="btn btn-default btn-sm" id="newnotice"><i class="fa fa-plus"></i> New notice</button>
         <input type="hidden" id="op" name="op" />
-      </p>
+      </div>
     </form>
 
                [% IF ( search ) %]
-               <p>You Searched for <b>[% searchfield %]</b></p>
+        <p>You searched for <b>[% searchfield | html %]</b></p>
                [% END %]
                [% IF ( letter && !independant_branch) %]
             [% select_for_copy = BLOCK %]
             <select name="branchcode">
-                [% FOREACH branchloo IN branchloop %]
-                <option value="[% branchloo.value %]">[% branchloo.branchname %]</option>
+                [% FOREACH l IN Branches.all() %]
+                <option value="[% l.branchcode %]">Copy to [% l.branchname %]</option>
                 [% END %]
             </select>
             [% END %]
         [% END %]
-        <table id="lettert">
-               <thead><tr>
-                       <th>Library</th>
-                       <th>Module</th>
-                       <th>Code</th>
-                       <th>Name</th>
-                       <th>&nbsp;</th>
-                       <th>&nbsp;</th>
-                       <th>&nbsp;</th>
-               </tr></thead>
-               <tbody>
-    [% FOREACH lette IN letter %]
-        [% can_edit = lette.branchcode || !independant_branch %]
-        [% UNLESS ( loop.odd ) %]
-                       <tr class="highlight">
-        [% ELSE %]
-                       <tr>
-        [% END %]
-                               <td>[% lette.branchname || "(All libraries)" %]</td>
-                               <td>[% lette.module %]</td>
-                               <td>[% lette.code %]</td>
-                               <td>[% lette.name %]</td>
-                               <td>
-        [% IF can_edit %]
-                                       <a href="/cgi-bin/koha/tools/letter.pl?op=add_form&amp;branchcode=[% lette.branchcode %]&amp;module=[% lette.module %]&amp;code=[% lette.code %]">Edit</a>
-        [% END %]
-                               </td>
-                               <td>
-        [% IF !independant_branch || !lette.branchcode %]
-                    <form method="post" action="/cgi-bin/koha/tools/letter.pl">
-                        <input type="hidden" name="op" value="copy" />
-                                       <input type="hidden" name="oldbranchcode" value="[% lette.branchcode %]" />
+        [% IF letter %]
+          <table id="lettert">
+            <thead>
+              <tr>
+                <th>Library</th>
+                <th>Module</th>
+                <th>Code</th>
+                <th>Name</th>
+                <th class="nosort">Copy notice</th>
+                <th class="nosort">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              [% FOREACH lette IN letter %]
+                [% can_edit = lette.branchcode || !independant_branch %]
+                <tr>
+                  <td>[% IF lette.branchname %][% lette.branchname %][% ELSE %](All libraries)[% END %]</td>
+                  <td>[% lette.module %]</td>
+                  <td>[% lette.code %]</td>
+                  <td>[% lette.name %]</td>
+                  <td class="actions">
+                    [% IF !independant_branch || !lette.branchcode %]
+                      <form method="post" action="/cgi-bin/koha/tools/letter.pl">
+                        <input type="hidden" name="op" value="copy_form" />
+                        <input type="hidden" name="oldbranchcode" value="[% lette.branchcode %]" />
                         <input type="hidden" name="module" value="[% lette.module %]" />
                         <input type="hidden" name="code" value="[% lette.code %]" />
-            [% IF independant_branch %]
-                        <input type="hidden" name="branchcode" value="[% independant_branch %]" />
-            [% ELSE %]
-                        [% select_for_copy %]
-            [% END %]
-                        <input type="submit" value="Copy" />
-                    </form>
-        [% END %]
-                               </td>
-                               <td>
-        [% IF !lette.protected && can_edit %]
-                                       <a href="/cgi-bin/koha/tools/letter.pl?op=delete_confirm&amp;branchcode=[%lette.branchcode %]&amp;module=[% lette.module %]&amp;code=[% lette.code %]">Delete</a>
+                        [% IF independant_branch %]
+                          <input type="hidden" name="branchcode" value="[% independant_branch %]" />
+                        [% ELSE %]
+                          [% select_for_copy %]
+                        [% END %]
+                        <button class="btn btn-default btn-xs"><i class="fa fa-clone"></i> Copy</button>
+                      </form>
+                    [% END %]
+                  </td>
+                  <td class="actions">
+                    [% IF can_edit %]
+                      <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/letter.pl?op=add_form&amp;branchcode=[% lette.branchcode %]&amp;module=[% lette.module %]&amp;code=[% lette.code %]"><i class="fa fa-pencil"></i> Edit</a>
+                    [% END %]
+                    [% IF !lette.protected && can_edit %]
+                      <a class="btn btn-default btn-xs" href="/cgi-bin/koha/tools/letter.pl?op=delete_confirm&amp;branchcode=[%lette.branchcode %]&amp;module=[% lette.module %]&amp;code=[% lette.code %]"><i class="fa fa-trash"></i> Delete</a>
+                    [% END %]
+                  </td>
+                </tr>
+              [% END %]
+            </tbody>
+          </table>
+        [% ELSE %]
+          <div class="dialog message">
+          [% IF ( branchcode ) %]
+             <p>There are no notices for this library.</p>
+          [% ELSE %]
+              <p>There are no notices.</p>
+          [% END %]
+          </div>
         [% END %]
-                               </td>
-                       </tr>
-    [% END %]
-        </tbody>
-               </table>
 [% END %]
 
        
-[% IF ( add_form ) %]
-       
-               <form action="?" name="Aform" method="post">
-               <input type="hidden" name="op" id="op" value="add_validate" />
+[% IF add_form or copy_form %]
+<h1>[% IF ( modify ) %]Modify notice[% ELSE %]Add notice[% END %]</h1>
+
+    <div id="toolbar" class="btn-toolbar">
+        <div class="btn-group">
+            <button class="btn btn-default btn-sm" id="submit_form"><i class="fa fa-save"></i> Save</button>
+            <button class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
+            <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+                <li><a id="saveandcontinue" href="#">Save and continue editing</a></li>
+            </ul>
+        </div>
+        <a class="btn btn-default btn-sm cancel" href="/cgi-bin/koha/tools/letter.pl"><i class="fa fa-remove"></i> Cancel</a>
+    </div>
+
+        <form id="add_notice" name="Aform" method="post" enctype="multipart/form-data" class="validate">
+        [% IF add_form %]
+          <input type="hidden" name="op" id="op" value="add_validate" />
+        [% ELSE %]
+          <input type="hidden" name="op" id="op" value="copy_validate" />
+        [% END %]
+
                <input type="hidden" name="checked" value="0" />
                [% IF ( modify ) %]
                <input type="hidden" name="add" value="0" />
@@ -227,144 +163,267 @@ $(document).ready(function() {
                <input type="hidden" name="add" value="1" />
                [% END %]
                <fieldset class="rows">
-               <legend>[% IF ( modify ) %]Modify notice[% ELSE %]Add notice[% END %]</legend>
-                               <input type="hidden" name="oldbranchcode" value="[% branchcode %]" />
+            <input type="hidden" name="oldbranchcode" value="[% oldbranchcode %]" />
+            <ol>
             [% IF independant_branch %]
                 <input type="hidden" name="branchcode" value="[% independant_branch %]" />
             [% ELSE %]
-               <ol>
-                       <li>
-                               <label for="branch">Library:</label>
-                <select name="branchcode" id="branch" style="width:20em;">
-                    <option value="">All libraries</option>
-                [% FOREACH branchloo IN branchloop %]
-                    [% IF ( branchloo.selected ) %]<option value="[% branchloo.value %]" selected="selected">[% branchloo.branchname %]</option>[% ELSE %]<option value="[% branchloo.value %]">[% branchloo.branchname %]</option>[% END %]
+            <li>
+
+                [% IF adding %]
+                    <label for="branch">Library:</label>
+                    <select name="branchcode" id="branch" style="width:20em;">
+                        <option value="">All libraries</option>
+                        [% PROCESS options_for_libraries libraries => Branches.all( selected => branchcode ) %]
+                    </select>
+                [% ELSE %]
+                    <span class="label">Library:</span>
+                    <input type="hidden" id="branch" name="branchcode" value="[% branchcode %]" />
+                    [% IF ( branchcode ) %]
+                       [% Branches.GetName( branchcode ) %]
+                    [% ELSE %]
+                        All libraries
+                    [% END %]
                 [% END %]
-                </select>
-                       </li>
+            </li>
             [% END %]
                        <li>
                                <label for="module">Koha module:</label>
                                <input type="hidden" name="oldmodule" value="[% module %]" />
-               [% IF ( modify ) %]<select name="module" id="module">[% END %] [% IF ( adding ) %] <select name="module" id="module" onchange="javascript:window.location.href = unescape(window.location.pathname)+'?op=add_form&amp;module='+this.value+'&amp;content='+window.document.forms['Aform'].elements['content'].value;">[% END %]
-                                    [% IF ( catalogue ) %]
-                                    <option value="catalogue" selected="selected">Catalog</option>
+                [% IF adding  %]
+                  <select name="module" id="newmodule">
+                [% ELSE %]
+                  <select name="module" id="module">
+                [% END %]
+                                    [% IF ( module == "acquisition" ) %]
+                                      <option value="acquisition" selected="selected">Acquisition</option>
                                     [% ELSE %]
-                                    <option value="catalogue" >Catalog</option>
+                                      <option value="acquisition" >Acquisition</option>
                                     [% END %]
-                                    [% IF ( circulation ) %]
-                                    <option value="circulation" selected="selected">Circulation</option>
+                                    [% IF ( module == "catalogue" ) %]
+                                      <option value="catalogue" selected="selected">Catalog</option>
                                     [% ELSE %]
-                                    <option value="circulation">Circulation</option>
+                                      <option value="catalogue" >Catalog</option>
                                     [% END %]
-                                    [% IF ( claimacquisition ) %]
-                                    <option value="claimacquisition" selected="selected">Claim Acquisition</option>
+                                    [% IF ( module == "circulation" ) %]
+                                      <option value="circulation" selected="selected">Circulation</option>
                                     [% ELSE %]
-                                    <option value="claimacquisition">Claim Acquisition</option>
+                                      <option value="circulation">Circulation</option>
                                     [% END %]
-                                    [% IF ( claimissues ) %]
-                                    <option value="claimissues" selected="selected">Claim Serial Issue</option>
+                                    [% IF ( module == "orderacquisition" ) %]
+                                      <option value="orderacquisition" selected="selected">Order acquisition</option>
                                     [% ELSE %]
-                                    <option value="claimissues">Claim Serial Issue</option>
+                                      <option value="orderacquisition">Order acquisition</option>
                                     [% END %]
-                                    [% IF ( reserves ) %]
-                                    <option value="reserves" selected="selected">Holds</option>
+                                    [% IF ( module == "claimacquisition" ) %]
+                                      <option value="claimacquisition" selected="selected">Claim acquisition</option>
                                     [% ELSE %]
-                                    <option value="reserves">Holds</option>
+                                      <option value="claimacquisition">Claim acquisition</option>
                                     [% END %]
-                                    [% IF ( members ) %]
-                                    <option value="members" selected="selected">Members</option>
+                                    [% IF ( module == "claimissues" ) %]
+                                      <option value="claimissues" selected="selected">Claim serial issue</option>
                                     [% ELSE %]
-                                    <option value="members">Members</option>
+                                      <option value="claimissues">Claim serial issue</option>
                                     [% END %]
-                                    [% IF ( serial ) %]
-                                    <option value="serial" selected="selected">Serials (Routing List)</option>
+                                    [% IF ( module == "reserves" ) %]
+                                      <option value="reserves" selected="selected">Holds</option>
                                     [% ELSE %]
-                                    <option value="serial">Serials (Routing List)</option>
+                                      <option value="reserves">Holds</option>
                                     [% END %]
-                                    [% IF ( suggestions ) %]
-                                    <option value="suggestions" selected="selected">Suggestions</option>
+                                    [% IF ( module == "members" ) %]
+                                      <option value="members" selected="selected">Members</option>
                                     [% ELSE %]
-                                    <option value="suggestions">Suggestions</option>
+                                      <option value="members">Members</option>
                                     [% END %]
-                               </select>
-                       </li>
-                       <li>
-                               <span class="label">Code:</span>[% IF ( adding ) %]<input type="text" id="code" name="code" size="20" maxlength="20" />[% ELSE %]<input type="hidden" id="code" name="code" value="[% code %]" />[% code %][% END %]
-                       </li>
-               <li>
-                       <label for="name">Name:</label><input type="text" id="name" name="name" size="60" value="[% name %]" />
-               </li>
-               <li>
-                       <label for="is_html">HTML Message:</label>
-      [% IF is_html %]
-      <input type="checkbox" id="is_html" name="is_html" value="1" checked />
-      [% ELSE %]
-      <input type="checkbox" id="is_html" name="is_html" value="1" />
-      [% END %]
-               </li>
-               <li>
-                       <label for="title">Message Subject:</label><input type="text" id="title" name="title" size="60" value="[% title %]" />
-               </li>
-               <li>
-                       <label for="SQLfieldname">Message Body:</label>
-               </li>
-               <li>
-               <table>
-               <tr><td><select name="SQLfieldname" id="SQLfieldname" size="9">
-                       [% FOREACH SQLfieldnam IN SQLfieldname %]
-                               <option value="[% SQLfieldnam.value %]">[% SQLfieldnam.text %]</option>
-                       [% END %]
-               </select></td><td><input type="button" name="insert" value="&gt;&gt;" onclick="insertValueQuery()" title="Insert" /></td><td><textarea name="content" cols="80" rows="15">[% content %]</textarea></td></tr></table>
-
-               </li>
-               </ol>
-               </fieldset>
-               <fieldset class="action"><input type="button" value="Submit" onclick="Check(this.form)" class="button" /> <a class="cancel" href="/cgi-bin/koha/tools/letter.pl">Cancel</a></fieldset>
-      <input type="hidden" name="searchfield" value="[% searchfield %]" />
-               </form>
+                                    [% IF ( module == "serial" ) %]
+                                      <option value="serial" selected="selected">Serials (routing list)</option>
+                                    [% ELSE %]
+                                      <option value="serial">Serials (routing list)</option>
+                                    [% END %]
+                                    [% IF ( module == "suggestions" ) %]
+                                      <option value="suggestions" selected="selected">Suggestions</option>
+                                    [% ELSE %]
+                                      <option value="suggestions">Suggestions</option>
+                                    [% END %]
+                </select>
+            </li>
+            <li>
+              [% IF adding %]
+                  <label for="code" class="required">Code:</label>
+                  <input type="text" id="code" name="code" size="20" maxlength="20" value="" required="required"/>
+                  <span class="required">Required</span>
+              [% ELSE %]
+                  <span class="label">Code:</span>
+                  <input type="hidden" id="code" name="code" value="[% code %]" />
+                  [% code %]
+              [% END %]
+            </li>
+            <li>
+              <label for="name" class="required">Name:</label>
+              <input type="text" id="name" name="name" size="60" value="[% letter_name %]" required="required" />
+              <span class="required">Required</span>
+            </li>
+            [% IF code and preview_is_available%]
+                <li>
+                    <label for="name">Data for preview:</label>
+                    [% SWITCH code %]
+                    [% CASE 'CHECKIN' %]
+                        <input type="text" id="data_preview" name="data_preview" value="" placeholder="barcode" />
+                    [% CASE 'CHECKOUT' %]
+                        <input type="text" id="data_preview" name="data_preview" value="" placeholder="barcode|borrowernumber" />
+                    [% CASE 'HOLD_SLIP' %]
+                        <input type="text" id="data_preview" name="data_preview" value="" placeholder="biblionumber|borrowernumber" />
+                    [% CASE %]
+                        Not supported yet.
+                    [% END %]
+                    </li>
+            [% END %]
+        </ol>
+    </fieldset>
+        [% IF Koha.Preference('TranslateNotices') %]
+        <div style="clear:both"></div>
+            <div id="tabs">
+                <ul>
+                    <li><a href="#lang_default">Default</a></li>
+                    [% FOR language IN languages %]
+                        [% FOR sublanguage IN language.sublanguages_loop %]
+                            [% IF language.plural %]
+                                <li><a href="#lang_[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] [% sublanguage.region_description %] ([% sublanguage.rfc4646_subtag %])</a></li>
+                            [% ELSE %]
+                                <li><a href="#lang_[% sublanguage.rfc4646_subtag %]">[% sublanguage.native_description %] ([% sublanguage.rfc4646_subtag %])</a></li>
+                            [% END %]
+                        [% END %]
+                    [% END %]
+                </ul>
+        [% END %]
+
+        [% FOREACH lang IN letters.keys %]
+            <div id="lang_[% lang %]">
+        <div class="transport-types" style="clear:both">
+        [% FOR mtt IN letters.$lang.templates.keys.sort %]
+            [% SET letter = letters.$lang.templates.$mtt %]
+            <h3>
+                [% SWITCH letter.message_transport_type %]
+                [% CASE 'email' %]
+                  Email
+                [% CASE 'print' %]
+                  Print
+                [% CASE 'sms' %]
+                  SMS
+                [% CASE 'feed' %]
+                  Feed
+                [% CASE 'phone' %]
+                  Phone
+                [% CASE %]
+                  [% letter.message_transport_type %]
+                [% END %]
+            </h3>
+            [% IF letter.message_transport_type == "sms" and not Koha.Preference("SMSSendDriver") %]
+              <fieldset class="rows mtt" id="[% letter.message_transport_type %]_[% lang %]" disabled="disabled">
+                <div class="dialog message">You should enable the SMSSendDriver preference to use the SMS templates.</div>
+            [% ELSIF letter.message_transport_type == "phone" and not Koha.Preference("TalkingTechItivaPhoneNotification") %]
+              <fieldset class="rows mtt" id="[% letter.message_transport_type %]_[% lang %]" disabled="disabled">
+                <div class="dialog message">You should enable the TalkingTechItivaPhoneNotification preference to use the phone templates.</div>
+            [% ELSE %]
+              <fieldset class="rows mtt" id="[% letter.message_transport_type %]_[% lang %]">
+            [% END %]
+              <ol>
+                <li>
+                  <input type="hidden" name="message_transport_type" value="[% letter.message_transport_type %]" />
+                  <input type="hidden" name="lang" value="[% lang %]" />
+                  <label for="is_html_[% letter.message_transport_type %]_[% lang %]">HTML message:</label>
+                  [% IF letter.is_html %]
+                    <input type="checkbox" name="is_html_[% letter.message_transport_type %]" id="is_html_[% letter.message_transport_type %]_[% lang %]" value="1" checked="checked" />
+                  [% ELSE %]
+                    <input type="checkbox" name="is_html_[% letter.message_transport_type %]" id="is_html_[% letter.message_transport_type %]_[% lang %]" value="1" />
+                  [% END %]
+                </li>
+                <li>
+                  <label for="title_[% letter.message_transport_type %]_[% lang %]">Message subject:</label><input type="text" id="title_[% letter.message_transport_type %]_[% lang %]" name="title" size="60" value="[% letter.title %]" />
+                </li>
+                <li>
+                  <label for="SQLfieldname_[% letter.message_transport_type %]_[% lang %]">Message body:</label>
+                  [% IF letter.message_transport_type == 'sms' %]
+                    <span class="sms_counter" id="sms_counter_[% lang %]">[% IF letter.content && letter.content.length > 0 %][% letter.content.length %][% ELSE %]0[% END %]/160 characters</span>
+                  [% END %]
+                  <table>
+                    <tr>
+                      <td>
+                        <select name="SQLfieldname" id="SQLfieldname_[% letter.message_transport_type %]_[% lang %]" multiple="multiple" size="9">
+                          [% FOREACH SQLfieldname IN SQLfieldnames %]
+                            <option value="[% SQLfieldname.value %]">[% SQLfieldname.text %]</option>
+                          [% END %]
+                        </select>
+                      </td>
+                        <td class="actions">
+                            <button type="button" data-containerid="[% letter.message_transport_type %]_[% lang %]" class="btn btn-default btn-sm insert">Insert <i class="fa fa-long-arrow-right"></i></button>
+                        </td>
+                      <td><textarea name="content" data-lang="[% lang %]" class="content_[% letter.message_transport_type %]" id="content_[% letter.message_transport_type %]_[% lang %]" cols="80" rows="15">[% letter.content %]</textarea></td>
+                    </tr>
+                  </table>
+                </li>
+                [% IF preview_is_available %]
+                    <li>
+                        <a href="/cgi-bin/koha/svc/letters/preview" class="preview_template btn btn-default btn-xs" title="Preview this notice template" data-mtt="[% letter.message_transport_type %]" data-lang="[% lang %]"><i class="fa fa-eye"></i> Preview</a>
+                    </li>
+                [% END %]
+              </ol>
+            </fieldset>
+            [% END %]
+            </div>
+        </div> <!-- / #transport-types -->
+        [% END %]
+        [% IF Koha.Preference('TranslateNotices') %]
+        </div>
+        [% END %]
+
+        [% IF code.search('DGST') %] <span class="overdue">Warning, this is a template for a Digest, as such, any references to branch data ( e.g. branches.branchname ) will refer to the borrower's home branch.</span> [% END %]
+
+        <input type="hidden" id="redirect" name="redirect" value="" />
+        <input type="hidden" name="searchfield" value="[% searchfield %]" />
+    </form>
 [% END %]
-       
-[% IF ( add_validate ) %]
+
+[% IF ( add_validate or copy_validate) %]
        Data recorded
        <form action="[% action %]" method="post">
        <input type="submit" value="OK" />
        </form>
 [% END %]
-       
+
 [% IF ( delete_confirm ) %]
-       <div class="dialog alert"><h3>Delete Notice?</h3>
-       <table>
-        <thead>
-               <tr>
-                       <th>Library</th>
-                       <th>Module</th>
-                       <th>Code</th>
-                       <th>Name</th>
-               </tr>
-        </thead>
-               <tr>
-                       <td>[% branchname %]</td>
-                       <td>[% module %]</td>
-            <td>[% code %]</td>
-                       <td>[% name %]</td>
-               </tr>
-       </table>
-               <form action="[% action %]" method="post">
-               <input type="hidden" name="op" value="delete_confirmed">
-               <input type="hidden" name="branchcode" value="[% branchcode %]" />
-               <input type="hidden" name="code" value="[% code %]" />
-               <input type="hidden" name="module" value="[% module %]" />
-                               <input type="submit" value="Yes, Delete" class="approve" />
-                               </form>
-
-                               <form action="[% action %]" method="get">
-                                       <input type="submit" value="No, Do Not Delete" class="deny" />
-                               </form>
-               </div>
+    <div class="dialog alert">
+        <h3>Delete notice?</h3>
+        <table>
+            <thead>
+            <tr>
+                <th>Library</th>
+                <th>Module</th>
+                <th>Code</th>
+                <th>Name</th>
+            </tr>
+            </thead>
+            <tr>
+                <td>[% IF letter.branchcode %][% Branches.GetName( letter.branchcode ) %][% ELSE %](All libraries)[% END %]</td>
+                <td>[% letter.module %]</td>
+                <td>[% letter.code %]</td>
+                <td>[% letter.name %]</td>
+            </tr>
+        </table>
+            <form action="[% action %]" method="post">
+            <input type="hidden" name="op" value="delete_confirmed">
+            <input type="hidden" name="branchcode" value="[% letter.branchcode %]" />
+            <input type="hidden" name="code" value="[% letter.code %]" />
+            <input type="hidden" name="module" value="[% letter.module %]" />
+            <button type="submit" class="approve"><i class="fa fa-check"></i> Yes, delete</button>
+        </form>
 
+        <form action="[% action %]" method="get">
+            <button type="submit" class="deny"><i class="fa fa-times"></i> No, do not delete</button>
+        </form>
+    </div>
 [% END %]
-       
+
 [% IF ( delete_confirmed ) %]
        Data deleted
        <form action="[% action %]" method="post">
@@ -374,10 +433,225 @@ $(document).ready(function() {
 
 </div>
 </div>
-[% UNLESS ( add_form ) %]
+[% UNLESS add_form or copy_form %]
     <div class="yui-b noprint">
         [% INCLUDE 'tools-menu.inc' %]
     </div>
 [% END %]
 </div>
+
+[% MACRO jsinclude BLOCK %]
+    <script type="text/javascript" src="[% interface %]/[% theme %]/js/tools-menu_[% KOHA_VERSION %].js"></script>
+    [% INCLUDE 'datatables.inc' %]
+    <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.fixFloat_[% KOHA_VERSION %].js"></script>
+    <script type="text/javascript" src="[% interface %]/lib/jquery/plugins/jquery.insertatcaret_[% KOHA_VERSION %].js"></script>
+    <script type="text/javascript">
+        $(document).ready(function() {
+            [% IF add_form or copy_form %]
+                $('#toolbar').fixFloat();
+            [% END %]
+            $("#lettert:has(tbody tr)").dataTable($.extend(true, {}, dataTablesDefaults, {
+                "sDom": 't',
+                "aoColumnDefs": [
+                    { "bSortable": false, "bSearchable": false, 'aTargets': [ 'nosort' ] }
+                ],
+                "bPaginate": false
+            }));
+            [% IF no_op_set %]
+                $('#branch').change(function() {
+                    $('#op').val("");
+                    $('#selectlibrary').submit();
+                });
+                $('#newnotice').click(function() {
+                    $('#op').val("add_form");
+                    return true;
+                });
+            [% END %]
+
+            $("#newmodule").on("change",function(){
+                if( $("#branch").val() == ""){
+                    var branchcode = "*";
+                } else {
+                    var branchcode = $("#branch").val();
+                }
+                window.location.href = "/cgi-bin/koha/tools/letter.pl?op=add_form&module=" + $(this).val() + "&branchcode=" + branchcode;
+            });
+
+            $("#submit_form").click( function(event) {
+                event.preventDefault();
+                var at_least_one_exists = 0;
+                var are_valid = 1;
+                $("fieldset.mtt").each( function(){
+                    var title = $(this).find('input[name="title"]').val();
+                    var content = $(this).find('textarea[name="content"]').val();
+                    if (
+                            ( title.length == 0 && content.length > 0 )
+                         || ( title.length > 0 && content.length == 0 )
+                    ) {
+                        var mtt = $(this).find('input[name="message_transport_type"]').val();
+                        var msg = _("Please specify title and content for %s");
+                        msg = msg.replace( "%s", mtt );
+                        at_least_one_exists = 1;
+                        alert(msg);
+                        return are_valid = false;
+                    } else if ( title.length > 0 && content.length > 0 ) {
+                        at_least_one_exists = 1;
+                    }
+                } );
+                if ( ! at_least_one_exists ) {
+                    alert( _("Please fill at least one template.") );
+                    return false;
+                }
+                if ( ! are_valid ) {
+                    return false;
+                }
+
+                // Test if code already exists in DB
+                var new_lettercode = $("#code").val();
+                var new_branchcode = $("#branch").val();
+                [% IF ( add_form and code ) # IF edit %]
+                    if ( new_lettercode != '[% code %]' ) {
+                [% END %]
+                    $.ajax({
+                        data: { code: new_lettercode, branchcode: new_branchcode },
+                        type: 'GET',
+                        url: '/cgi-bin/koha/svc/letters/get/',
+                        success: function (data) {
+                             if ( data.letters.length > 0 ) {
+                                 if( new_branchcode == '' ) {
+                                     alert( _("A default letter with the code '%s' already exists.").format(new_lettercode) );
+                                 } else {
+                                     alert( _("A letter with the code '%s' already exists for '%s'.").format(new_lettercode, new_branchcode) );
+                                 }
+                                 return false;
+                             } else {
+                                 $("#add_notice").submit();
+                             }
+                        },
+                    });
+                [% IF ( add_form and code ) %]
+                    } else {
+                        $("#add_notice").submit();
+                    }
+                [% END %]
+            });
+
+            var sms_limit = 160;
+            $(".content_sms").on("keyup", function(){
+                var length = $(this).val().length;
+                var sms_counter = ("#sms_counter_" + $(this).data('lang'));
+                $(sms_counter).html(length + "/" + sms_limit + _(" characters"));
+                if ( length  > sms_limit ) {
+                    $(sms_counter).css("color", "red");
+                } else {
+                    $(sms_counter).css("color", "black");
+                }
+            });
+            $( ".transport-types" ).accordion({ collapsible: true, active:false, animate: 200 });
+            $(".insert").on("click",function(){
+                var containerid = $(this).data("containerid");
+                insertValueQuery( containerid );
+            })
+
+            $("#tabs").tabs();
+
+            $("#saveandcontinue").on("click",function(e){
+                e.preventDefault();
+                $("#redirect").val("just_save");
+                $("#submit_form").click();
+            });
+
+            $("body").on("click", ".preview_template", function(e){
+                e.preventDefault();
+                var mtt = $(this).data("mtt");
+                var lang = $(this).data("lang");
+
+                var code = $("#code").val();
+                var content = $("#content_"+mtt+"_"+lang).val();
+                var title = $("#title_"+mtt+"_"+lang).val();
+
+                var is_html = $("#is_html_"+mtt+"_"+lang).val();
+                var page = $(this).attr("href");
+                var data_preview = $("#data_preview").val();
+                page += '?code='+encodeURIComponent(code);
+                page += '&title='+encodeURIComponent(title);
+                page += '&content='+encodeURIComponent(content);
+                page += '&data_preview='+encodeURIComponent(data_preview);
+                page += '&is_html='+encodeURIComponent(is_html);
+                $("#preview_template .modal-body").load(page + " div");
+                $('#preview_template').modal('show');
+                $("#preview_template_button").attr("href", "/cgi-bin/koha/svc/letters/convert?module="+module+"&code="+code+"&mtt="+mtt+"&lang="+lang);
+            });
+            $("#preview_template").on("hidden", function(){
+                $("#preview_template_label").html("");
+                $("#preview_template .modal-body").html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/spinner-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
+            });
+            $("body").on("click", "#convert_template", function(e){
+                e.preventDefault();
+                var mtt = $(this).data("mtt");
+                var lang = $(this).data("lang");
+
+                var code = $("#code").val();
+                var content = $("#content_"+mtt+"_"+lang).val();
+                var title = $("#title_"+mtt+"_"+lang).val();
+
+                var is_html = $("#is_html_"+mtt+"_"+lang).val();
+                var page = $(this).attr("href");
+                var data_preview = $("#data_preview").val();
+                page += '?code='+encodeURIComponent(code);
+                page += '&title='+encodeURIComponent(title);
+                page += '&content='+encodeURIComponent(content);
+                page += '&data_preview='+encodeURIComponent(data_preview);
+                page += '&is_html='+encodeURIComponent(is_html);
+                $("#preview_template .modal-body").load(page + " div");
+                $('#preview_template').modal('show');
+                $("#preview_template_button").attr("href", "/cgi-bin/koha/svc/letters/convert?module="+module+"&code="+code+"&branchcode="+branchcode+"&mtt="+mtt+"&lang="+lang);
+            });
+            $("#convert_template").on("hidden", function(){
+                $("#convert_template_label").html("");
+                $("#convert_template .modal-body").html("<div id=\"loading\"><img src=\"[% interface %]/[% theme %]/img/spinner-small.gif\" alt=\"\" /> "+_("Loading")+"</div>");
+            });
+
+        });
+        [% IF add_form or copy_form %]
+            function cancel(f) {
+                $('#op').val("");
+                f.method = "get";
+                f.submit();
+            }
+
+            function isNotNull(f,noalert) {
+              if (f.value.length ==0) {
+                  return false;
+              }
+              return true;
+            }
+
+            function isNum(v,maybenull) {
+                var n = new Number(v.value);
+                if (isNaN(n)) {
+                    return false;
+                }
+                if (maybenull==0 && v.value==''){
+                  return false;
+                }
+                return true;
+            }
+            function insertValueQuery(containerid) {
+                var fieldset = $("#" + containerid);
+                var myQuery = $(fieldset).find('textarea[name="content"]');
+                var myListBox = $(fieldset).find('select[name="SQLfieldname"]');
+
+                if($(myListBox).find('option').length > 0) {
+                    $(myListBox).find('option').each( function (){
+                        if ( $(this).attr('selected') && $(this).val().length > 0 ) {
+                            $(myQuery).insertAtCaret("<<" + $(this).val() + ">>");
+                        }
+                    });
+                }
+            }
+        [% END %]
+    </script>
+[% END %]
+
 [% INCLUDE 'intranet-bottom.inc' %]