Bug 31228: Intranet coce.js is not hiding the coce-coverimg div for single-pixel...
[srvgit] / koha-tmpl / intranet-tmpl / prog / en / modules / catalogue / detail.tt
index dad9ade..06dd33e 100644 (file)
@@ -2,13 +2,13 @@
 [% USE Asset %]
 [% USE Koha %]
 [% USE KohaDates %]
+[% USE KohaPlugins %]
 [% USE AuthorisedValues %]
 [% USE Branches %]
 [% USE Biblio %]
+[% USE Price %]
 [% USE TablesSettings %]
 [% PROCESS 'i18n.inc' %]
-[% SET AdlibrisEnabled = Koha.Preference('AdlibrisCoversEnabled') %]
-[% SET AdlibrisURL = Koha.Preference('AdlibrisCoversURL') %]
 
 [% IF Koha.Preference('AmazonAssocTag') %]
     [% AmazonAssocTag = '?tag=' _ Koha.Preference('AmazonAssocTag') %]
     [% END %]
 [% END %]
 
+[% SET plugins_intranet_catalog_biblio_tabs = KohaPlugins.get_plugins_intranet_catalog_biblio_tab({ biblio => biblio, biblio_id => biblionumber }) %]
+
 [% SET footerjs = 1 %]
 [% INCLUDE 'doc-head-open.inc' %]
-<title>Koha &rsaquo; Catalog &rsaquo;
+<title>
   [% IF ( unknownbiblionumber ) %]
     Unknown record
   [% ELSE %]
     Details for [% INCLUDE 'biblio-title-head.inc' %]
-  [% END %]
+  [% END %] &rsaquo; Catalog &rsaquo; Koha
 </title>
 [% INCLUDE 'doc-head-close.inc' %]
+[% Asset.css("lib/Chocolat/css/chocolat.css") | $raw %]
 </head>
 
 <body id="catalog_detail" class="catalog">
 [% INCLUDE 'header.inc' %]
 [% INCLUDE 'cat-search.inc' %]
 
-<div id="breadcrumbs"><a href="/cgi-bin/koha/mainpage.pl">Home</a> &rsaquo; <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>  &rsaquo;
-  [% IF ( unknownbiblionumber ) %]
-    <span class="unknownrecord">Unknown record</span>
-  [% ELSE %]
-    <span class="titledetails">Details for <i>[% INCLUDE 'biblio-title.inc' %]</i></span>
-  [% END %]
-</div>
+<nav id="breadcrumbs" aria-label="Breadcrumb" class="breadcrumb">
+    <ol>
+        <li>
+            <a href="/cgi-bin/koha/mainpage.pl">Home</a>
+        </li>
+        <li>
+            <a href="/cgi-bin/koha/catalogue/search.pl">Catalog</a>
+        </li>
+
+        [% IF ( unknownbiblionumber ) %]
+            <li>
+                <a href="#" aria-current="page">
+                    Unknown record
+                </a>
+            </li>
+        [% ELSE %]
+            <li>
+                [% INCLUDE 'biblio-title.inc' link = 1 %]
+            </li>
+            <li>
+                <a href="#" aria-current="page">
+                    Details
+                </a>
+            </li>
+        [% END %]
+    </ol>
+</nav>
 
 <div class="main container-fluid">
     <div class="row">
@@ -67,6 +90,7 @@
 [% IntranetCoce    = Koha.Preference('IntranetCoce') %]
 [% CoceProviders   = Koha.Preference('CoceProviders') %]
 [% CoceHost        = Koha.Preference('CoceHost') %]
+[% SyndeticsCovers = Koha.Preference('SyndeticsEnabled') && Koha.Preference('SyndeticsCoverImages') %]
 
 [% INCLUDE 'cat-toolbar.inc' %]
     [% IF decoding_error %]
             <span class="error"><br/> Error: [% decoding_error | html %]</span>
         </div>
     [% END %]
+    [% IF analytics_error %]
+        <div>
+           <span class="analytics_error">
+            There was an error searching for analytic records, please see the logs for details.</span>
+        </div>
+    [% END %]
     [% IF ( ocoins ) %]
         <!-- COinS / OpenURL -->
         <span class="Z3988" title="[% ocoins | html %]"></span>
     [% END %]
 
