Bug 30747: Make column settings work for otherholdings table using forEach loop
[koha-ffzg.git] / koha-tmpl / intranet-tmpl / prog / en / modules / catalogue / detail.tt
index 353cdc1..9578826 100644 (file)
@@ -2,14 +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 ) %]
-    Unknown record
-  [% ELSE %]
-    [% INCLUDE 'biblio-title.inc' link = 1 %] &rsaquo; Details
-  [% 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">
@@ -68,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>
         [% 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 bookcoverimg">
                 <div id="biblio-cover-slider" class="cover-slider">
                         [% IF localimages.count %]
                             [% FOREACH image IN localimages %]
                                 <div class="cover-image local-coverimg">
-                                    <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 %]" alt="Local cover image" />
+                                    <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 %]
 
-                    [% 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>
                         [% coce_id = normalized_ean || normalized_isbn %]
                         <div class="cover-image" id="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 ( 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">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 %]">
+                                <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> <!-- /.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 ( MARCNOTES ) %]<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 ) %]
-    [% IF ( localimages.count || CAN_user_tools_upload_local_cover_images ) %]
-        <li>
-            <a href="#images">Images ([% localimages.count || 0 | html %])</a>
-        </li>
-    [% END %]
+    <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 ( itemdata_ccode ) %]<th id="[% tab | html %]_ccode" data-colname="[% tab | html %]_ccode">Collection</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 %]_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 %]
                                 <div class="cover-slider">
                                     [% FOREACH image IN item.cover_images %]
                                         <div class="cover-image local-coverimg">
-                                            <a href="/cgi-bin/koha/catalogue/imageviewer.pl?itemnumber=[% image.itemnumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]">
-                                                <img src="/cgi-bin/koha/catalogue/image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
+                                            <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 %]
                     <td class="location">[% UNLESS ( singlebranchmode ) %][% Branches.GetName( item.branchcode ) | html %] [% END %]</td>
                     <td class="homebranch">
                         <span class="homebranchdesc">[% Branches.GetName(item.homebranch) | html %]</span>
-                        <br />
                         <span class="shelvingloc">
 <!--
 If permanent location is defined, show description or code and display current location in parentheses. If not, display current location.
@@ -375,8 +411,11 @@ Note that permanent location is a code, and location may be an authval.
                     [% IF ( itemdata_ccode ) %]<td>[% item.ccode | 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>
@@ -474,18 +513,26 @@ 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.waitingdate %]
+                                Waiting at [% Branches.GetName( item.recall.branchcode ) | html %] since [% item.recall.waitingdate | $KohaDates %]
+                            [% ELSE %]
+                                Item recalled by <a href="/cgi-bin/koha/members/moremember.pl?borrowernumber=[% item.recall.borrowernumber | uri %]">[% item.recall.patron.firstname | html %] [% item.recall.patron.surname | html %] ([% item.recall.patron.cardnumber | html %])</a> on [% item.recall.recalldate | $KohaDates %]
+                            [% END %]
+                        [% END %]
+
+                        [% UNLESS ( item.itemnotforloan || item.notforloan_per_itemtype || item.onloan || item.itemlost || item.withdrawn || item.damaged || item.transfertwhen || hold || item.recalled ) %]
+                            Available
                         [% END %]
 
                         [% IF ( item.restricted ) %]
                             <span class="restricted">([% item.restrictedvalue | html %])</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 class="datelastseen" data-order="[% item.datelastseen | html %]">[% item.datelastseen | $KohaDates %]</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?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>
                     [% IF ( itemdata_uri ) %]
                         [% IF item.uri.split(' \| ').size > 1 %]
@@ -575,7 +622,7 @@ Note that permanent location is a code, and location may be an authval.
 
 [% END %][%# end of block items_table %]
 
-<div id="holdings">
+<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;">
@@ -618,7 +665,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 %]
@@ -627,12 +674,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+$') %]
@@ -641,19 +687,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 | uri %]"/>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> 
@@ -680,8 +741,8 @@ 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 %]
@@ -708,7 +769,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>
@@ -718,14 +779,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>
@@ -763,15 +824,15 @@ 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>
@@ -798,7 +859,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 %]
@@ -868,7 +929,7 @@ 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 %]
 [% 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 %]
@@ -885,7 +946,7 @@ Note that permanent location is a code, and location may be an authval.
 [% END %]
 
 [% IF ( LocalCoverImages ) %]
-    <div id="images">
+    <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">
@@ -913,12 +974,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 %] />
@@ -932,17 +992,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;">
@@ -996,19 +1057,23 @@ Note that permanent location is a code, and location may be an authval.
 [% 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-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();
@@ -1025,28 +1090,48 @@ Note that permanent location is a code, and location may be an authval.
                                     // 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')));
                                 }
-                            }
-                            if( div.attr("id") == "custom-img" ){
+                            } 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" ){
+                            else if( div.attr("id") == "coce-coverimg" ){
                                 // Identify which service's image is being loaded by Coce
+                                var coce_description;
                                 if( $(img).attr("src").indexOf('amazon.com') >= 0 ){
-                                    div.find(".hint").html(_("Coce image from Amazon.com"));
+                                    coce_description = ("Coce image from Amazon.com");
                                 } else if( $(img).attr("src").indexOf('google.com') >= 0 ){
-                                    div.find(".hint").html(_("Coce image from Google Books"));
+                                    coce_description = _("Coce image from Google Books");
                                 } else if( $(img).attr("src").indexOf('openlibrary.org') >= 0 ){
-                                    div.find(".hint").html(_("Coce image from Open Library"));
+                                    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"));
                             }
                         }
                     }
                 });
+
+                // Lightbox for cover images
+                Chocolat(this.querySelectorAll('.cover-image a'), {
+                    description: function(){
+                        return lightbox_descriptions[this.settings.currentImageIndex];
+                    }
+                });
+
             });
 
             $(".cover-slider").each(function(){
@@ -1197,10 +1282,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?"));
@@ -1257,7 +1350,7 @@ Note that permanent location is a code, and location may be an authval.
         });
 
         $(window).load(function() {
-            verify_images();
+            verify_cover_images();
         });
     </script>
     [% IF ( Koha.Preference('NovelistSelectStaffEnabled') && Koha.Preference('NovelistSelectStaffProfile') && ( normalized_isbn || normalized_upc ) ) %]
@@ -1274,13 +1367,12 @@ Note that permanent location is a code, and location may be an authval.
         browser.show();
 
         $(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 %] ];
-            var has_images = ["[% itemloop_has_images | html %]", "[% otheritemloop_has_images | html %]"];
-            for (var i in ids) {
-                var id = ids[i];
-                if ( !has_images[i] ) { // remove the cover_image column
-                    columns_settings.splice(1,1);
+            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',
@@ -1289,17 +1381,17 @@ Note that permanent location is a code, and location may be an authval.
                     "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 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" ]],
-                }, columns_settings);
+                }, table_settings);
             [% END %]
 
             [% IF suggestions.count %]