-    [% IF ( AmazonCoverImages  || LocalCoverImages || AdlibrisEnabled || IntranetCoce || (Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL')) ) %]
-        [% IF ( XSLTDetailsDisplay ) %]
-            <div id="catalogue_detail_biblio" class="col-xs-9">
-        [% ELSE %]
-            <div id="catalogue_detail_biblio" class="col-xs-9">
-        [% END %]
+    [% IF ( AmazonCoverImages  || LocalCoverImages || IntranetCoce || ( SyndeticsCovers ) || (Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL')) ) %]
+        <div id="catalogue_detail_biblio" class="col-xs-9">
     [% ELSE %]
         <div id="catalogue_detail_biblio" class="col-xs-12">
     [% END %]
                 <span class="results_summary"><span class="label">Tags:</span>
                     [% FOREACH TagLoo IN TagLoop %]
                         [% IF ( CAN_user_tools_moderate_tags ) %]
-                        <a href="/cgi-bin/koha/tags/list.pl?tag=[% TagLoo.term |url %]">[% TagLoo.term | html %]</a>
+                        <a href="/cgi-bin/koha/tags/list.pl?tag=[% TagLoo.term |uri %]">[% TagLoo.term | html %]</a>
                         [% ELSE %]
                         [% TagLoo.term | html %]
                         [% END %]
                     </span>
         [% END %]
         <span id="catalogue_detail_marc_preview" class="results_summary"><span class="label">MARC preview:</span> <a href="/cgi-bin/koha/catalogue/showmarc.pl?id=[% biblionumber | uri %]&amp;viewas=html" title="MARC" class="previewMARC">Show</a></span>
+        [% IF !item_level_itypes ||  Koha.Preference("BiblioItemtypeInfo") %]
+           <span class="results_summary itemtype"><span class="label">Itemtype:</span>
+          [% IF ( !noItemTypeImages && imageurl ) %]
+              <img src="[% imageurl | html %]" alt="" />
+          [% END %]
+          [% IF ( description ) %]
+            [% description | html %]
+          [% ELSE %]
+            [% itemtype | html %]
+          [% END %]
+          </span>
+        [% END %]
 
         [% IF ( holdcount ) %]
             <span class="results_summary">
             </span>
         [% END %]
 
-        [% IF ( AmazonCoverImages  || LocalCoverImages || AdlibrisEnabled || IntranetCoce || (Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL')) ) %]
+        [% IF course_reserves %]
+            <span class="results_summary"><span class="label">Courses that have reserved this title: </span>
+            [% FOREACH c IN course_reserves %]
+                <a href="/cgi-bin/koha/course_reserves/course-details.pl?course_id=[% c.course_id | uri %]">[% c.course.course_name | html %]</a>
+                [% IF ( loop.last ) %][% ELSE %]|[% END %]
+            [% END %]
+            </span>
+        [% END %]
+
+        [% IF ( AmazonCoverImages  || LocalCoverImages || IntranetCoce || ( SyndeticsCovers ) || (Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL')) ) %]
             </div>
-            <div class="col-xs-3" id="bookcoverimg">
-                <div id="cover-slides">
+            <div class="col-xs-3 bookcoverimg">
+                <div id="biblio-cover-slider" class="cover-slider">
                     [% IF ( LocalCoverImages ) %]
-                        [% IF ( localimages.0 ) %]
+                        [% IF localimages.count %]
                             [% FOREACH image IN localimages %]
-                                [% IF image %]
-                                    <div class="cover-image local-coverimg">
-                                        <a href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image | uri %]">
-                                            <img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image | uri %]" alt="Local cover image" />
-                                        </a>
-                                        <div class="hint">Local cover image</div>
-                                    </div>
-                                [% END %]
+                                <div class="cover-image local-coverimg">
+                                    <a href="/cgi-bin/koha/catalogue/image.pl?imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
+                                        <img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" data-link="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" />
+                                    </a>
+                                    <div class="hint">Local cover image</div>
+                                </div>
                             [% END %]
                         [% END %]
                     [% END %]
 
-                    [% IF ( AdlibrisEnabled && normalized_isbn ) %]
-                        <div class="cover-image" id="adlibris-coverimg">
-                            <a href="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]">
-                                <img src="[% AdlibrisURL | url %]?isbn=[% normalized_isbn | uri %]" class="adlibris-cover-big" alt="Adlibris cover image" />
-                            </a>
-                            <div class="hint">Image from Adlibris</div>
-                        </div>
-                    [% END %]
-
                     [% IF ( AmazonCoverImages && normalized_isbn) %]
                         <div class="cover-image" id="amazon-bookcoverimg">
-                            <a href="http://www.amazon[% AmazonTld | uri %]/gp/reader/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link">
-                                <img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | html %].01.MZZZZZZZ.jpg" alt="Amazon cover image" />
+                            <a href="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.LZZZZZZZ.jpg" title="Amazon cover image">
+                                <img src="https://images-na.ssl-images-amazon.com/images/P/[% normalized_isbn | uri %].01.MZZZZZZZ.jpg" alt="Amazon cover image" data-link="http://www.amazon[% AmazonTld | uri %]/gp/reader/[% normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link"/>
                             </a>
                             <div class="hint">Image from Amazon.com</div>
                         </div>
 
                     [% IF ( IntranetCoce && CoceProviders && normalized_isbn ) %]
                         [% coce_id = normalized_ean || normalized_isbn %]
-                        <div class="cover-image" id="coce-coverimg">
+                        <div class="cover-image coce-coverimg">
                             [% IF ( coce_id ) %]
-                                <span title="[% biblionumber | url %]" class="[% coce_id | html %]" id="coce-thumbnail-preview"></span>
+                                <a title="Image from Coce" class="[% coce_id | html %]" id="coce-thumbnail-preview"></a>
                             [% ELSE %]
                                 <span class="no-image">No cover image available</span>
                             [% END %]
                         </div>
                     [% END %]
 
-                    [% IF Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %]
-                        <div class="cover-image" id="custom-coverimg">
-                            <a class="custom_cover_image" href="[% biblio.custom_cover_image_url | url %]">
-                                <img id="custom-img" alt="Custom cover image" src="[% biblio.custom_cover_image_url | url %]" />
+                    [% IF ( SyndeticsCovers ) %]
+                        [% IF ( content_identifier_exists ) %]
+                        <div class="cover-image" id="syndetics-bookcoverimg">
+                            <a href="https://secure.syndetics.com/index.aspx?isbn=[% normalized_isbn | url %]/LC.GIF&amp;client=[% Koha.Preference('SyndeticsClientCode') | url %]&amp;type=xw10&amp;upc=[% normalized_upc | url %]&amp;oclc=[% normalized_oclc | url %]" title="Syndetics cover image">
+                                <img src="https://secure.syndetics.com/index.aspx?isbn=[% normalized_isbn | url %]/[% Koha.Preference('SyndeticsCoverImageSize') | url %].GIF&amp;client=[% Koha.Preference('SyndeticsClientCode') | url %]&amp;type=xw10&amp;upc=[% normalized_upc | url %]&amp;oclc=[% normalized_oclc | url %]" alt="" class="thumbnail" />
                             </a>
-                            <div class="hint">Custom cover image</div>
+                            <div class="hint">Image from Syndetics</div>
                         </div>
+                            [% ELSE %]
+                                <span class="no-image">No cover image available</span>
+                            [% END %]
+                    [% END %]
+
+                    [% IF Koha.Preference('CustomCoverImages') && Koha.Preference('CustomCoverImagesURL') %]
+                        [% SET custom_cover_image_url = biblio.custom_cover_image_url %]
+                        [% IF custom_cover_image_url %]
+                            <div class="cover-image" id="custom-coverimg">
+                                <a class="custom_cover_image" href="[% custom_cover_image_url | url %]" title="Custom cover image">
+                                    <img id="custom-img" alt="Custom cover image" src="[% custom_cover_image_url | url %]" />
+                                </a>
+                                <div class="hint">Custom cover image</div>
+                            </div>
+                        [% END %]
                     [% END %]
-                </div> <!-- /#cover-slides -->
-            </div> <!-- /#bookcoverimg.col-xs-3 -->
+                </div> <!-- /.cover-slider -->
+            </div> <!-- /.bookcoverimg.col-xs-3 -->
         [% ELSE %]
         </div> <!-- /.col-xs-* -->
         [% END # /IF ( AmazonCoverImages, etc ) %]
 </div>
+
 <div id="bibliodetails" class="toptabs">
 
-<ul>
+<ul class="nav nav-tabs" role="tablist">
     [% IF (SeparateHoldings) %]
-        <li>
-            <a href="#holdings">[% Branches.GetLoggedInBranchname | html %] holdings ([% itemloop.size() || 0 | html %])</a>
+        <li role="presentation">
+            <a href="#holdings" aria-controls="holdings" role="tab" data-toggle="tab">[% Branches.GetLoggedInBranchname | html %] holdings ([% itemloop.size() || 0 | html %])</a>
         </li>
-        <li>
-            <a href="#otherholdings">Other holdings ([% otheritemloop.size() || 0 | html %])</a>
+        <li role="presentation">
+            <a href="#otherholdings"  aria-controls="otherholdings" role="tab" data-toggle="tab">Other holdings ([% otheritemloop.size() || 0 | html %])</a>
         </li>
     [% ELSE %]
-        <li>
-            <a href="#holdings">Holdings ([% itemloop.size() || 0 | html %])</a>
+        <li role="presentation">
+            <a href="#holdings" aria-controls="holdings" role="tab" data-toggle="tab">Holdings ([% itemloop.size() || 0 | html %])</a>
         </li>
     [% END %]
-[% IF ( MARCNOTES || notes ) %]<li><a href="#description">Descriptions ([% ( MARCNOTES.size || 1 ) | html %])</a></li>[% END %]
-[% IF ( subscriptionsnumber ) %]<li><a href="#subscriptions">Subscriptions</a></li>[% END %]
-[% IF Koha.Preference('AcquisitionDetails') %]<li><a href="#acq_details">Acquisition details</a></li>[% END %]
-[% IF suggestions.count %]<li><a href="#suggestion_details">Suggestion details</a></li>[% END %]
-[% IF ( FRBRizeEditions ) %][% IF ( XISBNS ) %]<li><a href="#editions">Editions</a></li>[% END %][% END %]
-[% IF ( LocalCoverImages ) %]
-    [% IF ( localimages || CAN_user_tools_upload_local_cover_images ) %]
-        <li>
-            <a href="#images">Images ([% localimages.size() || 0 | html %])</a>
+    [% IF Koha.Preference('EnableItemGroups') %]
+        <li role="presentation">
+            <a href="#item_groups" aria-controls="item_groups" role="tab" data-toggle="tab">Item groups</a>
         </li>
     [% END %]
+[% IF ( MARCNOTES || notes ) %]<li role="presentation"><a href="#description" aria-controls="description" role="tab" data-toggle="tab">Descriptions ([% ( MARCNOTES.size || 1 ) | html %])</a></li>[% END %]
+[% IF ComponentParts && ComponentParts.size %]<li id="components_tab" role="presentation"><a href="#components"  aria-controls="components" role="tab" data-toggle="tab">Components ([% ComponentParts.size | html %])</a></li>[% END %]
+[% IF ( subscriptionsnumber ) %]<li role="presentation"><a href="#subscriptions"  aria-controls="subscriptions" role="tab" data-toggle="tab">Subscriptions</a></li>[% END %]
+[% IF Koha.Preference('AcquisitionDetails') %]<li role="presentation"><a href="#acq_details"  aria-controls="acq_details" role="tab" data-toggle="tab">Acquisition details</a></li>[% END %]
+[% IF suggestions.count %]<li role="presentation"><a href="#suggestion_details"  aria-controls="suggestion_details" role="tab" data-toggle="tab">Suggestion details</a></li>[% END %]
+[% IF ( FRBRizeEditions ) %][% IF ( XISBNS ) %]<li role="presentation"><a href="#editions"  aria-controls="editions" role="tab" data-toggle="tab">Editions</a></li>[% END %][% END %]
+[% IF ( LocalCoverImages ) %]
+    <li role="presentation">
+        <a href="#images"  aria-controls="images" role="tab" data-toggle="tab">Images ([% localimages.count || 0 | html %])</a>
+    </li>
+[% END %]
+[% IF HTML5MediaEnabled && HTML5MediaSets.size %]
+    <li id="media_tab" role="presentation"><a href="#html5media"  aria-controls="html5media" role="tab" data-toggle="tab">Play media</a></li>
 [% END %]
-[% IF HTML5MediaEnabled && HTML5MediaSets.size %]<li id="media_tab"><a href="#html5media">Play media</a></li>[% END %]
 [% IF ( Koha.Preference('NovelistSelectStaffEnabled') && Koha.Preference('NovelistSelectStaffProfile') && Koha.Preference('NovelistSelectStaffView') == 'tab' ) %]
-    <li class="NovelistSelect" style="display:none;"><a href="#NovelistSelect">NoveList Select</a></li>
+    <li class="NovelistSelect" style="display:none;" role="presentation"><a href="#NovelistSelect"  aria-controls="NovelistSelect" role="tab" data-toggle="tab">NoveList Select</a></li>
 [% END %]
-[% FOREACH tab IN tabs %]
-    <li><a href="#[% tab.id | uri %]">[% tab.title | html %]</a></li>
+[% FOREACH plugins_intranet_catalog_biblio_tab IN plugins_intranet_catalog_biblio_tabs %]
+    <li role="presentation"><a href="#[% plugins_intranet_catalog_biblio_tab.id | uri %]"  aria-controls="[% plugins_intranet_catalog_biblio_tab.id | uri %]" role="tab" data-toggle="tab">[% plugins_intranet_catalog_biblio_tab.title | html %]</a></li>
 [% END %]
 </ul>
 
+<div class="tab-content">
 [% items_table_block_iter = 0 %]
 [% BLOCK items_table %]
     [% items_table_block_iter = items_table_block_iter + 1 %]
               [% IF CAN_user_tools_items_batchmod %]
                 <a class="itemselection_action_modify"><i class="fa fa-pencil"></i> Modify selected items</a>
               [% END %]
+              [% IF CAN_user_editcatalogue_manage_item_groups && biblio.item_groups.count %]
+                <a class="itemselection_action_item_group_set" href="#"><i class="fa fa-book"></i> Add/move to item group</a>
+                <a class="itemselection_action_item_group_unset" href="#"><i class="fa fa-unlink"></i> Remove from item group</a>
+              [% END %]
             </span>
         [% END %]
     </div>
         <thead>
             <tr>
                 [% IF (StaffDetailItemSelection) %]<th id="[% tab | html %]_checkbox" data-colname="[% tab | html %]_checkbox" class="NoSort"></th>[% END %]
+                [% IF Koha.Preference('LocalCoverImages') && ( tab == 'holdings' && itemloop_has_images || tab == 'otherholdings' && otheritemloop_has_images ) %]
+                    <th id="[% tab | html %]_cover_image" data-colname="[% tab | html %]_cover_image">Cover image</th>
+                [% END %]
                 [% IF ( item_level_itypes ) %]<th id="[% tab | html %]_itype" data-colname="[% tab | html %]_itype">Item type</th>[% END %]
-                <th id="[% tab | html %]_holdingbranch" data-colname="[% tab | html %]_holdingbranch">Current location</th>
+                <th id="[% tab | html %]_holdingbranch" data-colname="[% tab | html %]_holdingbranch">Current library</th>
                 <th id="[% tab | html %]_homebranch" data-colname="[% tab | html %]_homebranch">Home library</th>
                 [% IF ( itemdata_ccode ) %]<th id="[% tab | html %]_ccode" data-colname="[% tab | html %]_ccode">Collection</th>[% END %]
+                [% IF Koha.Preference('EnableItemGroups') %]
+                    <th id="[% tab | html %]_item_group" data-colname="[% tab | html %]_item_group">Item group</th>
+                [% END %]
                 <th id="[% tab | html %]_itemcallnumber" data-colname="[% tab | html %]_itemcallnumber">Call number</th>
                 [% IF volinfo %]
-                [% IF itemdata_publisheddate #If there is at least one published date, use it for sorting%]
-                        <th id="[% tab | html %]_enumchron" data-colname="[% tab | html %]_enumchron" class="title-string">Serial enumeration / chronology</th>
-                    [% ELSE %]
-                        <th id="[% tab | html %]_enumchron" data-colname="[% tab | html %]_enumchron">Serial enumeration / chronology</th>
-                    [% END %]
+                    <th id="[% tab | html %]_enumchron" data-colname="[% tab | html %]_enumchron">Serial enumeration / chronology</th>
                 [% END %]
                 <th id="[% tab | html %]_status" data-colname="[% tab | html %]_status">Status</th>
-                <th id="[% tab | html %]_lastseen" data-colname="[% tab | html %]_lastseen" class="title-string">Last seen</th>
-                <th id="[% tab | html %]_dateaccessioned" data-colname="[% tab | html %]_dateaccessioned" class="title-string">Date accessioned</th>
-                <th id="[% tab | html %]_datelastborrowed" data-colname="[% tab | html %]_datelastborrowed" class="title-string">Date last borrowed</th>
+                <th id="[% tab | html %]_lastseen" data-colname="[% tab | html %]_lastseen">Last seen</th>
+                <th id="[% tab | html %]_issues" data-colname="[% tab | html %]_issues">Checkouts</th>
+                <th id="[% tab | html %]_renewals" data-colname="[% tab | html %]_renewals">Renewals</th>
+                <th id="[% tab | html %]_dateaccessioned" data-colname="[% tab | html %]_dateaccessioned">Date accessioned</th>
+                <th id="[% tab | html %]_datelastborrowed" data-colname="[% tab | html %]_datelastborrowed">Date last borrowed</th>
                 <th id="[% tab | html %]_barcode" data-colname="[% tab | html %]_barcode">Barcode</th>
                 [% IF ( itemdata_uri ) %]<th id="[% tab | html %]_uri" data-colname="[% tab | html %]_uri">URL</th>[% END %]
                 [% IF ( itemdata_copynumber ) %]<th id="[% tab | html %]_copynumber" data-colname="[% tab | html %]_copynumber">Copy number</th>[% END %]
                 [% IF ( analyze ) %]<th id="[% tab | html %]_usedin" data-colname="[% tab | html %]_usedin">Used in</th><th></th>[% END %]
                 [% IF ( ShowCourseReserves ) %]<th id="[% tab | html %]_course_reserves" data-colname="[% tab | html %]_course_reserves">Course reserves</th>[% END %]
                 [% IF ( SpineLabelShowPrintOnBibDetails ) %]<th id="[% tab | html %]_spinelabel" data-colname="[% tab | html %]_spinelabel" class="NoSort">Spine label</th>[% END %]
-                [% IF ( CAN_user_editcatalogue_edit_items ) %]<th id="[% tab | html %]_actions" data-colname="[% tab | html %]_actions"class="NoSort">&nbsp;</th>[% END %]
+                [% IF ( CAN_user_editcatalogue_edit_items ) %]<th id="[% tab | html %]_actions" data-colname="[% tab | html %]_actions"class="NoSort noExport">&nbsp;</th>[% END %]
             </tr>
         </thead>
         <tbody>
             [% FOREACH item IN items %]
-                <tr>
+                <tr id="item_[% item.itemnumber | html %]" data-itemnumber="[% item.itemnumber | html %]" data-duedate="[% item.datedue | html %]">
                 [% IF (StaffDetailItemSelection) %]
                     <td style="text-align:center;vertical-align:middle">
                         <input type="checkbox" value="[% item.itemnumber | html %]" name="itemnumber" />
                     </td>
                 [% END %]
+                    [% IF Koha.Preference('LocalCoverImages') && ( tab == 'holdings' && itemloop_has_images || tab == 'otherholdings' && otheritemloop_has_images ) %]
+                        <td class="cover">
+                            <div class="bookcoverimg">
+                                <div class="cover-slider">
+                                    [% FOREACH image IN item.cover_images %]
+                                        <div class="cover-image local-coverimg">
+                                            <a href="/cgi-bin/koha/catalogue/image.pl?itemnumber=[% image.itemnumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
+                                                <img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" data-link="/cgi-bin/koha/catalogue/imageviewer.pl?itemnumber=[% item.itemnumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" />
+                                            </a>
+                                        </div>
+                                    [% END %]
+                                </div>
+                            </div>
+                        </td>
+                    [% END %]
+
                     [% IF ( item_level_itypes ) %]
                         <td class="itype">
                             [% IF !noItemTypeImages && item.imageurl %]
@@ -339,10 +423,14 @@ Note that permanent location is a code, and location may be an authval.
                         </span>
                     </td>
                     [% IF ( itemdata_ccode ) %]<td>[% item.ccode | html %]</td>[% END %]
+                    [% IF Koha.Preference('EnableItemGroups') %]<td class="item_group">[% item.object.item_group.description | html %]</td>[% END %]
                     <td class="itemcallnumber">[% IF ( item.itemcallnumber ) %] [% item.itemcallnumber | html %][% END %]</td>
                     [% IF ( volinfo ) %]
-                        <td class="enumchron">
-                            [% IF itemdata_publisheddate %]<span title="[% item.publisheddate | html %]">[% END %]
+                        [% IF itemdata_publisheddate #If there is at least one published date, use it for sorting %]
+                            <td class="enumchron" data-order="[% item.publisheddate | html %]">
+                        [% ELSE %]
+                            <td class="enumchron">
+                        [% END %]
                             [% IF ( itemdata_enumchron ) %]
                                 [% IF item.enumchron && item.serialseq %]
                                     <span class="enum">[% item.enumchron | html %]</span>
@@ -431,7 +519,7 @@ Note that permanent location is a code, and location may be an authval.
                         [% SET hold = item.first_hold %]
                         [% IF hold %]
                             [% IF hold.waitingdate %]
-                                <span class="waitingat">Waiting at [% Branches.GetName( hold.branchcode ) | html %] since [% hold.waitingdate | $KohaDates %].</span>
+                                <span class="waitingat">Waiting at [% Branches.GetName( hold.branchcode ) | html %][% IF ( hold.desk_id ) %], [% hold.desk.desk_name | html %][% END %] since [% hold.waitingdate | $KohaDates %].</span>
                                 [% IF canreservefromotherbranches AND ( hold.waitingdate OR hold.priority == 1 ) %]
                                     <span class="heldfor">Hold for:</span>
                                     [% INCLUDE 'patron-title.inc' patron=hold.borrower hide_patron_infos_if_needed=1 %]
@@ -440,19 +528,35 @@ Note that permanent location is a code, and location may be an authval.
                                 <span class="holdonitem">There is an item level hold on this item (priority = [% hold.priority | html %]).</span>
                             [% END %]
                         [% END %]
-                        [% UNLESS ( item.itemnotforloan || item.notforloan_per_itemtype || item.onloan || item.itemlost || item.withdrawn || item.damaged || item.transfertwhen || hold ) %]
-                            <span class="available">Available</span>
+
+                        [% IF item.recalled %]
+                            [% IF item.recall.waiting_date %]
+                                <span>Waiting at [% Branches.GetName( item.recall.pickup_library_id ) | html %] since [% item.recall.waiting_date | $KohaDates %]</span>
+                            [% ELSE %]
+                                [% patron_link = BLOCK %]<a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% item.recall.patron_id | uri %]">[% item.recall.patron.firstname | html %] [% item.recall.patron.surname | html %] ([% item.recall.patron.cardnumber | html %])</a>[% END %]
+                                <span>Item recalled by [% patron_link| $raw %] on [% item.recall.created_date | $KohaDates %]</span>
+                            [% END %]
+                        [% END %]
+
+                        [% UNLESS ( item.itemnotforloan || item.notforloan_per_itemtype || item.onloan || item.itemlost || item.withdrawn || item.damaged || item.transfertwhen || hold || item.recalled ) %]
+                            <span>Available</span>
                         [% END %]
 
                         [% IF ( item.restricted ) %]
                             <span class="restricted">([% item.restrictedvalue | html %])</span>
                         [% END %]
 
+                        [% IF ( item.bundle_host ) %]
+                            <span class="bundled">In bundle: [% INCLUDE 'biblio-title.inc' biblio = item.bundle_host.biblio link = 1 %]</span>
+                        [% END %]
+
                     </td>
-                    <td class="datelastseen"><span title="[% item.datelastseen | html %]">[% item.datelastseen | $KohaDates %]</span></td>
-                    <td class="dateaccessioned"><span title="[% item.dateaccessioned | html %]">[% item.dateaccessioned | $KohaDates %]</span></td>
-                    <td class="datelastborrowed"><span title="[% item.datelastborrowed | html %]">[% item.datelastborrowed | $KohaDates %]</span></td>
-                    <td><a href="/cgi-bin/koha/catalogue/moredetail.pl?type=[% item.type | uri %]&amp;itemnumber=[% item.itemnumber | uri %]&amp;biblionumber=[% item.biblionumber | uri %]&amp;bi=[% item.biblioitemnumber | uri %]#item[% item.itemnumber | uri %]">[% item.barcode | html %]</a></td>
+                    <td class="datelastseen" data-order="[% item.datelastseen | html %]">[% item.datelastseen | $KohaDates %]</td>
+                    <td class="issues" data-order="[% item.issues || 0 | html %]">[% item.issues || 0 | html %]</td>
+                    <td class="renewals" data-order="[% item.renewals || 0 | html %]">[% item.renewals || 0 | html %]</td>
+                    <td class="dateaccessioned" data-order="[% item.dateaccessioned | html %]">[% item.dateaccessioned | $KohaDates %]</td>
+                    <td class="datelastborrowed" data-order="[% item.datelastborrowed | html %]">[% item.datelastborrowed | $KohaDates %]</td>
+                    <td><a href="/cgi-bin/koha/catalogue/moredetail.pl?itemnumber=[% item.itemnumber | uri %]&amp;biblionumber=[% item.biblionumber | uri %]&amp;bi=[% item.biblioitemnumber | uri %]#item[% item.itemnumber | uri %]">[% item.barcode | html %]</a></td>
                     [% IF ( itemdata_uri ) %]
                         [% IF item.uri.split(' \| ').size > 1 %]
                             <td class="uri">
@@ -521,7 +625,19 @@ Note that permanent location is a code, and location may be an authval.
                 [% IF CAN_user_editcatalogue_edit_items %]
                     <td class="actions">
                         [% UNLESS item.cannot_be_edited %]
-                            <a class="btn btn-default btn-xs" href="/cgi-bin/koha/cataloguing/additem.pl?op=edititem&biblionumber=[% item.biblionumber | html %]&itemnumber=[% item.itemnumber | html %]#edititem"><i class="fa fa-pencil"></i> Edit</a>
+                            [% IF Koha.Preference('LocalCoverImages') OR Koha.Preference('OPACLocalCoverImages') %]
+                                <div class="btn-group">
+                                    <a  class="btn btn-default btn-xs" href="/cgi-bin/koha/cataloguing/additem.pl?op=edititem&biblionumber=[% item.biblionumber | html %]&itemnumber=[% item.itemnumber | html %]#edititem"><i class="fa fa-pencil"></i> Edit</a><a class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
+                                    <ul class="dropdown-menu pull-right">
+                                        <li><a href="/cgi-bin/koha/tools/upload-cover-image.pl?itemnumber=[% item.itemnumber | uri %]&amp;filetype=image"><i class="fa fa-upload"></i> Upload image</a></li>
+                                    </ul>
+                                </div>
+                            [% ELSE %]
+                                <a class="btn btn-default btn-xs" href="/cgi-bin/koha/cataloguing/additem.pl?op=edititem&biblionumber=[% item.biblionumber | html %]&itemnumber=[% item.itemnumber | html %]#edititem"><i class="fa fa-pencil"></i> Edit</a>
+                            [% END %]
+                        [% END %]
+                        [% IF bundlesEnabled %]
+                            <button class="btn btn-default btn-xs details-control"><i class="fa fa-folder"></i> Manage bundle ([% item.bundled | html %]|[% item.bundled_lost | html %])</button>
                         [% END %]
                     </td>
                 [% END %]
@@ -529,9 +645,30 @@ Note that permanent location is a code, and location may be an authval.
             [% END %]
         </tbody>
     </table>
+
 [% END %][%# end of block items_table %]
 
-<div id="holdings">
+[% IF Koha.Preference('EnableItemGroups') %]
+    <div role="tabpanel" class="tab-pane" id="item_groups">
+        [% IF CAN_user_editcatalogue_manage_item_groups %]
+            <div class="item_groups_table_table_controls">
+                <a href="#" class="item-group-create btn btn-default btn-xs"><i class="fa fa-plus"></i> New item group</a>
+            </div>
+        [% END %]
+        <table class="items-group-table" id="items-group-table">
+            <thead>
+                <tr>
+                    <td>Display Order</td>
+                    <td>Description</td>
+                    <td>&nbsp;</td>
+                </tr>
+            </thead>
+        </table>
+    </div>
+[% END %]
+
+
+<div role="tabpanel" class="tab-pane" id="holdings">
 
 [% IF ( Koha.Preference('NovelistSelectStaffEnabled') && Koha.Preference('NovelistSelectStaffProfile') && Koha.Preference('NovelistSelectStaffView') == 'above' ) %]
     <span class="results_summary NovelistSelect" style="display:none;">
@@ -574,7 +711,7 @@ Note that permanent location is a code, and location may be an authval.
     </div>
 
 [% IF (SeparateHoldings) %]
-    <div id="otherholdings">
+    <div role="tabpanel" class="tab-pane" id="otherholdings">
         [% IF (otheritemloop.size) %]
             [% PROCESS items_table tab="otherholdings" items=otheritemloop %]
         [% ELSE %]
@@ -583,12 +720,11 @@ Note that permanent location is a code, and location may be an authval.
     </div>
 [% END %]
 
-[% IF ( MARCNOTES || notes ) %]
+[% IF ( MARCNOTES ) %]
 
-<div id="description">
+<div role="tabpanel" class="tab-pane" id="description">
 <div class="content_set">
 
-[% IF ( MARCNOTES ) %]
     [% FOREACH MARCNOTE IN MARCNOTES %]
         <p>
         [% IF MARCNOTE.marcnote.match('^https?://\S+$') %]
@@ -597,19 +733,34 @@ Note that permanent location is a code, and location may be an authval.
             [% MARCNOTE.marcnote | html | html_line_break %]
         [% END %]
         </p>
-    [% END %]
-[% ELSE %]
-    [% IF ( notes ) %]
-        <p>[% notes | html %]</p>
-    [% END %]
 [% END %]
 </div>
 </div>
 
 [% END %]
 
+[% IF ComponentParts && ComponentParts.size %]
+<div role="tabpanel" class="tab-pane" id="components">
+    <div class="content_set">
+        <table>
+            [% FOR PART IN ComponentParts %]
+            <tr>
+                <td>
+                    [% PART | $raw %]
+                </td>
+            </tr>
+            [% END %]
+        </table>
+        [% IF ComponentParts.size == Koha.Preference('MaxComponentRecords')%]
+        <p>Only [% ComponentParts.size | html %] results are shown: <a href="/cgi-bin/koha/catalogue/search.pl?q=[% ComponentPartsQuery | url %]"/>show all component parts</a></p>
+        [% END %]
+    </div> <!-- /.content_set -->
+</div> <!-- /#components -->
+
+[% END %]
+
 [% IF ( subscriptionsnumber ) %]
-<div id="subscriptions">
+<div role="tabpanel" class="tab-pane" id="subscriptions">
 <div id="catalogue_detail_subscriptions">
     <h2>This is a serial subscription</h2>
     <p> (There are [% subscriptionsnumber | html %] subscriptions associated with this title).</p> 
@@ -618,7 +769,7 @@ Note that permanent location is a code, and location may be an authval.
                 <h3>At library: [% Branches.GetName(subscription.branchcode) || subscription.branchcode | html %]</h3>
             [% END %]
             [% IF ( subscription.closed ) %]<p>This subscription is closed.</p>[% END %]
-            [% IF ( subscription.location ) %]<p class="subscription_location">Location: [% AuthorisedValues.GetByCode( 'LOC', subscription.location ) | html %]</p>[% END %]
+            [% IF ( subscription.location ) %]<p class="subscription_location">Location: [% AuthorisedValues.GetDescriptionByKohaField( kohafield => 'items.location', authorised_value => subscription.location ) | html %]</p>[% END %]
             [% IF ( subscription.callnumber ) %]<p>Callnumber: [% subscription.callnumber | html %] </p>[% END %]
             [% IF ( subscription.subscriptionnotes ) %]<p>[% subscription.subscriptionnotes | html | html_line_break %] </p>[% END %]
             [% IF ( subscription.missinglist ) %]<p>Missing issues: [% subscription.missinglist | html %] </p>[% END %]
@@ -636,21 +787,21 @@ Note that permanent location is a code, and location may be an authval.
             [% FOREACH latestserial IN subscription.latestserials %]
                 <tr>
                     <td>[% latestserial.serialseq | html %]</td>
-                    <td><span title="[% latestserial.planneddate | html %]">[% latestserial.planneddate | $KohaDates %]</span></td>
-                    <td><span title="[% latestserial.publisheddate | html %]">[% latestserial.publisheddate | $KohaDates %]</span></td>
+                    <td data-order="[% latestserial.planneddate | html %]">[% latestserial.planneddate | $KohaDates %]</td>
+                    <td data-order="[% latestserial.publisheddate | html %]">[% latestserial.publisheddate | $KohaDates %]</td>
                     <td>
-                      [% IF ( latestserial.status1 ) %]Expected[% END %]
-                      [% IF ( latestserial.status2 ) %]Arrived[% END %]
-                      [% IF ( latestserial.status3 ) %]Late[% END %]
-                      [% IF ( latestserial.status4 ) %]Missing[% END %]
-                      [% IF ( latestserial.status41 ) %]Missing (never received)[% END %]
-                      [% IF ( latestserial.status42 ) %]Missing (sold out)[% END %]
-                      [% IF ( latestserial.status43 ) %]Missing (damaged)[% END %]
-                      [% IF ( latestserial.status44 ) %]Missing (lost)[% END %]
-                      [% IF ( latestserial.status5 ) %]Not issued[% END %]
-                      [% IF ( latestserial.status6 ) %]Delete[% END %]
-                      [% IF ( latestserial.status7 ) %]Claimed[% END %]
-                      [% IF ( latestserial.status8 ) %]Stopped[% END %]
+                      [% IF ( latestserial.status1 ) %]<span>Expected</span>[% END %]
+                      [% IF ( latestserial.status2 ) %]<span>Arrived</span>[% END %]
+                      [% IF ( latestserial.status3 ) %]<span>Late</span>[% END %]
+                      [% IF ( latestserial.status4 ) %]<span>Missing</span>[% END %]
+                      [% IF ( latestserial.status41 ) %]<span>Missing (never received)</span>[% END %]
+                      [% IF ( latestserial.status42 ) %]<span>Missing (sold out)</span>[% END %]
+                      [% IF ( latestserial.status43 ) %]<span>Missing (damaged)</span>[% END %]
+                      [% IF ( latestserial.status44 ) %]<span>Missing (lost)</span>[% END %]
+                      [% IF ( latestserial.status5 ) %]<span>Not issued</span>[% END %]
+                      [% IF ( latestserial.status6 ) %]<span>Delete</span>[% END %]
+                      [% IF ( latestserial.status7 ) %]<span>Claimed</span>[% END %]
+                      [% IF ( latestserial.status8 ) %]<span>Stopped</span>[% END %]
                     </td>
                     <td>[% latestserial.notes | html %]</td>
                 </tr>
@@ -664,7 +815,7 @@ Note that permanent location is a code, and location may be an authval.
 [% END %]
 
 [% IF Koha.Preference('AcquisitionDetails') %]
-<div id="acq_details">
+<div role="tabpanel" class="tab-pane" id="acq_details">
   [% IF orders.count %]
     <table id="orders">
       <thead>
@@ -674,13 +825,14 @@ Note that permanent location is a code, and location may be an authval.
           <th>Basket group</th>
           <th>Basket</th>
           <th>Order number</th>
-          <th class="title-string">Creation date</th>
-          <th class="title-string">Receive date</th>
+          <th>Creation date</th>
+          <th>Receive date</th>
           <th>Status</th>
           <th>Quantity</th>
+          <th title="Estimated cost tax incl. while pending, actual cost tax incl. once received">Price</th>
           <th>Internal note</th>
           <th>Subscription</th>
-          <th>Subscription callnumber</th>
+          <th>Subscription call number</th>
         </tr>
       </thead>
       <tbody>
@@ -718,18 +870,19 @@ Note that permanent location is a code, and location may be an authval.
                 [% basket.basketname | html %] ([% basket.basketno | html %])
             [% END %]</td>
             <td>[% order.ordernumber | html %]</td>
-            <td><span title="[% basket.creationdate | uri %]">[% basket.creationdate | $KohaDates%]</span></td>
-            <td><span title="[% order.datereceived | uri %]">[% order.datereceived | $KohaDates%]</span></td>
+            <td data-order="[% basket.creationdate | uri %]">[% basket.creationdate | $KohaDates%]</td>
+            <td data-order="[% order.datereceived | uri %]">[% order.datereceived | $KohaDates%]</td>
             <td>
               [% SWITCH order.orderstatus %]
-                [% CASE 'new' %]New
-                [% CASE 'ordered' %]Ordered
-                [% CASE 'partial' %]Partial
-                [% CASE 'complete' %]Complete
-                [% CASE 'cancelled' %]Cancelled
+                [% CASE 'new' %]<span>New</span>
+                [% CASE 'ordered' %]<span>Ordered</span>
+                [% CASE 'partial' %]<span>Partial</span>
+                [% CASE 'complete' %]<span>Complete</span>
+                [% CASE 'cancelled' %]<span>Cancelled</span>
               [% END %]
             </td>
             <td>[% order.quantity | html %]</td>
+            <td>[% IF ( order.unitprice_tax_included > 0 ) %][% order.unitprice_tax_included | $Price %][% ELSE %][% order.ecost_tax_included | $Price %][% END %]
             <td>[% order.order_internalnote | html %]</td>
             <td>
                 [% IF order.subscriptionid %]
@@ -752,7 +905,7 @@ Note that permanent location is a code, and location may be an authval.
 [% END %]
 
 [% IF suggestions.count %]
-    <div id="suggestion_details">
+    <div role="tabpanel" class="tab-pane" id="suggestion_details">
         [% IF nb_archived_suggestions > 0 %]
             <p>[% tnpx('pluralization', 'There is one archived suggestion.', 'There are {count} archived suggestions.', nb_archived_suggestions, { count = nb_archived_suggestions }) | $raw  %]
         [% END %]
@@ -778,8 +931,8 @@ Note that permanent location is a code, and location may be an authval.
                             [% suggestion.title | html %][% IF ( suggestion.author ) %], by [% suggestion.author | html %][% END %]</a>
                         <br />
                         [% IF ( suggestion.copyrightdate ) %]&copy; [% suggestion.copyrightdate | html %] [% END %]
-                        [% IF ( suggestion.volumedesc ) %]; Volume:<i>[% suggestion.volumedesc | html %]</i> [% END %]
-                        [% IF ( suggestion.isbn ) %]; ISBN:<i>[% suggestion.isbn | html %]</i> [% END %][% IF ( suggestion.publishercode ) %]; Published by [% suggestion.publishercode | html %] [% END %][% IF ( suggestion.publicationyear ) %] in <i>[% suggestion.publicationyear | html %]</i> [% END %][% IF ( suggestion.place ) %] in <i>[% suggestion.place | html %]</i> [% END %][% IF ( suggestion.collectiontitle ) %]; [% suggestion.collectiontitle | html %] [% END %][% IF ( suggestion.itemtype ) %]; [% AuthorisedValues.GetByCode( 'SUGGEST_FORMAT', suggestion.itemtype, 0 ) | html %] [% END %]<br />[% IF ( suggestion.note ) %]<div class="suggestion_note"><i class="fa fa-comment"></i> [% suggestion.note | html %]</div>[% END %]
+                        [% IF ( suggestion.volumedesc ) %]; Volume:<em>[% suggestion.volumedesc | html %]</em> [% END %]
+                        [% IF ( suggestion.isbn ) %]; ISBN:<em>[% suggestion.isbn | html %]</em> [% END %][% IF ( suggestion.publishercode ) %]; Published by [% suggestion.publishercode | html %] [% END %][% IF ( suggestion.publicationyear ) %] in <em>[% suggestion.publicationyear | html %]</em> [% END %][% IF ( suggestion.place ) %] in <em>[% suggestion.place | html %]</em> [% END %][% IF ( suggestion.collectiontitle ) %]; [% suggestion.collectiontitle | html %] [% END %][% IF ( suggestion.itemtype ) %]; [% AuthorisedValues.GetByCode( 'SUGGEST_FORMAT', suggestion.itemtype, 0 ) | html %] [% END %]<br />[% IF ( suggestion.note ) %]<div class="suggestion_note"><i class="fa fa-comment"></i> [% suggestion.note | html %]</div>[% END %]
                     </td>
                     <td>
                         <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% suggestion.suggestedby | uri %]">[% INCLUDE 'patron-title.inc' patron => suggestion.suggester %]</a>
@@ -800,15 +953,15 @@ Note that permanent location is a code, and location may be an authval.
                         [% suggestion.fund.budget_name | html %]
                     </td>
                     <td>
-                        [% IF    suggestion.STATUS == 'ASKED'     %]Pending
-                        [% ELSIF suggestion.STATUS == 'ACCEPTED'  %]Accepted
-                        [% ELSIF suggestion.STATUS == 'ORDERED'   %]Ordered
-                        [% ELSIF suggestion.STATUS == 'REJECTED'  %]Rejected
-                        [% ELSIF suggestion.STATUS == 'CHECKED'   %]Checked
-                        [% ELSIF suggestion.STATUS == 'AVAILABLE' %]Available
+                        [% IF    suggestion.STATUS == 'ASKED'     %]<span>Pending</span>
+                        [% ELSIF suggestion.STATUS == 'ACCEPTED'  %]<span>Accepted</span>
+                        [% ELSIF suggestion.STATUS == 'ORDERED'   %]<span>Ordered</span>
+                        [% ELSIF suggestion.STATUS == 'REJECTED'  %]<span>Rejected</span>
+                        [% ELSIF suggestion.STATUS == 'CHECKED'   %]<span>Checked</span>
+                        [% ELSIF suggestion.STATUS == 'AVAILABLE' %]<span>Available</span>
                         [% ELSIF AuthorisedValues.GetByCode( 'SUGGEST_STATUS', suggestion.STATUS ) %]
                             [% AuthorisedValues.GetByCode( 'SUGGEST_STATUS', suggestion.STATUS ) | html %]
-                        [% ELSE %]Status unknown
+                        [% ELSE %]<span>Status unknown</span>
                         [% END %]
                         [% IF suggestion.reason %]
                             <br />([% suggestion.reason | html %])
@@ -822,11 +975,11 @@ Note that permanent location is a code, and location may be an authval.
 [% END %]
 
 [% IF ( FRBRizeEditions ) %][% IF ( XISBNS ) %]
-<div id="editions"><h4>Editions</h4>
+<div role="tabpanel" class="tab-pane" id="editions"><h4>Editions</h4>
 <table>
 [% FOREACH XISBN IN XISBNS %]<tr>[% IF ( AmazonCoverImages ) %]<td><a href="http://www.amazon.com/gp/reader/[% XISBN.normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link"><img src="https://images-na.ssl-images-amazon.com/images/P/[% XISBN.normalized_isbn | html %].01._AA75_PU_PU-5_.jpg" /></a></td>[% END %]
-[% UNLESS ( item_level_itypes ) %]<td>[% IF ( noItemTypeImages ) %][% XISBN.description | html %][% ELSE %]<img src="[% XISBN.imageurl | html %]" alt="[% XISBN.description | html %]" title="[% XISBN.description | html %]">[% END %]</td>[% END %]
-<td><a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% XISBN.biblionumber | uri %]">[% XISBN.title | html %]</a> by [% XISBN.author | html %] &copy;[% XISBN.copyrightdate | html %]
+[% IF ( !item_level_itypes || Koha.Preference('BiblioItemtypeInfo') ) %]<td>[% IF ( noItemTypeImages ) %][% XISBN.description | html %][% ELSE %]<img src="[% XISBN.imageurl | html %]" alt="[% XISBN.description | html %]" title="[% XISBN.description | html %]">[% END %]</td>[% END %]
+<td><a href="/cgi-bin/koha/catalogue/detail.pl?biblionumber=[% XISBN.biblionumber | uri %]">[% XISBN.title | html %]</a> <span>by</span> [% XISBN.author | html %] &copy;[% XISBN.copyrightdate | html %]
   [% IF ( XISBN.publishercode ) %]
 [% XISBN.publishercode | html %] [% IF ( XISBN.place ) %]([% XISBN.place | html %])[% END %] [% IF ( XISBN.publicationyear ) %], [% XISBN.publicationyear | html %][% END %] [% IF ( XISBN.editionstatement ) %][% XISBN.editionstatement | html %][% END %] [% IF ( XISBN.editionresponsibility ) %][% XISBN.editionresponsibility | html %][% END %]
     [% END %]
@@ -839,15 +992,15 @@ Note that permanent location is a code, and location may be an authval.
 [% END %]
 
 [% IF ( LocalCoverImages ) %]
-    <div id="images">
-        [% IF ( localimages.0 ) %]
+    <div role="tabpanel" class="tab-pane" id="images">
+        [% IF localimages.count %]
             <p>Click on an image to view it in the image viewer</p>
             <ul class="thumbnails">
                 [% FOREACH image IN localimages %]
                     [% IF image %]
-                        <li id="imagenumber-[% image | html %]" class="thumbnail">
-                            <a href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image | uri %]">
-                                <img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image | uri %]" />
+                        <li id="imagenumber-[% image.imagenumber | html %]" class="thumbnail">
+                            <a href="/cgi-bin/koha/catalogue/imageviewer.pl?biblionumber=[% biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]">
+                                <img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" />
                             </a>
                             [% IF CAN_user_tools_upload_local_cover_images %]
                                 <a href="#" class="remove"><i class="fa fa-trash"></i> Delete image</a>
@@ -867,12 +1020,11 @@ Note that permanent location is a code, and location may be an authval.
 [% END %]
 
 [% IF ( HTML5MediaEnabled ) %]
-<div id="html5media">
+<div role="tabpanel" class="tab-pane" id="html5media">
           [% FOREACH HTML5MediaSet IN HTML5MediaSets %]
             <p>
                 [% IF HTML5MediaSet.is_youtube %]
-                    <iframe id="player" type="text/html" width="640" height="360"
-                        src="[% HTML5MediaSet.srcblock | url %]" frameborder="0"></iframe>
+                    <iframe id="player" width="640" height="360" src="[% HTML5MediaSet.srcblock | url %]"></iframe>
                 [% ELSE %]
                   <[% HTML5MediaParent | html %] controls preload=none>
                     <[% HTML5MediaSet.child | html %] src="[% HTML5MediaSet.srcblock | url %]"[% HTML5MediaSet.typeblock | html %] />
@@ -886,17 +1038,18 @@ Note that permanent location is a code, and location may be an authval.
 
 
 [% IF ( Koha.Preference('NovelistSelectStaffEnabled') && Koha.Preference('NovelistSelectStaffProfile') && Koha.Preference('NovelistSelectStaffView') == 'tab' ) %]
-    <div id="NovelistSelect" class="novelistSelect">
+    <div role="tabpanel" class="tab-pane" id="NovelistSelect" class="novelistSelect">
         <div data-novelist-novelistselect=[% normalized_isbn | html %]></div>
     </div>
 [% END %]
 
-[% FOREACH tab IN tabs %]
-    <div id="[% tab.id | html %]">
-        [% tab.content | $raw %]
+[% FOREACH plugins_intranet_catalog_biblio_tab IN plugins_intranet_catalog_biblio_tabs %]
+    <div role="tabpanel" class="tab-pane" id="[% plugins_intranet_catalog_biblio_tab.id | html %]">
+        [% plugins_intranet_catalog_biblio_tab.content | $raw %]
     </div>
 [% END %]
 
+</div><!-- /tab-content -->
 </div><!-- /bibliodetails -->
 
 <div id="export" style="margin-top: 1em;">
@@ -947,81 +1100,300 @@ Note that permanent location is a code, and location may be an authval.
 
 [% END %]
 
+<div class="modal fade" id="modal-item-group-create" tabindex="-1" role="dialog" aria-labelledby="modal-item-group-create-label">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3 id="modal-item-group-create-label"><i class="fa fa-plus"></i> Create a new item group</h3>
+            </div>
+            <form id="modal-item-group-create-form" class="validated">
+                <div class="modal-body">
+                    <fieldset>
+                        <p>
+                            <label for="item_group_description" class="required">Name: </label>
+                            <input name="description" id="modal-item-group-create-form-description" type="text" size="30" required="required" class="required" />
+                            <span class="required">Required</span>
+                        </p>
+                        <p>
+                            <label for="item_group_display_order" class="required">Display order: </label>
+                            <input name="display_order" id="modal-item-group-create-form-display_order" value="0" size="5" required="required" class="required" />
+                            <span class="required">Required</span>
+                            <br/>
+                            <span class="hint">Numbers only, item groups will be displayed in counting order</span>
+                        </p>
+                    </fieldset>
+                </div>
+                <div class="modal-footer">
+                    <button id="modal-item-group-create-submit" class="btn btn-default"><i class="fa fa-plus"></i> Submit</button>
+                    <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="modal-item-group-edit" tabindex="-1" role="dialog" aria-labelledby="modal-item-group-edit-label">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3 id="modal-item-group-edit-label"><i class='fa fa-edit'></i> Edit item group</h3>
+            </div>
+            <form id="modal-item-group-edit-form" class="validated">
+                <div class="modal-body">
+                    <fieldset>
+                        <p>
+                            <label for="item_group_description" class="required">Name: </label>
+                            <input name="description" id="modal-item-group-edit-form-description" type="text" size="30" required="required" class="required" />
+                            <span class="required">Required</span>
+                        </p>
+                        <p>
+                            <label for="item_group_display_order" class="required">Sort order: </label>
+                            <input name="display_order" id="modal-item-group-edit-form-display_order" size="5" />
+                            <span class="hint">Numbers only, item groups will be displayed in counting order</span>
+                        </p>
+                    </fieldset>
+                </div>
+                <div class="modal-footer">
+                    <button id="modal-item-group-edit-submit" class="btn btn-default"><i class='fa fa-edit'></i> Submit</button>
+                    <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="modal-item-group-delete" tabindex="-1" role="dialog" aria-labelledby="modal-item-group-delete-label">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3 id="modal-item-group-delete-label"><i class='fa fa-trash'></i> Delete item group</h3>
+            </div>
+            <div class="modal-body">
+                Are you sure you want to delete this item group?
+            </div>
+            <div class="modal-footer">
+                <button id="modal-item-group-delete-submit" class="btn btn-danger"><i class='fa fa-trash'></i> Delete</button>
+                <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="modal-item-group-set" tabindex="-1" role="dialog" aria-labelledby="modal-item-group-set-label">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3 id="modal-item-group-set-label"><i class='fa fa-book'></i> Set item group for items</h3>
+            </div>
+            <form id="modal-item-group-set-form" class="validated">
+                <div class="modal-body">
+                    <fieldset>
+                        <p>
+                            <label for="item_group" class="required">Item group: </label>
+                            <select name="item_group" id="item-group-add-form-select">
+                                [% FOREACH ig IN biblio.item_groups %]
+                                    <option value="[% ig.id | html %]">[% ig.description | html %]</option>
+                                [% END %]
+                            </select>
+                            <span class="required">Required</span>
+                        </p>
+                    </fieldset>
+                </div>
+                <div class="modal-footer">
+                    <button id="modal-item-group-set-submit" class="btn btn-default"><i class='fa fa-book'></i> Set item group</button>
+                    <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</div>
+
+<div class="modal fade" id="modal-item-group-unset" tabindex="-1" role="dialog" aria-labelledby="modal-item-group-unset-label">
+    <div class="modal-dialog">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                <h3 id="modal-item-group-unset-label"><i class='fa fa-unlink'></i> Remove item from item group</h3>
+            </div>
+            <div class="modal-body">
+                Are you sure you want to remove these item(s) from their item group(s)?
+            </div>
+            <div class="modal-footer">
+                <button id="modal-item-group-unset-submit" class="btn btn-danger"><i class='fa fa-unlink'></i> Remove</button>
+                <button class="btn btn-link" data-dismiss="modal" aria-hidden="true">Cancel</button>
+            </div>
+        </div>
+    </div>
+</div>
+
+    [% IF bundlesEnabled %]
+    <div class="modal" id="addToBundleModal" tabindex="-1" role="dialog" aria-labelledby="addToBundleLabel">
+        <form id="addToBundleForm" action="">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 id="addToBundleLabel">Add to bundle</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div id="addResult"></div>
+                        <fieldset class="rows">
+                            <ol>
+                                <li>
+                                    <label class="required" for="external_id">Item barcode: </label>
+                                    <input type="text" id="external_id" name="external_id" required="required">
+                                    <span class="required">Required</span>
+                                </li>
+                            </ol>
+                        </fieldset>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-default">Submit</button>
+                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+
+    <div class="modal" id="removeFromBundleModal" tabindex="-1" role="dialog" aria-labelledby="removeFromBundleLabel">
+        <form id="removeFromBundleForm" action="">
+            <div class="modal-dialog" role="document">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <button type="button" class="closebtn" data-dismiss="modal" aria-hidden="true">×</button>
+                        <h3 id="removeFromBundleLabel">Remove from bundle</h3>
+                    </div>
+                    <div class="modal-body">
+                        <div id="removeResult"></div>
+                        <fieldset class="rows">
+                            <ol>
+                                <li>
+                                    <label class="required" for="external_id">Item barcode: </label>
+                                    <input type="text" id="rm_external_id" name="external_id" required="required">
+                                    <span class="required">Required</span>
+                                </li>
+                            </ol>
+                        </fieldset>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="submit" class="btn btn-default">Submit</button>
+                        <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>
+                    </div>
+                </div>
+            </div>
+        </form>
+    </div>
+    [% END %]
+
 [% MACRO jsinclude BLOCK %]
     [% INCLUDE 'catalog-strings.inc' %]
     [% Asset.js("js/catalog.js") | $raw %]
+    [% Asset.js("js/recalls.js") | $raw %]
     [% Asset.js("js/coce.js") | $raw %]
+    [% Asset.js("lib/Chocolat/js/chocolat.js") | $raw %]
     <script>
         var interface = "[% interface | html %]";
         var theme = "[% theme | html %]";
         // http://www.oreillynet.com/pub/a/javascript/2003/10/21/amazonhacks.html
-        function verify_images() {
+        function verify_cover_images() {
             // Loop over each container in the template which contains covers
-            $(".cover-image").each( function( index ){
-                var div = $(this);
-                // Find the image in the container
-                var img = div.find("img")[0];
-                if( $(img).length > 0 ){
-                    if( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ){
-                        // No image loaded in the container. Remove the slide
-                        div.remove();
-                    } else {
-                        // All slides start hidden. If this is the first one, show it.
-                        if( index == 0 ){
-                            div.show();
-                        }
-                        // Check if Amazon image is present
-                        if ( div.attr("id") == "amazon-bookcoverimg"  ) {
-                            w = img.width;
-                            h = img.height;
-                            if ((w == 1) || (h == 1)) {
-                                // Amazon returned single-pixel placeholder
-                                // Remove the container
-                                div.remove();
+            $(".cover-slider").each(function(){
+                var lightbox_descriptions = [];
+                $(this).find(".cover-image").each( function( index ){
+                    var div = $(this);
+                    // Find the image in the container
+                    var img = div.find("img")[0];
+                    if( $(img).length > 0 ){
+                        var description = "";
+                        if( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ){
+                            // No image loaded in the container. Remove the slide
+                            div.remove();
+                        } else {
+                            // All slides start hidden. If this is the first one, show it.
+                            if( index == 0 ){
+                                div.show();
                             }
-                        }
-                        if( div.attr("id") == "custom-img" ){
-                            if ( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ) {
-                                // No image was loaded via the CustomCoverImages system preference
-                                // Remove the container
-                                div.remove();
+                            // Check if Amazon image is present
+                            if ( div.attr("id") == "amazon-bookcoverimg"  ) {
+                                w = img.width;
+                                h = img.height;
+                                if ((w == 1) || (h == 1)) {
+                                    // Amazon returned single-pixel placeholder
+                                    // Remove the container
+                                    div.remove();
+                                } else {
+                                    lightbox_descriptions.push(_("Amazon cover image (<a href='%s'>see the original image</a>)").format($(img).data('link')));
+                                }
+                            } else if( div.attr("id") == "custom-coverimg" ){
+                                if ( (img.complete != null) && (!img.complete) || img.naturalHeight == 0 ) {
+                                    // No image was loaded via the CustomCoverImages system preference
+                                    // Remove the container
+                                    div.remove();
+                                } else {
+                                    lightbox_descriptions.push("Custom cover image");
+                                }
+                            } else if ( div.attr("id") == "syndetics-bookcoverimg" ){
+                                    lightbox_descriptions.push(_("Syndetics cover image (<a href='%s'>see the original image</a>)").format($(img).data('link')));
                             }
-                        }
-                        if( div.attr("id") == "coce-coverimg" ){
-                            // Identify which service's image is being loaded by Coce
-                            if( $(img).attr("src").indexOf('amazon.com') >= 0 ){
-                                div.find(".hint").html(_("Coce image from Amazon.com"));
-                            } else if( $(img).attr("src").indexOf('google.com') >= 0 ){
-                                div.find(".hint").html(_("Coce image from Google Books"));
-                            } else if( $(img).attr("src").indexOf('openlibrary.org') >= 0 ){
-                                div.find(".hint").html(_("Coce image from Open Library"));
+                            else if( div.hasClass("coce-coverimg" ) ){
+                                // Identify which service's image is being loaded by Coce
+                                var coce_description;
+                                if( $(img).attr("src").indexOf('amazon.com') >= 0 ){
+                                    coce_description = ("Coce image from Amazon.com");
+                                } else if( $(img).attr("src").indexOf('google.com') >= 0 ){
+                                    coce_description = _("Coce image from Google Books");
+                                } else if( $(img).attr("src").indexOf('openlibrary.org') >= 0 ){
+                                    coce_description = _("Coce image from Open Library");
+                                }
+                                div.find(".hint").html(coce_description);
+                                lightbox_descriptions.push(coce_description);
+                            } else if ( div.attr("class") == "cover-image local-coverimg" ) {
+                                lightbox_descriptions.push(_("Local cover image (<a href='%s'>edit</a>)").format($(img).data('link')));
+                            } else {
+                                lightbox_descriptions.push(_("Cover image source unknown"));
                             }
                         }
                     }
-                }
-            });
+                });
 
-            var coverSlides = $(".cover-image");
-            if( coverSlides.length > 1 ){
-                coverSlides.each(function( index ){
-                    // If more that one slide is present, add a navigation link
-                    // for activating the slide
-                    var covernav = $("<a href=\"#\" data-num=\"" + index + "\" class=\"cover-nav\"></a>");
-                    if( index == 0 ){
-                        // Set the first navigation link as active
-                        $(covernav).addClass("nav-active");
+                // Lightbox for cover images
+                Chocolat(this.querySelectorAll('.cover-image a'), {
+                    description: function(){
+                        return lightbox_descriptions[this.settings.currentImageIndex];
                     }
-                    $(covernav).html("<i class=\"fa fa-circle\"></i>");
-                    $("#cover-slides").append( covernav );
-
                 });
-            }
 
-            if( $(".cover-image:visible").length < 1 ){
-                $("#cover-slides").remove();
-            } else {
-                $("#cover-slides").addClass("cover-slides");
-            }
+            });
+
+            $(".cover-slider").each(function(){
+                var coverSlide = this;
+                var coverImages = $(this).find(".cover-image");
+                if( coverImages.length > 1 ){
+                    coverImages.each(function( index ){
+                        // If more that one image is present, add a navigation link
+                        // for activating the slide
+                        var covernav = $("<a href=\"#\" data-num=\"" + index + "\" class=\"cover-nav\"></a>");
+                        if( index == 0 ){
+                            // Set the first navigation link as active
+                            $(covernav).addClass("nav-active");
+                        }
+                        $(covernav).html("<i class=\"fa fa-circle\"></i>");
+                        $(coverSlide).append( covernav );
+                    });
+                }
+
+                if( $(coverSlide).attr('id') == 'biblio-cover-slider' // Hide if not visible, but only for the biblio images. Images for items are only local cover images
+                    && $(coverSlide).find(".cover-image:visible").length < 1 ){
+                    $(coverSlide).remove();
+                } else {
+                    $(coverSlide).addClass("cover-slides");
+                }
+            });
 
             $("#editions img").each(function(i){
                 if ( this.src.indexOf('amazon.com') >= 0 ) {
@@ -1042,7 +1414,7 @@ Note that permanent location is a code, and location may be an authval.
             thumbnail.find("img").css("opacity", ".2");
             thumbnail.find("a.remove").html("<img style='display:inline-block' src='" + interface + "/" + theme + "/img/spinner-small.gif' alt='' />");
             $.ajax({
-                url: "/cgi-bin/koha/svc/cover_images?action=delete&biblionumber=" + biblionumber + "&imagenumber=" + imagenumber,
+                url: "/cgi-bin/koha/svc/cover_images?action=delete&imagenumber=" + imagenumber,
                 success: function(data) {
                     $(data).each( function(i) {
                         if ( this.deleted == 1 ) {
@@ -1147,10 +1519,18 @@ Note that permanent location is a code, and location may be an authval.
         [% END %]
 
         $(document).ready(function() {
-            $('#bibliodetails').tabs();
-        [% IF count == 0 and ( Koha.Preference('HTML5MediaEnabled') == 'staff' or Koha.Preference('HTML5MediaEnabled') == 'both' ) %]
-            $('#bibliodetails').tabs("option", "active", $('#media_tab').index() );
-        [% END %]
+            // Pick details tab to display by default
+            [% IF count == 0 %]
+                [% IF ( Koha.Preference('HTML5MediaEnabled') == 'staff' or Koha.Preference('HTML5MediaEnabled') == 'both' ) && HTML5MediaSets.size %]
+                    $(".nav-tabs a[href='#html5media']").tab("show");
+                [% ELSIF ComponentParts && ComponentParts.size %]
+                    $(".nav-tabs a[href='#components']").tab("show");
+                [% ELSE %]
+                    $(".nav-tabs a[href='#holdings']").tab("show");
+                [% END %]
+            [% ELSE %]
+                $(".nav-tabs a[href='#holdings']").tab("show");
+            [% END %]
             $('#search-form').focus();
             $('.thumbnails > li > .remove').click(function() {
                 var result = confirm(_("Are you sure you want to delete this cover image?"));
@@ -1194,19 +1574,20 @@ Note that permanent location is a code, and location may be an authval.
                 link = $(this).attr("href");
                 openWindow(link,"Print spine label",400,400);
              });
-             $("#cover-slides").on("click",".cover-nav", function(e){
+             $(".cover-slider").on("click",".cover-nav", function(e){
                  e.preventDefault();
+                var cover_slider = $(this).parent();
                 // Adding click handler for cover image navigation links
                 var num = $(this).data("num");
-                $(".cover-nav").removeClass("nav-active");
+                $(cover_slider).find(".cover-nav").removeClass("nav-active");
                 $(this).addClass("nav-active");
-                $(".cover-image").hide();
-                $(".cover-image").eq( num ).show();
+                $(cover_slider).find(".cover-image").hide();
+                $(cover_slider).find(".cover-image").eq( num ).show();
              });
         });
 
         $(window).load(function() {
-            verify_images();
+            verify_cover_images();
         });
     </script>
     [% IF ( Koha.Preference('NovelistSelectStaffEnabled') && Koha.Preference('NovelistSelectStaffProfile') && ( normalized_isbn || normalized_upc ) ) %]
@@ -1214,8 +1595,10 @@ Note that permanent location is a code, and location may be an authval.
     [% END %]
     [% INCLUDE 'datatables.inc' %]
     [% Asset.js("lib/jquery/plugins/jquery.dataTables.columnFilter.js") | $raw %]
-    [% INCLUDE 'strings.inc' %]
     [% INCLUDE 'columns_settings.inc' %]
+    [% INCLUDE 'js-date-format.inc' %]
+    [% INCLUDE 'js-patron-format.inc' %]
+    [% INCLUDE 'js-biblio-format.inc' %]
     [% Asset.js("js/browser.js") | $raw %]
     [% Asset.js("js/table_filters.js") | $raw %]
     <script>
@@ -1223,36 +1606,326 @@ Note that permanent location is a code, and location may be an authval.
         browser = KOHA.browser('[% searchid | html %]', parseInt(biblionumber, 10));
         browser.show();
 
+        [% IF bundlesEnabled %]
+        var bundle_settings = [% TablesSettings.GetTableSettings('catalogue', 'detail','bundle_tables','json') | $raw %];
+        var bundle_lost_value = [% Koha.Preference('BundleLostValue') | html %];
+        [% END %]
         $(document).ready(function() {
-            var ids = ['holdings_table', 'otherholdings_table'];
-            var columns_settings = [ [% TablesSettings.GetColumns('catalogue', 'detail','holdings_table','json') | $raw %], [% TablesSettings.GetColumns('catalogue', 'detail','otherholdings_table','json')  | $raw %] ];
-            for (var i in ids) {
-                var id = ids[i];
+
+            [% IF bundlesEnabled %] // Bundle handling
+            function createChild ( row, itemnumber, duedate ) {
+
+                // Toolbar
+                var bundle_toolbar = $('<div id="toolbar" class="btn-toolbar"></div>');
+                bundle_toolbar.append('<a class="btn btn-default" data-toggle="modal" data-target="#addToBundleModal" data-item="' + itemnumber + '"><i class="fa fa-plus"></i> ' + _("Add to bundle") + '</a>');
+                bundle_toolbar.append('<a class="btn btn-default" data-toggle="modal" data-target="#removeFromBundleModal" data-item="' + itemnumber + '"><i class="fa fa-minus"></i> ' + _("Remove from bundle") + '</a>');
+
+                // Disable management if there's a duedate
+                if(duedate) {
+                    bundle_toolbar.children('.btn').addClass("disabled");
+                }
+
+                // This is the table we'll convert into a DataTable
+                var bundles_table = $('<table class="display tbundle" data-itemnumber="'+itemnumber+'" id="bundle_table_'+itemnumber+'" width="100%"/>');
+
+                // Display it the child row
+                row.child( bundle_toolbar.add(bundles_table), 'bundle' ).show();
+
+                // Initialise as a DataTable
+                var bundle_table_url = "/api/v1/items/" + itemnumber + "/bundled_items?";
+                var bundle_table = bundles_table.kohaTable({
+                    "ajax": {
+                        "url": bundle_table_url
+                    },
+                    "header_filter": false,
+                    "embed": [
+                        "biblio",
+                        "return_claim.patron"
+                    ],
+                    "order": [[ 1, "asc" ]],
+                    "columnDefs": [ {
+                        "targets": [0,1,2,3],
+                        "render": function (data, type, row, meta) {
+                            if ( data && type == 'display' ) {
+                                return data.escapeHtml();
+                            }
+                            return data;
+                        }
+                    } ],
+                    "columns": [
+                        {
+                            "data": "biblio.title:biblio.subtitle:biblio.medium",
+                            "title": _("Title"),
+                            "searchable": true,
+                            "orderable": true,
+                            "render": function(data, type, row, meta) {
+                                return $biblio_to_html(row.biblio, { link: 1 });
+                            }
+                        },
+                        {
+                            "data": "biblio.author",
+                            "title": _("Author"),
+                            "searchable": true,
+                            "orderable": true,
+                        },
+                        {
+                            "data": "callnumber",
+                            "title": _("Callnumber"),
+                            "searchable": true,
+                            "orderable": true,
+                        },
+                        {
+                            "data": "external_id",
+                            "title": _("Barcode"),
+                            "searchable": true,
+                            "orderable": true,
+                        },
+                        {
+                            "data": "lost_status:last_seen_date:return_claim.patron",
+                            "title": _("Status"),
+                            "searchable": false,
+                            "orderable": true,
+                            "render": function(data, type, row, meta) {
+                                if ( row.lost_status == bundle_lost_value ) {
+                                    let out = '<span class="lost">' + _("Last seen") + ': ' + $date(row.last_seen_date) + '</span>';
+                                    if ( row.return_claim ) {
+                                        out = out + '<span class="claims_return">' + _("Claims returned by") + ': ' + $patron_to_html( row.return_claim.patron, { display_cardnumber: false, url: true } ) + '</span>';
+                                    }
+                                    return out;
+                                }
+                                else if ( row.lost_status !== 0 ) {
+                                    return '<span class="lost">' + _("Lost") + ': ' + row.lost_status + '</span>';
+                                }
+                                return '<span class="available">' + _("Present") + '</span>';
+                            }
+                        },
+                        {
+                            "data": function( row, type, val, meta ) {
+                                var result;
+                                if (duedate) {
+                                    result = '<button class="btn btn-default btn-xs remove disabled" role="button" data-itemnumber="'+row.item_id+'"><i class="fa fa-minus" aria-hidden="true"></i> '+_("Remove")+'</button>\n';
+                                } else {
+                                    result = '<button class="btn btn-default btn-xs remove" role="button" data-itemnumber="'+row.item_id+'"><i class="fa fa-minus" aria-hidden="true"></i> '+_("Remove")+'</button>\n';
+                                }
+                                return result;
+                            },
+                            "title": _("Actions"),
+                            "searchable": false,
+                            "orderable": false,
+                            "class": "noExport"
+                        }
+                    ]
+                }, bundle_settings, 1);
+                $(".tbundle").on("click", ".remove:not(.disabled)", function(){
+                    var bundle_table = $(this).closest('table');
+                    var host_itemnumber = bundle_table.data('itemnumber');
+                    var component_itemnumber = $(this).data('itemnumber');
+                    var unlink_item_url = "/api/v1/items/" + host_itemnumber + "/bundled_items/" + component_itemnumber;
+                    $.ajax({
+                        type: "DELETE",
+                        url: unlink_item_url,
+                        success: function(){
+                            bundle_table.DataTable({ 'retrieve': true }).draw(false);
+                        }
+                    });
+                });
+
+                return;
+            }
+
+            var bundle_changed;
+            var bundle_form_active;
+            $("#addToBundleModal").on("shown.bs.modal", function(e){
+                var button = $(e.relatedTarget);
+                var item_id = button.data('item');
+                $("#addResult").replaceWith('<div id="addResult"></div>');
+                $("#addToBundleForm").attr('action', '/api/v1/items/' + item_id + '/bundled_items');
+                $("#external_id").focus();
+                bundle_changed = 0;
+                bundle_form_active = item_id;
+            });
+
+            $("#addToBundleForm").submit(function(event) {
+
+                  /* stop form from submitting normally */
+                  event.preventDefault();
+
+                  /* get the action attribute from the <form action=""> element */
+                  var $form = $(this),
+                  url = $form.attr('action');
+
+                  /* Send the data using post with external_id */
+                  var posting = $.post({
+                      url: url,
+                      data: JSON.stringify({ external_id: $('#external_id').val()}),
+                      contentType: "application/json; charset=utf-8",
+                      dataType: "json"
+                  });
+
+                  /* Report the results */
+                  posting.done(function(data) {
+                      var barcode = $('#external_id').val();
+                      $('#addResult').replaceWith('<div id="addResult" class="alert alert-success">'+_("Success: Added '%s'").format(barcode)+'</div>');
+                      $('#external_id').val('').focus();
+                      bundle_changed = 1;
+                  });
+                  posting.fail(function(data) {
+                      var barcode = $('#external_id').val();
+                      if ( data.status === 409 ) {
+                          var response = data.responseJSON;
+                          if ( response.key === "PRIMARY" ) {
+                              $('#addResult').replaceWith('<div id="addResult" class="alert alert-warning">'+_("Warning: Item '%s' already attached").format(barcode)+'</div>');
+                          } else {
+                              $('#addResult').replaceWith('<div id="addResult" class="alert alert-danger">'+_("Failure: Item '%s' belongs to another bundle").format(barcode)+'</div>');
+                          }
+                      } else if ( data.status === 404 ) {
+                          $('#addResult').replaceWith('<div id="addResult" class="alert alert-danger">'+_("Failure: Item '%s' not found").format(barcode)+'</div>');
+                      } else {
+                          $('#addResult').replaceWith('<div id="addResult" class="alert alert-danger">'+_("Failure: Check the logs for details")+'</div>');
+                      }
+                      $('#external_id').val('').focus();
+                  });
+            });
+
+            $("#addToBundleModal").on("hidden.bs.modal", function(e){
+                if ( bundle_changed ) {
+                    $('#bundle_table_'+bundle_form_active).DataTable({ 'retrieve': true }).ajax.reload();
+                }
+                bundle_form_active = 0;
+                bundle_changed = 0;
+            });
+
+            $("#removeFromBundleModal").on("shown.bs.modal", function(e){
+                var button = $(e.relatedTarget);
+                var item_id = button.data('item');
+                $("#removeResult").replaceWith('<div id="removeResult"></div>');
+                $("#removeFromBundleForm").attr('action', '/api/v1/items/' + item_id + '/bundled_items/');
+                $("#rm_external_id").focus();
+                bundle_changed = 0;
+                bundle_form_active = item_id;
+            });
+
+            $("#removeFromBundleForm").submit(function(event) {
+
+                /* stop form from submitting normally */
+                event.preventDefault();
+
+                /* get the action attribute from the <form action=""> element */
+                var $form = $(this),
+                url = $form.attr('action');
+
+                var barcode = $('#rm_external_id').val();
+
+                /* Fetch itemnumber using rm_external_id */
+                var itemReq = $.get('/api/v1/items', { q: JSON.stringify({
+                    external_id: barcode
+                }) }, null, "json");
+
+                var itemnumber;
+                itemReq.done(function(data) {
+                    if (data.length === 1) {
+                        itemnumber = data[0].item_id;
+
+                        /* Remove link using fetch itemnumber */
+                        var deleteReq = $.ajax( url + itemnumber, {
+                            type : 'DELETE'
+                        });
+
+                        /* Report the results */
+                        deleteReq.done(function(data) {
+                            var barcode = $('#rm_external_id').val();
+                            $('#removeResult').replaceWith('<div id="removeResult" class="alert alert-success">'+_("Success: Removed '%s'").format(barcode)+'</div>');
+                            $('#rm_external_id').val('').focus();
+                            bundle_changed = 1;
+                        });
+                        deleteReq.fail(function(data) {
+                            var barcode = $('#rm_external_id').val();
+                            if ( data.status === 409 ) {
+                                var response = data.responseJSON;
+                                if ( response.key === "PRIMARY" ) {
+                                    $('#removeResult').replaceWith('<div id="removeResult" class="alert alert-warning">'+_("Warning: Item '%s' already attached").format(barcode)+'</div>');
+                                } else {
+                                    $('#removeResult').replaceWith('<div id="removeResult" class="alert alert-danger">'+_("Failure: Item '%s' belongs to another bundle").format(barcode)+'</div>');
+                                }
+                            } else if ( data.status === 404 ) {
+                                $('#addResult').replaceWith('<div id="addResult" class="alert alert-danger">'+_("Failure: Item '%s' not found").format(barcode)+'</div>');
+                            } else {
+                                $('#removeResult').replaceWith('<div id="removeResult" class="alert alert-danger">'+_("Failure: Check the logs for details")+'</div>');
+                            }
+                            $('#rm_external_id').val('').focus();
+                        });
+                    } else {
+                        $('#removeResult').replaceWith('<div id="removeResult" class="alert alert-danger">'+_("Failed: Barcode matched more than one item '%s'").format(barcode)+'</div>');
+                    }
+                });
+                itemReq.fail(function(data) {
+                     $('#removeResult').replaceWith('<div id="removeResult" class="alert alert-danger">'+_("Failed: Item not found '%s'").format(barcode)+'</div>');
+                    $('#rm_external_id').val('').focus();
+
+                });
+            });
+
+            $("#removeFromBundleModal").on("hidden.bs.modal", function(e){
+                if ( bundle_changed ) {
+                    $('#bundle_table_'+bundle_form_active).DataTable({ 'retrieve': true }).ajax.reload();
+                }
+                bundle_form_active = 0;
+                bundle_changed = 0;
+            });
+            // End bundle handling
+            [% END %]
+
+            var table_names = [ 'holdings_table', 'otherholdings_table' ];
+            var table_settings = [ [% TablesSettings.GetTableSettings('catalogue', 'detail','holdings_table','json') | $raw %], [% TablesSettings.GetTableSettings('catalogue', 'detail','otherholdings_table','json')  | $raw %] ];
+            var has_images = [ "[% itemloop_has_images | html %]", "[% otheritemloop_has_images | html %]" ];
+            table_names.forEach( function( table_name, index ) {
+                if ( !has_images[index] ) {
+                    table_settings[index].columns.splice(1,1);
+                }
                 var dt_parameters = {
                     'sDom': 't',
                     'bPaginate': false,
                     'bAutoWidth': false,
-                    "aoColumnDefs": [
-                        { "bSortable": false, "bSearchable": false, 'aTargets': [ 'NoSort' ] },
-                        { "sType": "title-string", "aTargets" : [ "title-string" ] }
-                    ],
                     "bKohaColumnsUseNames": true,
                     "sDom": 'C<"top pager"ilpfB><"#filter_c">tr<"bottom pager"ip>',
                 };
-                var table = KohaTable(id, dt_parameters, columns_settings[i], 'with_filters');
-            }
+                var table = KohaTable( table_name, dt_parameters, table_settings[index], 'with_filters' );
+
+                [% IF bundlesEnabled %]
+                // Add event listener for opening and closing bundle details
+                $('#' + table_name + ' tbody').on('click', 'button.details-control', function () {
+                    var button = $(this);
+                    var tr = button.closest('tr');
+                    var dTable = button.closest('table').DataTable({ 'retrieve': true });
+
+                    var itemnumber = tr.data('itemnumber');
+                    var duedate = tr.data('duedate');
+                    var row = dTable.row( tr );
+
+                    if ( row.child.isShown() ) {
+                        // This row is already open - close it
+                        row.child.hide();
+                        tr.removeClass('shown');
+                        button.removeClass('active');
+                    }
+                    else {
+                        // Open this row
+                        createChild(row, itemnumber, duedate);
+                        tr.addClass('shown');
+                        button.addClass('active');
+                    }
+                } );
+                [% END %]
+            });
 
             [% IF Koha.Preference('AcquisitionDetails') %]
-                var columns_settings = [% TablesSettings.GetColumns('catalogue', 'detail', 'acquisitiondetails-table', 'json') %];
+                var table_settings = [% TablesSettings.GetTableSettings('catalogue', 'detail', 'acquisitiondetails-table', 'json') | $raw %];
                 var acquisitiondetails_table = KohaTable("orders", {
                     "sDom": 'C<"top pager"ilpfB><"#filter_c">tr<"bottom pager"ip>',
                     'bPaginate': false,
                     'bAutoWidth': false,
                     "aaSorting": [[ 4, "desc" ]],
-                    "aoColumnDefs": [
-                        { "aTargets": "title-string", "sType": "title-string" }
-                    ]
-                }, columns_settings);
+                }, table_settings);
             [% END %]
 
             [% IF suggestions.count %]
@@ -1264,7 +1937,262 @@ Note that permanent location is a code, and location may be an authval.
                     "sPaginationType": "full"
                 }));
             [% END %]
+
         });
+
+        [% IF (found1) %]
+            $(document).ready(function() {
+                var search_index = localStorage.getItem("cat_search_pulldown_selection");
+                var search_value = localStorage.getItem("searchbox_value");
+                if ( search_index ){ $('#cat-search-block select.advsearch').val(search_index)};
+                if ( search_value ){ $('#cat-search-block #search-form').val(search_value)};
+            });
+        [% END %]
+
+        [% IF Koha.Preference('EnableItemGroups') %]
+            // Load item groups table
+            var itemGroupsTable = KohaTable("items-group-table", {
+                "bAutoWidth": false,
+                'sDom': '<"top pager"ilp>t<"bottom pager"ip>r',
+                "aoColumns": [
+                    {
+                        "mDataProp": function( oObj ) {
+                            return oObj.display_order;
+                        },
+                    },
+                    {
+                        "mDataProp": function( oObj ) {
+                            return oObj.description;
+                        },
+                    },
+                    {
+                        "mDataProp": function( oObj ) {
+                            [% IF CAN_user_editcatalogue_manage_item_groups %]
+                                return `<button class='item-group-edit btn btn-default btn-xs' data-item-group-id='${oObj.item_group_id}'>
+                                    <i class='fa fa-edit'></i> ${_("Edit")}
+                                </button>`
+                                + '&nbsp'
+                                + `<button class='item-group-delete btn btn-default btn-xs' data-item-group-id='${oObj.item_group_id}'>
+                                    <i class='fa fa-trash'></i> ${('Delete')}
+                                </button>`;
+                            [% ELSE %]
+                                return "";
+                            [% END %]
+                        },
+                    },
+                ],
+                "bPaginate": false,
+                "bProcessing": true,
+                "bServerSide": false,
+                "sAjaxSource": `/api/v1/biblios/${biblionumber}/item_groups?_per_page=-1`,
+                "sAjaxDataProp": "",
+                "fnServerData": function ( sSource, aoData, fnCallback ) {
+                    $.getJSON( sSource, aoData, function (json) {
+                        fnCallback(json)
+                    } );
+                },
+            });
+
+            // Create new item groups
+            $('.item-group-create').on('click', function(){
+                $('#modal-item-group-create-form-description').val("");
+                $('#modal-item-group-create-submit').removeAttr('disabled');
+                $('#modal-item-group-create').modal('show');
+            });
+
+            $("#modal-item-group-create-form").validate({
+                submitHandler: function(form) {
+                    $.ajax({
+                        url: `/api/v1/biblios/${biblionumber}/item_groups`,
+                        headers: { "x-koha-embed": "items" },
+                        success: function(item_groups){
+                            $('#modal-item-group-create-submit').attr('disabled', 'disabled');
+
+                            var settings = {
+                              "url": `/api/v1/biblios/${biblionumber}/item_groups`,
+                              "method": "POST",
+                              "headers": {
+                                "Content-Type": "application/json"
+                              },
+                              "data": JSON.stringify(
+                                  {
+                                      "description": $("#modal-item-group-create-form-description").val(),
+                                      "display_order": $("#modal-item-group-create-form-display_order").val(),
+                                  }
+                              ),
+                            };
+
+                            $.ajax(settings)
+                            .done(function (response) {
+                                $('#item-group-add-form-select').append($('<option>', {
+                                    value: response.item_group_id,
+                                    text: response.description
+                                }));
+
+                                $('#modal-item-group-create').modal('hide');
+                                if ( item_groups.length == 0 ) {
+                                    // This bib has no previous item groups, reload the page
+                                    window.location.replace(`/cgi-bin/koha/catalogue/detail.pl?biblionumber=${biblionumber}`);
+                                } else {
+                                    // Has other item groups, just reload the table
+                                    itemGroupsTable.api().ajax.reload();
+                                }
+                            })
+                            .fail(function(err) {
+                                var message = err.responseJSON.error;
+                                alert(message);
+                            });
+                        }
+                    });
+                }
+            });
+
+            $('#modal-item-group-create').on('shown.bs.modal', function () {
+                $('#modal-item-group-create-form-description').focus();
+            })
+
+            // Edit existing item groups
+            $('body').on( 'click', '.item-group-edit', function(){
+                const item_group_id = $(this).data('item-group-id');
+                const url = `/api/v1/biblios/${biblionumber}/item_groups/${item_group_id}`;
+                $.get( url, function( data ) {
+                    $('#modal-item-group-edit-form-description').val( data.description );
+                    $('#modal-item-group-edit-form-display_order').val( data.display_order );
+                    $('#modal-item-group-edit-submit').data('item-group-id', item_group_id );
+                    $('#modal-item-group-edit-submit').removeAttr('disabled');
+                    $('#modal-item-group-edit').modal('show');
+                });
+            });
+
+            $("#modal-item-group-edit-form").validate({
+                submitHandler: function(form) {
+                    $('#modal-item-group-edit-submit').attr('disabled', 'disabled');
+
+                    const item_group_id = $('#modal-item-group-edit-submit').data('item-group-id');
+                    const url = `/api/v1/biblios/${biblionumber}/item_groups/${item_group_id}`;
+
+                    var settings = {
+                      "url": url,
+                      "method": "PUT",
+                      "headers": {
+                        "Content-Type": "application/json"
+                      },
+                      "data": JSON.stringify(
+                          {
+                              "description": $("#modal-item-group-edit-form-description").val(),
+                              "display_order": $("#modal-item-group-edit-form-display_order").val(),
+                          }
+                      ),
+                    };
+
+                    $.ajax(settings)
+                    .done(function (response) {
+                        $('#modal-item-group-edit').modal('hide');
+                        itemGroupsTable.api().ajax.reload();
+                    })
+                    .fail(function(err) {
+                        var message = err.responseJSON.error;
+                        alert(message);
+                    });
+                }
+            });
+
+            $('#modal-item-group-edit').on('shown.bs.modal', function () {
+                $('#modal-item-group-edit-form-description').focus();
+            })
+
+            // Delete existing item groups
+            $('body').on( 'click', '.item-group-delete', function(){
+                const item_group_id = $(this).data('item-group-id');
+                $('#modal-item-group-delete-submit').data('item-group-id', item_group_id );
+                $('#modal-item-group-delete-submit').removeAttr('disabled');
+                $('#modal-item-group-delete').modal('show');
+            });
+            $("#modal-item-group-delete-submit").on('click', function(){
+                $('#modal-item-group-delete-submit').attr('disabled', 'disabled');
+                const item_group_id = $("#modal-item-group-delete-submit").data('item-group-id');
+
+                $.ajax({
+                    url: `/api/v1/biblios/${biblionumber}/item_groups/${item_group_id}`,
+                    headers: { "x-koha-embed": "items" },
+                    success: function(item_group_data){
+                        $.ajax({
+                          "url": `/api/v1/biblios/${biblionumber}/item_groups/${item_group_id}`,
+                          "method": "DELETE",
+                        })
+                        .done(function (response) {
+                            $('#modal-item-group-delete').modal('hide');
+                            $(`#item-group-add-form-select option[value='${item_group_id}']`).remove();
+                            if ( item_group_data.items === null ) {
+                                // No items for this item group, we can just refresh the table
+                                itemGroupsTable.api().ajax.reload();
+                            } else {
+                                // This item group had items attached to it, we need to reload the page
+                                window.location.replace(`/cgi-bin/koha/catalogue/detail.pl?biblionumber=${biblionumber}`);
+                            }
+                        })
+                        .fail(function(err) {
+                            var message = err.responseJSON.error;
+                            alert(message);
+                        });
+                    }
+                });
+            });
+
+            // Add item(s) to a item group
+            $('.itemselection_action_item_group_set').on('click', function(){
+                $('#modal-item-group-set').modal('show');
+            });
+
+            $("#modal-item-group-set-form").validate({
+                submitHandler: function(form) {
+                    $('#modal-item-group-set-submit').attr('disabled', 'disabled');
+
+                    const item_group_id = $('#item-group-add-form-select').val();
+
+                    let itemnumbers = new Array();
+                    $("input[name='itemnumber'][type='checkbox']:checked").each(function() {
+                        const itemnumber = $(this).val();
+                        itemnumbers.push( itemnumber );
+                    });
+                    if (itemnumbers.length > 0) {
+                        let url = '/cgi-bin/koha/catalogue/detail.pl?op=set_item_group';
+                        url += '&itemnumber=' + itemnumbers.join('&itemnumber=');
+                        url += '&biblionumber=[% biblionumber | uri %]';
+                        url += `&item_group_id=${item_group_id}`;
+
+                        window.location.replace(url);
+                    }
+
+                    $('#modal-item-group-set').modal('hide');
+                }
+            });
+
+            // Remove item(s) from an item group
+            $('.itemselection_action_item_group_unset').on('click', function(){
+                $('#modal-item-group-unset').modal('show');
+            });
+
+            $("#modal-item-group-unset-submit").on('click', function(){
+                $('#modal-item-group-unset-submit').attr('disabled', 'disabled');
+
+                let itemnumbers = new Array();
+                $("input[name='itemnumber'][type='checkbox']:checked").each(function() {
+                    const itemnumber = $(this).val();
+                    itemnumbers.push( itemnumber );
+                });
+                if (itemnumbers.length > 0) {
+                    let url = '/cgi-bin/koha/catalogue/detail.pl?op=unset_item_group';
+                    url += '&itemnumber=' + itemnumbers.join('&itemnumber=');
+                    url += '&biblionumber=[% biblionumber | uri %]';
+
+                    window.location.replace(url);
+                }
+
+                $('#modal-item-group-unset').modal('hide');
+
+            });
+        [% END %]
     </script>
 [% END %]
 [% INCLUDE 'intranet-bottom.inc' %]