Attachment 135079 Details for Bug 30570 – Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

[patch] Bug 30570: Replace the use of jQueryUI tabs in OPAC templates

Bug-30570-Replace-the-use-of-jQueryUI-tabs-in-OPAC.patch (text/plain), 225.66 KB, created by Lucas Gass (lukeg) on 2022-05-17 21:06:16 UTC

(hide)

Description:

Filename:

MIME Type:

Creator: Lucas Gass (lukeg)

Created: 2022-05-17 21:06:16 UTC

Size: 225.66 KB

patch

obsolete

>From cfe09737420259ed0dd5a36b319021c29f58cb6b Mon Sep 17 00:00:00 2001
>From: Owen Leonard <oleonard@myacpl.org>
>Date: Tue, 19 Apr 2022 15:35:45 +0000
>Subject: [PATCH] Bug 30570: Replace the use of jQueryUI tabs in OPAC templates
>MIME-Version: 1.0
>Content-Type: text/plain; charset=UTF-8
>Content-Transfer-Encoding: 8bit
>
>This patch switches to Bootstrap tabs anywhere in the OPAC where
>jQueryUI tabs were used.
>
>To test, apply the patch and rebuild the OPAC CSS
>(https://wiki.koha-community.org/wiki/Working_with_SCSS_in_the_OPAC_and_staff_client).
>
>- Test the item type/collection/shelvinglocation tabs on the advanced
>  search page. Test that it works correctly with different variations of
>  the OpacAdvancedSearchTypes system preference.
>- Search for an authority record and view the details. The "Notes"
>  tab should be styled correctly.
>- Locate a bibliographic record and view the detail page. Verify
>  that tabs are working, including all the options:
>  - Holdings
>  - Other holdings ( If OpacSeparateHoldings is enabled)
>  - Descriptions ( MARC notes )
>  - Subscriptions
>  - Serial collection (UNIMARC, untested)
>  - Components ( If ShowComponentRecords is enabled. Link to sample
>    record: https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=78023 )
>  - Comments
>  - Editions (OPACFRBRizeEditions)
>  - Html5media ( If HTML5MediaEnabled is on. Link to sample records:
>    (https://bugs.koha-community.org/bugzilla3/attachment.cgi?id=10685)
>  - Images ( If OPACLocalCoverImages is enabled )
>
>  Bonus points for testing these tabs for which I don't have
>  credentials:
>  - Syndetics TOC
>  - Syndetics Excerpt
>  - Syndetics Reviews
>  - Syndetics AuthorNotes
>  - LibraryThing for Libraries (with LibraryThingForLibrariesTabbedView
>    set to "in tabs."
>  - NovelistSelect
>
>- Check tabs on these patron-related pages:
>  - Checkout history
>  - Search history
>  - Patron summary. The following tabs are
>    â Checkouts
>    â Relatives' checkouts
>    â Overdues
>    â Fines
>    â Relatives' fines
>    â Holds
>    â Recalls
>    â Article requests
>    â Overdrive
>
>Signed-off-by: Lucas Gass <lucas@bywatersolutions.com>
>---
> .../opac-tmpl/bootstrap/css/src/_common.scss  |   44 +-
> .../opac-tmpl/bootstrap/css/src/opac.scss     |    2 +-
> .../bootstrap/en/includes/holds-table.inc     |    2 +-
> .../bootstrap/en/modules/opac-advsearch.tt    |   80 +-
> .../bootstrap/en/modules/opac-auth-detail.tt  |   21 +-
> .../bootstrap/en/modules/opac-detail.tt       |  956 +++++++------
> .../en/modules/opac-readingrecord.tt          |   41 +-
> .../en/modules/opac-search-history.tt         |  160 ++-
> .../bootstrap/en/modules/opac-user.tt         | 1221 +++++++++--------
> 9 files changed, 1331 insertions(+), 1196 deletions(-)
>
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
>index a696b9b1c8..b0f2b856fc 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/_common.scss
>@@ -901,6 +901,40 @@ ul {
> 
> /* end jQueryUI core */
> 
>+/* Bootstrap Tabs */
>+
>+.tab-content {
>+    background-color: #FFF;
>+    border: 1px solid #d8d8d8;
>+    border-top-width: 0;
>+    margin-bottom: 1em;
>+    padding: 1em;
>+}
>+
>+.nav-tabs {
>+    .nav-link {
>+        background-color: #f0f3f3;
>+        border: 1px solid #d8d8d8;
>+        border-radius: 0;
>+        margin-right: .4em;
>+
>+        &:hover,
>+        &:focus {
>+            border-color: #d8d8d8;
>+        }
>+
>+        &.active {
>+            background-color: #fff;
>+            border: 1px solid #d8d8d8;
>+            border-bottom-color: transparent;
>+            color: #000;
>+            cursor: default;
>+        }
>+    }
>+}
>+
>+/* end Bootstrap Tabs */
>+
> .close {
>     color: #0088CC;
>     filter: none;
>@@ -1002,16 +1036,6 @@ button {
>     }
> }
> 
>-.nav-link {
>-    &.active {
>-        font-weight: bold;
>-    }
>-}
>-
>-.tab-content {
>-    padding: 15px 0;
>-}
>-
> #logo {
>     background: transparent url( "../images/koha-green-logo.svg" ) no-repeat scroll 0%;
>     border: 0;
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>index 747251450f..14caa1bcf6 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>+++ b/koha-tmpl/opac-tmpl/bootstrap/css/src/opac.scss
>@@ -267,7 +267,7 @@ th {
> }
> 
> .advsearch_limit {
>-    border: 1px solid #EEE;
>+    border: 1px solid #d8d8d8;
>     font-size: 90%;
>     height: 100%;
>     margin-bottom: 15px;
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
>index 2263737ec8..baa36a73a0 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/includes/holds-table.inc
>@@ -4,7 +4,7 @@
> [% PROCESS 'i18n.inc' %]
> 
> [% IF ( HOLDS.count ) %]
>-    <div id="opac-user-holds">
>+    <div id="opac-user-holds" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-holds-tab">
>         <table id="holdst" class="table table-bordered table-striped">
>             <caption>Holds <span class="count">([% HOLDS.count | html %] total)</span></caption>
>             
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
>index 98562bdd36..4cb4994cd8 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-advsearch.tt
>@@ -157,48 +157,50 @@
>                 [% IF ( ( OpacAdvSearchOptions and OpacAdvSearchOptions.grep('itemtype').size > 0 and not expanded_options ) or ( OpacAdvSearchMoreOptions and OpacAdvSearchMoreOptions.grep('itemtype').size > 0 and expanded_options ) ) %]
>                     <div class="col order-first order-md-first order-lg-2">
>                         <div id="advsearches" class="toptabs">
>-                            <ul>
>+                            <ul class="nav nav-tabs" role="tablist">
>                                 [% FOREACH advsearchloo IN advancedsearchesloop %]
>-                                    <li id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
>-                                    <a href="#advsearch-[% advsearchloo.advanced_search_type | uri %]">
>-                                   [% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]Item type
>-                                   [% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]Collection
>-                                   [% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]Shelving location
>-                                   [% ELSE %]Something else
>-                                   [% END %]
>-                                   </a></li>
>+                                    <li class="nav-item" role="presentation" id="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
>+                                        <a href="#advsearch-[% advsearchloo.advanced_search_type | uri %]" class="nav-link" aria-controls="advsearch-[% advsearchloo.advanced_search_type | html %]" aria-selected="false" role="tab" data-toggle="tab">
>+                                            [% IF ( advsearchloo.advanced_search_type == 'itemtypes' ) %]Item type
>+                                            [% ELSIF ( advsearchloo.advanced_search_type == 'ccode' ) %]Collection
>+                                            [% ELSIF ( advsearchloo.advanced_search_type == 'loc' ) %]Shelving location
>+                                            [% ELSE %]Something else
>+                                            [% END %]
>+                                        </a>
>+                                    </li>
>                                 [% END %]
>                             </ul>
>-
>-                            [% FOREACH advsearchloo IN advancedsearchesloop %]
>-                                <div id="advsearch-[% advsearchloo.advanced_search_type | html %]" class="advsearch">
>-                                    <fieldset>
>-                                        <legend>Limit to any of the following:</legend>
>-                                        <div class="row">
>-                                            [% FOREACH itemtypeloo IN advsearchloo.code_loop %]
>-                                                [% IF (advsearchloo.advanced_search_type != 'itemtypes') OR (((!itemtypeloo.searchcategory) AND (itemtypeloo.cat == 0)) OR (itemtypeloo.cat == 1)) %]
>-                                                    <div class="col-sm-6 col-lg-3">
>-                                                        <input type="checkbox"
>-                                                            id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]"
>-                                                            name="[% IF ( itemtypeloo.cat == 1 ) %]searchcat[% ELSE %]limit[% END %]"
>-                                                            value="[% IF ( itemtypeloo.cat == 1 ) %][% itemtypeloo.code | html %][% ELSE %]mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %][% END %]"
>-                                                        />
>-                                                        <label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
>-                                                            [% UNLESS ( Koha.Preference('OpacNoItemTypeImages')) %]
>-                                                                [% IF ( itemtypeloo.imageurl ) %]
>-                                                                    <img src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
>+                            <div class="tab-content">
>+                                [% FOREACH advsearchloo IN advancedsearchesloop %]
>+                                    <div role="tabpanel" class="tab-pane" id="advsearch-[% advsearchloo.advanced_search_type | html %]" class="advsearch" aria-labelledby="advsearch-tab-[% advsearchloo.advanced_search_type | html %]">
>+                                        <fieldset>
>+                                            <legend>Limit to any of the following:</legend>
>+                                            <div class="row">
>+                                                [% FOREACH itemtypeloo IN advsearchloo.code_loop %]
>+                                                    [% IF (advsearchloo.advanced_search_type != 'itemtypes') OR (((!itemtypeloo.searchcategory) AND (itemtypeloo.cat == 0)) OR (itemtypeloo.cat == 1)) %]
>+                                                        <div class="col-sm-6 col-lg-3">
>+                                                            <input type="checkbox"
>+                                                                id="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]"
>+                                                                name="[% IF ( itemtypeloo.cat == 1 ) %]searchcat[% ELSE %]limit[% END %]"
>+                                                                value="[% IF ( itemtypeloo.cat == 1 ) %][% itemtypeloo.code | html %][% ELSE %]mc-[% itemtypeloo.ccl | html %]:[% itemtypeloo.code | html %][% END %]"
>+                                                            />
>+                                                            <label for="[% itemtypeloo.ccl FILTER remove(',') | html %]-[% itemtypeloo.number | html %]">
>+                                                                [% UNLESS ( Koha.Preference('OpacNoItemTypeImages')) %]
>+                                                                    [% IF ( itemtypeloo.imageurl ) %]
>+                                                                        <img src="[% itemtypeloo.imageurl | html %]" alt="[% itemtypeloo.description | html %]" />
>+                                                                    [% END %]
>+                                                                    &nbsp;
>                                                                 [% END %]
>-                                                                &nbsp;
>-                                                            [% END %]
>-                                                            [% itemtypeloo.description | html %]
>-                                                        </label>
>-                                                    </div>
>-                                                [% IF ( loop.last ) %]</div>[% ELSE %][% UNLESS ( loop.count % 4 ) %]</div><div class="row">[% END %][% END %]
>+                                                                [% itemtypeloo.description | html %]
>+                                                            </label>
>+                                                        </div>
>+                                                    [% IF ( loop.last ) %]</div>[% ELSE %][% UNLESS ( loop.count % 4 ) %]</div><div class="row">[% END %][% END %]
>+                                                    [% END %]
>                                                 [% END %]
>-                                            [% END %]
>-                                    </fieldset>
>-                                </div> 
>-                            [% END # / FOREACH advancedsearchesloop %]
>+                                        </fieldset>
>+                                    </div> 
>+                                [% END # / FOREACH advancedsearchesloop %]
>+                            </div> 
>                         </div> 
>                     </div> 
>                 [% END # /IF OpacAdvSearchOptions %]
>@@ -470,7 +472,9 @@ $(document).ready(function() {
>         });
>     [% END %]
> 
>-    $('#advsearches').tabs();
>+    if( $("#advsearches .tab-pane.active").length < 1 ){
>+        $("#advsearches a:first").tab("show");
>+    }
> 
>     $('.search-term-row .search-term-input select[name="op"]').first().prop("disabled",true).hide();
> 
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt
>index 6ad7413321..c32e588ed6 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-auth-detail.tt
>@@ -153,16 +153,20 @@
>                         [% END # / IF MARCURLS %]
> 
>                         <div id="authdescriptions" class="toptabs">
>-                            <ul>
>-                                <li id="tab_descriptions"><a href="#descriptions">Notes</a></li>
>+                            <ul class="nav nav-tabs" role="tablist">
>+                                <li id="tab_descriptions" class="nav-item" role="presentation">
>+                                    <a class="nav-link active" id="descriptions-tab" data-toggle="tab" href="#descriptions" role="tab" aria-controls="descriptions" aria-selected="true" href="#descriptions">Notes</a>
>+                                </li>
>                             </ul>
>-                            <div id="descriptions">
>-                                <div class="content_set">
>-                                    [% FOREACH note IN summary.notes %]
>-                                        <p class="note auth[% note.field | html %]">[% note.note | html %]</p>
>-                                    [% END %]
>+                            <div class="tab-content">
>+                                <div class="tab-pane active" role="tabpanel" aria-labelledby="descriptions-tab" id="descriptions">
>+                                    <div class="content_set">
>+                                        [% FOREACH note IN summary.notes %]
>+                                            <p class="note auth[% note.field | html %]">[% note.note | html %]</p>
>+                                        [% END %]
>+                                    </div>
>                                 </div>
>-                            </div>
>+                            </div> 
>                         </div>
>                     </div> 
>                 </div> 
>@@ -177,7 +181,6 @@
> [% END %]
> <script>
>     $(document).ready(function() {
>-        $('#authdescriptions').tabs();
>         [% IF ( displayhierarchy ) %]
>             $('#hierarchies').jstree({
>                 "types" : {
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
>index a39cd0a0c0..03014d9bc6 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-detail.tt
>@@ -370,12 +370,8 @@
>                 </div> 
> 
>                 <div id="bibliodescriptions" class="toptabs">
>-                    <ul>
>-                        [% IF ( defaulttab == 'holdings' ) %]
>-                            <li id="tab_holdings" class="ui-tabs-active">
>-                        [% ELSE %]
>-                            <li id="tab_holdings">
>-                        [% END %]
>+                    <ul class="nav nav-tabs" role="tablist">
>+                        <li id="tab_holdings" class="nav-item" role="presentation">
>                             [% BLOCK holding_tab_title %]
>                                 [% IF SeparateHoldings %]
>                                     <span>[% Branches.GetLoggedInBranchname | html %] holdings</span>
>@@ -387,10 +383,14 @@
>                                     [% END %]
>                                 [% END %]
>                             [% END %]
>-                            <a href="#holdings">[% PROCESS holding_tab_title %] [% UNLESS too_many_items OR specific_item %][% ' ( ' _ (itemloop.size || 0) _ ' )' | html %][% END %]</a>
>+                            <a href="#holdings" class="nav-link" id="holdings-tab" data-toggle="tab" role="tab" aria-controls="holdings" aria-selected="false">
>+                                [% PROCESS holding_tab_title %] [% UNLESS too_many_items OR specific_item %][% ' ( ' _ (itemloop.size || 0) _ ' )' | html %][% END %]
>+                            </a>
>                         </li>
>                         [% IF (SeparateHoldings) %]
>-                            <li><a href="#otherholdings">Other holdings [% ' ( ' _ (otheritemloop.size || 0) _ ' )' | html %]</a></li>
>+                            <li class="nav-item" role="presentation">
>+                                <a href="#otherholdings" class="nav-link" id="otherholdings-tab" data-toggle="tab" role="tab" aria-controls="otherholdings" aria-selected="false">Other holdings [% ' ( ' _ (otheritemloop.size || 0) _ ' )' | html %]</a>
>+                            </li>
>                         [% END %]
>                         [% IF ( MARCNOTES || ( SyndeticsEnabled && SyndeticsSummary && SYNDETICS_SUMMARY )) %]
>                             [% SET title_notes_count = 0 %]
>@@ -398,26 +398,31 @@
>                                 [% SET title_notes_count = MARCNOTES.size %]
>                             [% END %]
>                             [% IF SYNDETICS_SUMMARY %][% SET title_notes_count = title_notes_count + 1 %][% END %]
>-                            <li id="tab_descriptions"> <a href="#descriptions">Title notes ( [% title_notes_count | html %] )</a></li>
>+                            <li id="tab_descriptions" class="nav-item" role="presentation">
>+                                <a href="#descriptions" class="nav-link" id="tab_descriptions-tab" data-toggle="tab" role="tab" aria-controls="tab_descriptions" aria-selected="false">Title notes ( [% title_notes_count | html %] )</a>
>+                            </li>
>                         [% END %]
>                         [% IF ComponentParts && ComponentParts.size %]
>-                            [% IF defaulttab == 'components' %]
>-                            <li id="tab_components" class="ui-tabs-active">
>-                            [% ELSE %]
>-                            <li id="tab_components">
>-                            [% END %]
>-                                <a href="#components">Components ([% ComponentParts.size | html %])</a>
>+                            <li id="tab_components" class="nav-item" role="presentation">
>+                                <a href="#components" class="nav-link" id="tab_components-tab" data-toggle="tab" role="tab" aria-controls="tab_components" aria-selected="false">
>+                                Components ([% ComponentParts.size | html %])</a>
>                             </li>
>                         [% END %]
>                         [% IF ( SYNDETICS_TOC ) %]
>-                            <li id="tab_toc"> <a href="#toc">TOC</a></li>
>+                            <li id="tab_toc" class="nav-item" role="presentation">
>+                                <a href="#toc" class="nav-link" id="tab_toc-tab" data-toggle="tab" role="tab" aria-controls="tab_toc" aria-selected="false">TOC</a>
>+                            </li>
>                         [% END %]
>                         [% IF ( SyndeticsEnabled ) %]
>                             [% IF ( SyndeticsExcerpt && SYNDETICS_EXCERPT ) %]
>-                                <li id="tab_excerpt"> <a href="#excerpt">Excerpt</a></li>
>+                                <li id="tab_excerpt" class="nav-item" role="presentation">
>+                                    <a href="#excerpt" class="nav-link" id="tab_excerpt-tab" data-toggle="tab" role="tab" aria-controls="tab_excerpt" aria-selected="false">Excerpt</a>
>+                                </li>
>                             [% END %]
>                             [% IF ( ( SyndeticsReviews && SYNDETICS_REVIEWS ) || ( LibraryThingForLibrariesTabbedView && LibraryThingForLibrariesID) ) %]
>-                                <li id="tab_reviews"> <a href="#reviews">Reviews</a></li>
>+                                <li id="tab_reviews" class="nav-item" role="presentation">
>+                                    <a href="#reviews" class="nav-link" id="tab_reviews-tab" data-toggle="tab" role="tab" aria-controls="tab_reviews" aria-selected="false">Reviews</a>
>+                                </li>
>                                 [% IF ( LibraryThingForLibrariesID ) %]
>                                     <li id="tab_LTFLreviews">
>                                         <script src="https://www.librarything.com/forlibraries/widget.js?id=[% LibraryThingForLibrariesID | html %]"></script>
>@@ -426,530 +431,552 @@
>                                 [% END %]
>                             [% END %]
>                             [% IF ( SyndeticsAuthorNotes && SYNDETICS_ANOTES ) %]
>-                                <li id="tab_anotes"> <a href="#anotes">About the author</a></li>
>+                                <li id="tab_anotes" class="nav-item" role="presentation">
>+                                    <a href="#anotes" class="nav-link" id="tab_anotes-tab" data-toggle="tab" role="tab" aria-controls="tab_anotes" aria-selected="false">About the author</a>
>+                                </li>
>                             [% END %]
>                         [% END # / IF SyndeticsEnabled %]
> 
>                         [% IF ( LibraryThingForLibrariesID && LibraryThingForLibrariesTabbedView ) %]
>-                            <li id="tab_LFTLSimilarItems"> <a href="#LFTLSimilarItems">Similar items</a></li>
>-                            <li id="tab_LTFLTagBrowse"> <a href="#LTFLTagBrowse">Tag browser</a></li>
>+                            <li id="tab_LFTLSimilarItems" class="nav-item" role="presentation">
>+                                <a href="#LFTLSimilarItems" class="nav-link" id="tab_LFTLSimilarItems-tab" data-toggle="tab" role="tab" aria-controls="tab_LFTLSimilarItems" aria-selected="false">Similar items</a>
>+                            </li>
>+                            <li id="tab_LTFLTagBrowse">
>+                                <a href="#LTFLTagBrowse" class="nav-link" id="tab_LTFLTagBrowse-tab" data-toggle="tab" role="tab" aria-controls="tab_LTFLTagBrowse" aria-selected="false">Tag browser</a>
>+                            </li>
>                         [% END %]
> 
>                         [% IF ( subscriptionsnumber ) %]
>-                            [% IF ( defaulttab == 'subscriptions' ) %]<li id="tab_subscriptions" class="ui-tabs-active">[% ELSE %]<li id="tab_subscriptions">[% END %]
>-                                <a href="#subscriptions">Subscriptions ( [% subscriptionsnumber | html %] )</a>
>+                            <li id="tab_subscriptions" class="nav-item" role="presentation">
>+                                <a href="#subscriptions" class="nav-link" id="tab_subscriptions-tab" data-toggle="tab" role="tab" aria-controls="tab_subscriptions" aria-selected="false">
>+                                Subscriptions ( [% subscriptionsnumber | html %] )</a>
>                             </li>
>                         [% END %]
> 
>                         [% IF Koha.Preference( 'OPACComments' ) == 1 %]
>-                            <li id="tab_comments"><a href="#comments">Comments[% ' ( ' _ (reviews.size || 0) _ ' )' | html %]</a></li>
>+                            <li id="tab_comments" class="nav-item" role="presentation">
>+                                <a href="#comments" class="nav-link" id="tab_comments-tab" data-toggle="tab" role="tab" aria-controls="tab_comments" aria-selected="false">Comments[% ' ( ' _ (reviews.size || 0) _ ' )' | html %]</a>
>+                            </li>
>                         [% END %]
> 
>                         [% IF ( NovelistSelectProfile && (normalized_isbn || normalized_upc) ) %]
>                             [% IF ( NovelistSelectView == 'tab') %]
>-                                <li id="tab_NovelistSelect" class="NovelistSelect" style="display:none;"> <a href="#NovelistSelect">Novelist Select</a></li>
>+                                <li id="tab_NovelistSelect" class="NovelistSelect" style="display:none;" class="nav-item" role="presentation">
>+                                    <a href="#NovelistSelect" class="nav-link" id="tab_NovelistSelect-tab" data-toggle="tab" role="tab" aria-controls="tab_NovelistSelect" aria-selected="false">Novelist Select</a>
>+                                </li>
>                             [% END %]
>                         [% END %]
> 
>                         [% IF ( OPACFRBRizeEditions && XISBNS ) %]
>-                            <li id="tab_editions"><a href="#editions">Editions</a></li>
>+                            <li id="tab_editions" class="nav-item" role="presentation">
>+                                <a href="#editions" class="nav-link" id="tab_editions-tab" data-toggle="tab" role="tab" aria-controls="tab_editions" aria-selected="false">Editions</a>
>+                            </li>
>                         [% END %]
> 
>                         [% IF ( serialcollection ) %]
>-                            [% IF ( defaulttab == 'serialcollection' ) %]<li id="tab_serialcollection" class="ui-tabs-active">[% ELSE %]<li id="tab_serialcollection">[% END %]
>-                                <a href="#serialcollection">Serial collection</a>
>+                            <li id="tab_serialcollection" class="nav-item" role="presentation">
>+                                <a href="#serialcollection" class="nav-link" id="tab_serialcollection-tab" data-toggle="tab" role="tab" aria-controls="tab_serialcollection" aria-selected="false">
>+                                    Serial collection
>+                                </a>
>                             </li>
>                         [% END %]
> 
>                         [% IF ( OPACLocalCoverImages && localimages.count ) %]
>-                            <li id="tab_images"><a href="#images">Images</a></li>
>+                            <li id="tab_images" class="nav-item" role="presentation">
>+                                <a href="#images" class="nav-link" id="tab_images-tab" data-toggle="tab" role="tab" aria-controls="tab_images" aria-selected="false">Images</a>
>+                            </li>
>                         [% END %]
> 
>                         [% IF HTML5MediaEnabled && HTML5MediaSets.size %]
>-                            [% IF ( defaulttab == 'media' ) %]<li id="tab_html5media" class="ui-tabs-active">[% ELSE %]<li id="tab_html5media">[% END %]<a href="#html5media">Play media</a></li>
>+                            <li id="tab_html5media" class="nav-item" role="presentation">
>+                                <a href="#html5media" class="nav-link" id="tab_html5media-tab" data-toggle="tab" role="tab" aria-controls="tab_html5media" aria-selected="false">
>+                                    Play media
>+                                </a>
>+                            </li>
>                         [% END %]
>-
>                     </ul>
> 
>-                    [% IF ( serialcollection ) %]
>-                        <div id="serialcollection">
>-                            <table id="serialcollectiont" class="table table-bordered table-striped">
>-                                <caption class="sr-only">Serial collections</caption>
>-                                <thead>
>-                                    <tr>
>-                                        <th id="serial_library">Library</th>
>-                                        <th id="serial_collection">Serial collection</th>
>-                                        <th id="serial_itemcallnumber">Item call number</th>
>-                                    </tr>
>-                                </thead>
>-                                <tbody>
>-                                    [% FOREACH serialcollection IN serialcollections %]
>+                    <div class="tab-content">
>+                        [% IF ( serialcollection ) %]
>+                            <div id="serialcollection" class="tab-pane" role="tabpanel" aria-labelledby="tab_serialcollection-tab">
>+                                <table id="serialcollectiont" class="table table-bordered table-striped">
>+                                    <caption class="sr-only">Serial collections</caption>
>+                                    <thead>
>                                         <tr>
>-                                            <td>[% serialcollection.branch | html %]</td>
>-                                            <td>[% serialcollection.text | html %]</td>
>-                                            <td>[% serialcollection.itemcallnumber | html %]</td>
>+                                            <th id="serial_library">Library</th>
>+                                            <th id="serial_collection">Serial collection</th>
>+                                            <th id="serial_itemcallnumber">Item call number</th>
>                                         </tr>
>-                                    [% END %]
>-                                </tbody>
>-                            </table>
>-                        </div> 
>-                    [% END # / IF serialcollection %]
>-
>-
>-                    <div id="holdings">
>-                        [% IF too_many_items %]
>-                            <p>This record has many physical items ([% items_count | html %]). <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblio.biblionumber | uri %]&amp;viewallitems=1">View all the physical items.</a></p>
>-                        [% ELSIF ( itemloop.size ) %]
>-                            [% INCLUDE items_table items=itemloop tab="holdings" table_id="holdingst" %]
>-                            [% IF specific_item %]
>-                                <p><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblio.biblionumber | uri %]">Show all items</a></p>
>-                            [% ELSE %]
>-                                [% IF Koha.Preference('OPACAcquisitionDetails') and acquisition_details.total_quantity > 0 %]
>-                                    [% IF acquisition_details.total_quantity == 1 %]
>-                                        <span>1 item is on order.</span>
>-                                    [% ELSE %]
>-                                        <span>[% acquisition_details.total_quantity | html %] items are on order.</span>
>-                                    [% END %]
>-                                [% END %]
>-                                [% IF holds_count.defined || priority %]
>-                                    <div id="bib_holds">
>-                                        [% IF holds_count.defined %]
>-                                            <span>Total holds: [% holds_count | html %]</span>
>+                                    </thead>
>+                                    <tbody>
>+                                        [% FOREACH serialcollection IN serialcollections %]
>+                                            <tr>
>+                                                <td>[% serialcollection.branch | html %]</td>
>+                                                <td>[% serialcollection.text | html %]</td>
>+                                                <td>[% serialcollection.itemcallnumber | html %]</td>
>+                                            </tr>
>                                         [% END %]
>-                                        [% IF priority %]
>+                                    </tbody>
>+                                </table>
>+                            </div> 
>+                        [% END # / IF serialcollection %]
>+
>+
>+                        <div id="holdings" class="tab-pane" role="tabpanel" aria-labelledby="holdings-tab">
>+                            [% IF too_many_items %]
>+                                <p>This record has many physical items ([% items_count | html %]). <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblio.biblionumber | uri %]&amp;viewallitems=1">View all the physical items.</a></p>
>+                            [% ELSIF ( itemloop.size ) %]
>+                                [% INCLUDE items_table items=itemloop tab="holdings" table_id="holdingst" %]
>+                                [% IF specific_item %]
>+                                    <p><a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% biblio.biblionumber | uri %]">Show all items</a></p>
>+                                [% ELSE %]
>+                                    [% IF Koha.Preference('OPACAcquisitionDetails') and acquisition_details.total_quantity > 0 %]
>+                                        [% IF acquisition_details.total_quantity == 1 %]
>+                                            <span>1 item is on order.</span>
>+                                        [% ELSE %]
>+                                            <span>[% acquisition_details.total_quantity | html %] items are on order.</span>
>+                                        [% END %]
>+                                    [% END %]
>+                                    [% IF holds_count.defined || priority %]
>+                                        <div id="bib_holds">
>                                             [% IF holds_count.defined %]
>-                                                <span>(priority [% priority | html %])</span>
>-                                            [% ELSE %]
>-                                                <span>Overall queue priority: [% priority | html %]</span>
>+                                                <span>Total holds: [% holds_count | html %]</span>
>                                             [% END %]
>-                                        [% END %]
>-                                    </div>
>-                                [% END %]
>+                                            [% IF priority %]
>+                                                [% IF holds_count.defined %]
>+                                                    <span>(priority [% priority | html %])</span>
>+                                                [% ELSE %]
>+                                                    <span>Overall queue priority: [% priority | html %]</span>
>+                                                [% END %]
>+                                            [% END %]
>+                                        </div>
>+                                    [% END %]
> 
>-                            [% END # /IF specific_item %]
>-                        [% ELSE %]
>-                            [% IF ( ALTERNATEHOLDINGS ) %]
>-                                [% FOREACH ALTERNATEHOLDING IN ALTERNATEHOLDINGS %]
>-                                    <div id="alternateholdings"><span class="holdings_label">Holdings:</span> [% ALTERNATEHOLDING.holding | html %]</div>
>-                                [% END %]
>+                                [% END # /IF specific_item %]
>                             [% ELSE %]
>-                                [% IF Koha.Preference('OPACAcquisitionDetails') and acquisition_details.total_quantity > 0 %]
>-                                    [% IF acquisition_details.total_quantity == 1 %]
>-                                        <span>1 item is on order.</span>
>+                                [% IF ( ALTERNATEHOLDINGS ) %]
>+                                    [% FOREACH ALTERNATEHOLDING IN ALTERNATEHOLDINGS %]
>+                                        <div id="alternateholdings"><span class="holdings_label">Holdings:</span> [% ALTERNATEHOLDING.holding | html %]</div>
>+                                    [% END %]
>+                                [% ELSE %]
>+                                    [% IF Koha.Preference('OPACAcquisitionDetails') and acquisition_details.total_quantity > 0 %]
>+                                        [% IF acquisition_details.total_quantity == 1 %]
>+                                            <span>1 item is on order.</span>
>+                                        [% ELSE %]
>+                                            <span>[% acquisition_details.total_quantity | html %] items are on order.</span>
>+                                        [% END %]
>                                     [% ELSE %]
>-                                        <span>[% acquisition_details.total_quantity | html %] items are on order.</span>
>+                                        <div id="noitems">No physical items for this record</div>
>                                     [% END %]
>+                                [% END %]
>+                            [% END # IF itemloop.size %]
>+                            [% PROCESS 'shelfbrowser.inc' %]
>+                            [% INCLUDE shelfbrowser tab='holdings' %]
>+                            <br style="clear:both;" />
>+                        </div> 
>+
>+                        [% IF (SeparateHoldings) %]
>+                            <div id="otherholdings" class="tab-pane" role="tabpanel" aria-labelledby="otherholdings-tab">
>+                                [% IF (otheritemloop.size) %]
>+                                    [% INCLUDE items_table items=otheritemloop tab="otherholdings" table_id="otherholdingst" %]
>                                 [% ELSE %]
>-                                    <div id="noitems">No physical items for this record</div>
>+                                    <span>No other items.</span>
>                                 [% END %]
>-                            [% END %]
>-                        [% END # IF itemloop.size %]
>-                        [% PROCESS 'shelfbrowser.inc' %]
>-                        [% INCLUDE shelfbrowser tab='holdings' %]
>-                        <br style="clear:both;" />
>-                    </div> 
>-
>-                    [% IF (SeparateHoldings) %]
>-                        <div id="otherholdings">
>-                            [% IF (otheritemloop.size) %]
>-                                [% INCLUDE items_table items=otheritemloop tab="otherholdings" table_id="otherholdingst" %]
>-                            [% ELSE %]
>-                                <span>No other items.</span>
>-                            [% END %]
>-                            [% INCLUDE shelfbrowser tab='otherholdings' %]
>-                        </div>
>-                    [% END # / SeparateHoldings %]
>+                                [% INCLUDE shelfbrowser tab='otherholdings' %]
>+                            </div>
>+                        [% END # / SeparateHoldings %]
> 
>-                    [% IF ( MARCNOTES || ( SyndeticsEnabled && SyndeticsSummary && SYNDETICS_SUMMARY )) %]
>-                        <div id="descriptions">
>-                            <div class="content_set">
>+                        [% IF ( MARCNOTES || ( SyndeticsEnabled && SyndeticsSummary && SYNDETICS_SUMMARY )) %]
>+                            <div id="descriptions" class="tab-pane" role="tabpanel" aria-labelledby="tab_descriptions-tab">
>+                                <div class="content_set">
> 
>-                                [% IF ( SyndeticsEnabled && SyndeticsSummary && SYNDETICS_SUMMARY ) %]
>-                                    <h2>Enhanced descriptions from Syndetics:</h2>
>-                                    <p>[% SYNDETICS_SUMMARY | $raw %]</p>
>-                                [% END %]
>+                                    [% IF ( SyndeticsEnabled && SyndeticsSummary && SYNDETICS_SUMMARY ) %]
>+                                        <h2>Enhanced descriptions from Syndetics:</h2>
>+                                        <p>[% SYNDETICS_SUMMARY | $raw %]</p>
>+                                    [% END %]
> 
>-                                [% IF ( MARCNOTES ) %]
>-                                    <div id="marcnotes">
>-                                    [% FOREACH MARCNOTE IN MARCNOTES %]
>-                                        <p>
>-                                        [% IF MARCNOTE.marcnote.match('^https?://\S+$') %]
>-                                            <a href="[% MARCNOTE.marcnote | url %]">[% MARCNOTE.marcnote | html %]</a>
>-                                        [% ELSE %]
>-                                            [% MARCNOTE.marcnote | html | html_line_break %]
>+                                    [% IF ( MARCNOTES ) %]
>+                                        <div id="marcnotes">
>+                                        [% FOREACH MARCNOTE IN MARCNOTES %]
>+                                            <p>
>+                                            [% IF MARCNOTE.marcnote.match('^https?://\S+$') %]
>+                                                <a href="[% MARCNOTE.marcnote | url %]">[% MARCNOTE.marcnote | html %]</a>
>+                                            [% ELSE %]
>+                                                [% MARCNOTE.marcnote | html | html_line_break %]
>+                                            [% END %]
>+                                            </p>
>                                         [% END %]
>-                                        </p>
>+                                        </div>
>                                     [% END %]
>-                                    </div>
>-                                [% END %]
> 
>-                            </div> 
>-                        </div> 
>-                    [% END # / IF MARCNOTES %]
>-
>-                    [% IF ComponentParts && ComponentParts.size %]
>-                    <div 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/opac-search.pl?q=[% ComponentPartsQuery | uri %]"/>show all component parts</a></p>
>-                            [% END %]
>-                        </div>
>-                    </div>
>-                    [% END %]
>+                                </div> 
>+                            </div> 
>+                        [% END # / IF MARCNOTES %]
> 
>-                    [% IF ( SyndeticsEnabled ) %]
>-                        [% IF ( SyndeticsTOC && SYNDETICS_TOC ) %]
>-                            <div id="toc">
>+                        [% IF ComponentParts && ComponentParts.size %]
>+                            <div id="components" class="tab-pane" role="tabpanel" aria-labelledby="tab_components-tab">
>                                 <div class="content_set">
>-                                    <h2>Table of contents provided by Syndetics</h2>
>-                                        <ul>
>-                                            [% FOREACH SYNDETICS_TO IN SYNDETICS_TOC %]
>-                                                <li><strong>[% SYNDETICS_TO.l | html %] [% SYNDETICS_TO.t | html %]</strong>[% IF ( SYNDETICS_TO.p ) %] ([% SYNDETICS_TO.p | $raw %])[% END %]</li>
>-                                            [% END %]
>-                                        </ul>
>+                                    <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/opac-search.pl?q=[% ComponentPartsQuery | uri %]"/>show all component parts</a></p>
>+                                    [% END %]
>                                 </div>
>                             </div>
>-                        [% END # / IF SyndeticsTOC && SYNDETICS_TOC %]
>+                        [% END %]
> 
>-                        [% IF ( SyndeticsExcerpt && SYNDETICS_EXCERPT ) %]
>-                            <div id="excerpt">
>-                                <div class="content_set">
>-                                    <h2>Excerpt provided by Syndetics</h2>
>-                                    [% SYNDETICS_EXCERPT | $raw %]
>+                        [% IF ( SyndeticsEnabled ) %]
>+                            [% IF ( SyndeticsTOC && SYNDETICS_TOC ) %]
>+                                <div id="toc" class="tab-pane" role="tabpanel" aria-labelledby="tab_toc-tab">
>+                                    <div class="content_set">
>+                                        <h2>Table of contents provided by Syndetics</h2>
>+                                            <ul>
>+                                                [% FOREACH SYNDETICS_TO IN SYNDETICS_TOC %]
>+                                                    <li><strong>[% SYNDETICS_TO.l | html %] [% SYNDETICS_TO.t | html %]</strong>[% IF ( SYNDETICS_TO.p ) %] ([% SYNDETICS_TO.p | $raw %])[% END %]</li>
>+                                                [% END %]
>+                                            </ul>
>+                                    </div>
>                                 </div>
>-                            </div>
>-                        [% END # / IF SyndeticsExcerpt && SYNDETICS_EXCERPT %]
>+                            [% END # / IF SyndeticsTOC && SYNDETICS_TOC %]
> 
>-                        [% IF ( SyndeticsReviews && SYNDETICS_REVIEWS ) %]
>-                            <div id="reviews">
>-                                <div class="content_set">
>-                                    <h2>Reviews provided by Syndetics</h2>
>-                                    [% FOREACH SYNDETICS_REVIEW IN SYNDETICS_REVIEWS %]
>-                                        [% IF ( SYNDETICS_REVIEW.title ) %]
>-                                            <h3>[% SYNDETICS_REVIEW.title | html %]</h3>
>-                                                [% FOREACH review IN SYNDETICS_REVIEW.reviews %]
>-
>-                                                    [% IF ( review.content ) %]
>-                                                        [% review.content | $raw %]
>-                                                    [% END %]
>+                            [% IF ( SyndeticsExcerpt && SYNDETICS_EXCERPT ) %]
>+                                <div id="excerpt" class="tab-pane" role="tabpanel" aria-labelledby="tab_excerpt-tab">
>+                                    <div class="content_set">
>+                                        <h2>Excerpt provided by Syndetics</h2>
>+                                        [% SYNDETICS_EXCERPT | $raw %]
>+                                    </div>
>+                                </div>
>+                            [% END # / IF SyndeticsExcerpt && SYNDETICS_EXCERPT %]
> 
>-                                                [% END %]
>+                            [% IF ( SyndeticsReviews && SYNDETICS_REVIEWS ) %]
>+                                <div id="reviews" class="tab-pane" role="tabpanel" aria-labelledby="tab_reviews-tab">
>+                                    <div class="content_set">
>+                                        <h2>Reviews provided by Syndetics</h2>
>+                                        [% FOREACH SYNDETICS_REVIEW IN SYNDETICS_REVIEWS %]
>+                                            [% IF ( SYNDETICS_REVIEW.title ) %]
>+                                                <h3>[% SYNDETICS_REVIEW.title | html %]</h3>
>+                                                    [% FOREACH review IN SYNDETICS_REVIEW.reviews %]
>+
>+                                                        [% IF ( review.content ) %]
>+                                                            [% review.content | $raw %]
>+                                                        [% END %]
>+
>+                                                    [% END %]
>+                                            [% END %]
>                                         [% END %]
>-                                    [% END %]
>+                                    </div>
>                                 </div>
>-                            </div>
>-                        [% END # / IF SyndeticsReviews && SYNDETICS_REVIEWS %]
>+                            [% END # / IF SyndeticsReviews && SYNDETICS_REVIEWS %]
> 
>-                        [% IF ( SyndeticsAuthorNotes && SYNDETICS_ANOTES ) %]
>-                            <div id="anotes">
>-                                <div class="content_set">
>-                                    <h2>Author notes provided by Syndetics</h2>
>-                                    [% FOREACH SYNDETICS_ANOTE IN SYNDETICS_ANOTES %]
>-                                        [% IF ( SYNDETICS_ANOTE.content ) %]
>-                                            [% SYNDETICS_ANOTE.content | $raw %]
>+                            [% IF ( SyndeticsAuthorNotes && SYNDETICS_ANOTES ) %]
>+                                <div id="anotes" class="tab-pane" role="tabpanel" aria-labelledby="tab_anotes-tab">
>+                                    <div class="content_set">
>+                                        <h2>Author notes provided by Syndetics</h2>
>+                                        [% FOREACH SYNDETICS_ANOTE IN SYNDETICS_ANOTES %]
>+                                            [% IF ( SYNDETICS_ANOTE.content ) %]
>+                                                [% SYNDETICS_ANOTE.content | $raw %]
>+                                            [% END %]
>                                         [% END %]
>-                                    [% END %]
>+                                    </div>
>                                 </div>
>+                            [% END # / IF SyndeticsReviews && SYNDETICS_REVIEWS %]
>+                        [% END # / IF SyndeticsEnabled %]
>+
>+                        [% IF ( NovelistSelectProfile && NovelistSelectView == 'tab' && (normalized_isbn || normalized_upc) ) %]
>+                            <div id="NovelistSelect" class="tab-pane" role="tabpanel" aria-labelledby="tab_NovelistSelect-tab">
>+                                    <div data-novelist-novelistselect=[% IF normalized_isbn %][% normalized_isbn | html %][% ELSE %][% normalized_upc | html %][% END %]></div>
>                             </div>
>-                        [% END # / IF SyndeticsReviews && SYNDETICS_REVIEWS %]
>-                    [% END # / IF SyndeticsEnabled %]
>+                        [% END # / IF NovelistSelectProfile && NovelistSelectView == 'tab' %]
> 
>-                    [% IF ( NovelistSelectProfile && NovelistSelectView == 'tab' && (normalized_isbn || normalized_upc) ) %]
>-                       <div id="NovelistSelect" >
>-                            <div data-novelist-novelistselect=[% IF normalized_isbn %][% normalized_isbn | html %][% ELSE %][% normalized_upc | html %][% END %]></div>
>-                       </div>
>-                    [% END # / IF NovelistSelectProfile && NovelistSelectView == 'tab' %]
>-
>-                    [% IF ( subscriptionsnumber ) %]
>-                        <div id="subscriptions">
>-                            <h2>This is a serial</h2>
>-                            <p class="subscription_count">There are [% subscriptionsnumber | html %] subscription(s) associated with this title.</p>
>-                            [% FOREACH subscription IN subscriptions %]
>-                                <div class="subscription">
>-                                    [% IF ( subscription.branchcode ) %]
>-                                        <h3>At library: [% Branches.GetName( subscription.branchcode ) | html %]</h3>
>-                                    [% ELSE %]
>+                        [% IF ( subscriptionsnumber ) %]
>+                            <div id="subscriptions" class="tab-pane" role="tabpanel" aria-labelledby="tab_subscriptions-tab">
>+                                <h2>This is a serial</h2>
>+                                <p class="subscription_count">There are [% subscriptionsnumber | html %] subscription(s) associated with this title.</p>
>+                                [% FOREACH subscription IN subscriptions %]
>+                                    <div class="subscription">
>                                         [% IF ( subscription.branchcode ) %]
>-                                            <h3>At library: [% subscription.branchcode | html %]</h3>
>+                                            <h3>At library: [% Branches.GetName( subscription.branchcode ) | html %]</h3>
>+                                        [% ELSE %]
>+                                            [% IF ( subscription.branchcode ) %]
>+                                                <h3>At library: [% subscription.branchcode | html %]</h3>
>+                                            [% END %]
>                                         [% END %]
>-                                    [% END %]
>-                                    [% IF ( subscription.closed ) %]
>-                                        <p class="subscription_closed">This subscription is closed.</p>
>-                                    [% END %]
>-                                    [% IF ( subscription.location ) %]
>-                                        <p class="subscription_location">Location: [% AuthorisedValues.GetByCode( 'LOC', subscription.location, 1 ) | html %]
>-                                    [% END %]
>-                                    [% IF ( subscription.callnumber ) %]
>-                                        <p class="subscription_callnumber">Call number: [% subscription.callnumber | html %]</p>
>-                                    [% END %]
>-                                    [% IF ( subscription.subscriptionnotes ) %]
>-                                        <p class="subscription_notes">[% subscription.subscriptionnotes | html | html_line_break %] </p>
>-                                    [% END %]
>-                                    <p class="subscription_dates">Subscription from: [% subscription.histstartdate | $KohaDates %] to:[% IF ( subscription.histenddate ) %] [% subscription.histenddate | $KohaDates %] [% ELSE %] now (current)[% END %]</p>
>-                                    [% IF ( subscription.letter ) %]
>-                                        <span class="email_notifications">
>-                                            [% IF ( loggedinusername ) %]
>-                                                [% IF ( subscription.hasalert ) %]
>-                                                    <span>You have subscribed to email notification on new issues. </span><a class="btn btn-secondary" title="Cancel email notification" href="/cgi-bin/koha/opac-alert-subscribe.pl?op=cancel&amp;subscriptionid=[% subscription.subscriptionid | html %]&amp;biblionumber=[% subscription.biblionumber | html %]">Cancel email notification</a>
>+                                        [% IF ( subscription.closed ) %]
>+                                            <p class="subscription_closed">This subscription is closed.</p>
>+                                        [% END %]
>+                                        [% IF ( subscription.location ) %]
>+                                            <p class="subscription_location">Location: [% AuthorisedValues.GetByCode( 'LOC', subscription.location, 1 ) | html %]
>+                                        [% END %]
>+                                        [% IF ( subscription.callnumber ) %]
>+                                            <p class="subscription_callnumber">Call number: [% subscription.callnumber | html %]</p>
>+                                        [% END %]
>+                                        [% IF ( subscription.subscriptionnotes ) %]
>+                                            <p class="subscription_notes">[% subscription.subscriptionnotes | html | html_line_break %] </p>
>+                                        [% END %]
>+                                        <p class="subscription_dates">Subscription from: [% subscription.histstartdate | $KohaDates %] to:[% IF ( subscription.histenddate ) %] [% subscription.histenddate | $KohaDates %] [% ELSE %] now (current)[% END %]</p>
>+                                        [% IF ( subscription.letter ) %]
>+                                            <span class="email_notifications">
>+                                                [% IF ( loggedinusername ) %]
>+                                                    [% IF ( subscription.hasalert ) %]
>+                                                        <span>You have subscribed to email notification on new issues. </span><a class="btn btn-secondary" title="Cancel email notification" href="/cgi-bin/koha/opac-alert-subscribe.pl?op=cancel&amp;subscriptionid=[% subscription.subscriptionid | html %]&amp;biblionumber=[% subscription.biblionumber | html %]">Cancel email notification</a>
>+                                                    [% ELSE %]
>+                                                        <a class="btn btn-secondary" title="Subscribe to email notification on new issues" href="/cgi-bin/koha/opac-alert-subscribe.pl?subscriptionid=[% subscription.subscriptionid | html %]&amp;biblionumber=[% subscription.biblionumber | html %]">Subscribe to email notification on new issues</a>
>+                                                    [% END %]
>                                                 [% ELSE %]
>-                                                    <a class="btn btn-secondary" title="Subscribe to email notification on new issues" href="/cgi-bin/koha/opac-alert-subscribe.pl?subscriptionid=[% subscription.subscriptionid | html %]&amp;biblionumber=[% subscription.biblionumber | html %]">Subscribe to email notification on new issues</a>
>+                                                    <span>You must log in if you want to subscribe to email notification on new issues</span>
>                                                 [% END %]
>-                                            [% ELSE %]
>-                                                <span>You must log in if you want to subscribe to email notification on new issues</span>
>-                                            [% END %]
>-                                        </span>
>-                                    [% END %]
>-                                    [% IF ( subscription.missinglist ) %]
>-                                        <p class="subscription_missing">Missing issues: [% subscription.missinglist | html | html_line_break %] </p>
>-                                    [% END %]
>-                                    [% IF ( subscription.opacnote ) %]
>-                                        <p class="subscription_opacnote">[% subscription.opacnote | html | html_line_break %]</p>
>-                                    [% END %]
>-                                    [% IF ( subscription.latestserials ) %]
>-                                        <p class="subscription_latestissues"> The [% subscription.opacdisplaycount | html %] latest issues for this subscription:</p>
>-                                        <table class="table table-bordered table-striped" id="subscriptionst">
>-                                            <caption class="sr-only">Latest serials</caption>
>-                                            <thead>
>-                                                <tr>
>-                                                    <th id="serial_serialseq" data-colname="serial_serialseq">Issue #</th>
>-                                                    <th id="serial_publisheddate" data-colname="serial_publisheddate">Publication date</th>
>-                                                    <th id="serial_planneddate" data-colname="serial_planneddate">Received date</th>
>-                                                    <th id="serial_status" data-colname="serial_status">Status</th>
>-                                                    <th id="serial_notes" data-colname="serial_notes">Note</th>
>-                                                </tr>
>-                                            </thead>
>-                                            <tbody>
>-                                                [% FOREACH latestserial IN subscription.latestserials %]
>+                                            </span>
>+                                        [% END %]
>+                                        [% IF ( subscription.missinglist ) %]
>+                                            <p class="subscription_missing">Missing issues: [% subscription.missinglist | html | html_line_break %] </p>
>+                                        [% END %]
>+                                        [% IF ( subscription.opacnote ) %]
>+                                            <p class="subscription_opacnote">[% subscription.opacnote | html | html_line_break %]</p>
>+                                        [% END %]
>+                                        [% IF ( subscription.latestserials ) %]
>+                                            <p class="subscription_latestissues"> The [% subscription.opacdisplaycount | html %] latest issues for this subscription:</p>
>+                                            <table class="table table-bordered table-striped" id="subscriptionst">
>+                                                <caption class="sr-only">Latest serials</caption>
>+                                                <thead>
>                                                     <tr>
>-                                                        <td class="serialseq">[% latestserial.serialseq | html %]</td>
>-                                                        <td class="publisheddate" data-order="[% latestserial.publisheddate | html %]">[% latestserial.publisheddate | $KohaDates %]</td>
>-                                                        <td class="planneddate" data-order="[% latestserial.planneddate | html %]">[% latestserial.planneddate | $KohaDates %]</td>
>-                                                        <td class="serial_status">
>-                                                            [% 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 class="serial_notes">[% latestserial.notes | html %]</td>
>+                                                        <th id="serial_serialseq" data-colname="serial_serialseq">Issue #</th>
>+                                                        <th id="serial_publisheddate" data-colname="serial_publisheddate">Publication date</th>
>+                                                        <th id="serial_planneddate" data-colname="serial_planneddate">Received date</th>
>+                                                        <th id="serial_status" data-colname="serial_status">Status</th>
>+                                                        <th id="serial_notes" data-colname="serial_notes">Note</th>
>                                                     </tr>
>-                                                [% END # / FOREACH latestserials %]
>-                                            </tbody>
>-                                        </table>
>-                                    [% END # / IF subscription.latestserials %]
>+                                                </thead>
>+                                                <tbody>
>+                                                    [% FOREACH latestserial IN subscription.latestserials %]
>+                                                        <tr>
>+                                                            <td class="serialseq">[% latestserial.serialseq | html %]</td>
>+                                                            <td class="publisheddate" data-order="[% latestserial.publisheddate | html %]">[% latestserial.publisheddate | $KohaDates %]</td>
>+                                                            <td class="planneddate" data-order="[% latestserial.planneddate | html %]">[% latestserial.planneddate | $KohaDates %]</td>
>+                                                            <td class="serial_status">
>+                                                                [% 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 class="serial_notes">[% latestserial.notes | html %]</td>
>+                                                        </tr>
>+                                                    [% END # / FOREACH latestserials %]
>+                                                </tbody>
>+                                            </table>
>+                                        [% END # / IF subscription.latestserials %]
>+                                    </div>
>+                                [% END # / FOREACH subscriptions %]
>+                                <p class="subscription_moredetails"><a href="opac-serial-issues.pl?biblionumber=[% biblio.biblionumber | uri %]">More details</a></p>
>+                            </div> 
>+                        [% END # IF subscriptionsnumber %]
>+
>+                        [% IF ( LibraryThingForLibrariesID && LibraryThingForLibrariesTabbedView ) %]
>+                            
>+                            <div id="LFTLSimilarItems" class="tab-pane" role="tabpanel" aria-labelledby="tab_LFTLSimilarItems-tab">
>+                                <div class="content_set">
>+                                    
>+                                    
>+                                    
>+                                    <div id="ltfl_related"></div>
>+                                    <div id="ltfl_similars"></div>
>+                                    
>                                 </div>
>-                            [% END # / FOREACH subscriptions %]
>-                            <p class="subscription_moredetails"><a href="opac-serial-issues.pl?biblionumber=[% biblio.biblionumber | uri %]">More details</a></p>
>-                        </div> 
>-                    [% END # IF subscriptionsnumber %]
>-
>-                    [% IF ( LibraryThingForLibrariesID && LibraryThingForLibrariesTabbedView ) %]
>-                        
>-                        <div id="LFTLSimilarItems">
>-                            <div class="content_set">
>-                                
>-                                
>-                                
>-                                <div id="ltfl_related"></div>
>-                                <div id="ltfl_similars"></div>
>-                                
>                             </div>
>-                        </div>
>-                        <div id="LTFLTagBrowse">
>-                            <div class="content_set">
>-                                
>-                                <div id="ltfl_tagbrowse" class="ltfl"></div>
>-                                
>+                            <div id="LTFLTagBrowse" class="tab-pane" role="tabpanel" aria-labelledby="tab_LTFLTagBrowse-tab">
>+                                <div class="content_set">
>+                                    
>+                                    <div id="ltfl_tagbrowse" class="ltfl"></div>
>+                                    
>+                                </div>
>                             </div>
>-                        </div>
>-                    [% END # / IF LibraryThingForLibrariesID && LibraryThingForLibrariesTabbedView %]
>-
>-                    [% IF Koha.Preference( 'OPACComments' ) == 1 %]
>-                        <div id="comments">
>-                            <div id="newcomment"></div>
>-                                [% IF ( reviews ) %]
>-                                    [% FOREACH review IN reviews %]
>-                                        [% IF borrowernumber && review.borrowernumber == borrowernumber %]
>-                                            <div class="commentline yours" id="c[% review.reviewid | html %]">
>-                                                [% IF ( review.avatarurl ) %]
>-                                                    <img class="avatar" src="[% review.avatarurl | html %]" height="80" width="80" alt="" />
>-                                                [% END %]
>-                                                [% IF review.approved %]
>-                                                    <h2 id="comment">Your comment</h2>
>-                                                [% ELSE %]
>-                                                    <h2 id="comment">Your comment (preview, pending approval)</h2>
>-                                                [% END %]
>-                                                <small>[% review.datereviewed | $KohaDates %]</small>
>-                                                <p>
>-                                                    [% FILTER html_break %]
>-                                                        [% review.review | html %]
>-                                                    [% END %]
>-                                                    <a href="#" onclick="Dopop('/cgi-bin/koha/opac-review.pl?biblionumber=[% review.biblionumber | uri %]&amp;reviewid=[% review.reviewid | uri %]');">Edit</a>
>-                                                </p>
>-                                            </div>
>-                                        [% ELSE %]
>-                                            <div class="commentline">
>-                                                [% IF ( ShowReviewer != "none" && review.patron) %]
>+                        [% END # / IF LibraryThingForLibrariesID && LibraryThingForLibrariesTabbedView %]
> 
>+                        [% IF Koha.Preference( 'OPACComments' ) == 1 %]
>+                            <div id="comments" class="tab-pane" role="tabpanel" aria-labelledby="tab_comments-tab">
>+                                <div id="newcomment"></div>
>+                                    [% IF ( reviews ) %]
>+                                        [% FOREACH review IN reviews %]
>+                                            [% IF borrowernumber && review.borrowernumber == borrowernumber %]
>+                                                <div class="commentline yours" id="c[% review.reviewid | html %]">
>                                                     [% IF ( review.avatarurl ) %]
>                                                         <img class="avatar" src="[% review.avatarurl | html %]" height="80" width="80" alt="" />
>                                                     [% END %]
>-                                                    [% SWITCH ShowReviewer %]
>-                                                    [% CASE 'full' %]
>-                                                        <h2 id="comment">Comment by [% review.patron.title | html %] [% review.patron.firstname | html %] [% review.patron.surname | html %]</h2>
>-                                                    [% CASE 'first' %]
>-                                                        <h2 id="comment">Comment by [% review.patron.firstname | html %]</h2>
>-                                                    [% CASE 'surname' %]
>-                                                        <h2 id="comment">Comment by [% review.patron.surname | html %]</h2>
>-                                                    [% CASE 'firstandinitial' %]
>-                                                        <h2 id="comment">Comment by [% review.patron.firstname | html %] [% review.patron.surname|truncate(2,'.') | html %]</h2>
>-                                                    [% CASE 'username' %]
>-                                                        <h2 id="comment">Comment by [% review.patron.userid | html %]</h2>
>+                                                    [% IF review.approved %]
>+                                                        <h2 id="comment">Your comment</h2>
>+                                                    [% ELSE %]
>+                                                        <h2 id="comment">Your comment (preview, pending approval)</h2>
>                                                     [% END %]
>-
>                                                     <small>[% review.datereviewed | $KohaDates %]</small>
>-                                                [% ELSE %]
>-                                                    <h2 id="comment">Patron comment on [% review.datereviewed | $KohaDates %]</h2>
>-                                                [% END # / IF ShowReviewer != "none" && review.patron %]
>-                                                <p>
>-                                                    [% FILTER html_break %]
>-                                                    [% review.review | html %]
>-                                                    [% END %]
>-                                                </p>
>-                                            </div> 
>+                                                    <p>
>+                                                        [% FILTER html_break %]
>+                                                            [% review.review | html %]
>+                                                        [% END %]
>+                                                        <a href="#" onclick="Dopop('/cgi-bin/koha/opac-review.pl?biblionumber=[% review.biblionumber | uri %]&amp;reviewid=[% review.reviewid | uri %]');">Edit</a>
>+                                                    </p>
>+                                                </div>
>+                                            [% ELSE %]
>+                                                <div class="commentline">
>+                                                    [% IF ( ShowReviewer != "none" && review.patron) %]
>+
>+                                                        [% IF ( review.avatarurl ) %]
>+                                                            <img class="avatar" src="[% review.avatarurl | html %]" height="80" width="80" alt="" />
>+                                                        [% END %]
>+                                                        [% SWITCH ShowReviewer %]
>+                                                        [% CASE 'full' %]
>+                                                            <h2 id="comment">Comment by [% review.patron.title | html %] [% review.patron.firstname | html %] [% review.patron.surname | html %]</h2>
>+                                                        [% CASE 'first' %]
>+                                                            <h2 id="comment">Comment by [% review.patron.firstname | html %]</h2>
>+                                                        [% CASE 'surname' %]
>+                                                            <h2 id="comment">Comment by [% review.patron.surname | html %]</h2>
>+                                                        [% CASE 'firstandinitial' %]
>+                                                            <h2 id="comment">Comment by [% review.patron.firstname | html %] [% review.patron.surname|truncate(2,'.') | html %]</h2>
>+                                                        [% CASE 'username' %]
>+                                                            <h2 id="comment">Comment by [% review.patron.userid | html %]</h2>
>+                                                        [% END %]
>+
>+                                                        <small>[% review.datereviewed | $KohaDates %]</small>
>+                                                    [% ELSE %]
>+                                                        <h2 id="comment">Patron comment on [% review.datereviewed | $KohaDates %]</h2>
>+                                                    [% END # / IF ShowReviewer != "none" && review.patron %]
>+                                                    <p>
>+                                                        [% FILTER html_break %]
>+                                                        [% review.review | html %]
>+                                                        [% END %]
>+                                                    </p>
>+                                                </div> 
>+                                            [% END %]
>+                                        [% END # / FOREACH reviews %]
>+                                    [% ELSE %]
>+                                        <p>There are no comments on this title.</p>
>+                                    [% END # / IF reviews %]
>+
>+                                    [% IF ( loggedinusername ) %]
>+                                        [% UNLESS ( loggedincommenter ) %]
>+                                            <div id="addcomment">
>+                                                <a href="#" onclick="Dopop('/cgi-bin/koha/opac-review.pl?biblionumber=[% biblio.biblionumber | uri %]'); return false;">
>+                                                Post your comments on this title.
>+                                                </a>
>+                                            </div>
>                                         [% END %]
>-                                    [% END # / FOREACH reviews %]
>-                                [% ELSE %]
>-                                    <p>There are no comments on this title.</p>
>-                                [% END # / IF reviews %]
>-
>-                                [% IF ( loggedinusername ) %]
>-                                    [% UNLESS ( loggedincommenter ) %]
>+                                    [% ELSE %]
>                                         <div id="addcomment">
>-                                            <a href="#" onclick="Dopop('/cgi-bin/koha/opac-review.pl?biblionumber=[% biblio.biblionumber | uri %]'); return false;">
>-                                            Post your comments on this title.
>-                                            </a>
>+                                            <a class="login-link loginModal-trigger" role="button" data-toggle="modal" href="/cgi-bin/koha/opac-user.pl">Log in to your account</a> to post a comment.
>                                         </div>
>-                                    [% END %]
>-                                [% ELSE %]
>-                                    <div id="addcomment">
>-                                        <a class="login-link loginModal-trigger" role="button" data-toggle="modal" href="/cgi-bin/koha/opac-user.pl">Log in to your account</a> to post a comment.
>-                                    </div>
>-                                [% END # / IF loggedinusername %]
>-                            </div> 
>-                        [% END # / IF OPACComments %]
>+                                    [% END # / IF loggedinusername %]
>+                                </div> 
>+                            [% END # / IF OPACComments %]
>+
>+                            [% IF ( OPACFRBRizeEditions && XISBNS ) %]
>+                                <div id="editions" class="tab-pane" role="tabpanel" aria-labelledby="tab_editions-tab">
>+                                    <h2>Other editions of this work</h2>
>+                                    <table class="table table-bordered table-striped">
>+                                        <caption class="sr-only">Other editions</caption>
>+                                        [% FOREACH XISBN IN XISBNS %]
>+                                            <tr>
>+                                                <td>
>+                                                    [% IF ( OPACAmazonCoverImages ) %]
>+                                                        <img src="https://images-na.ssl-images-amazon.com/images/P/[% XISBN.normalized_isbn | html %].01._AA75_PU_PU-5_.jpg" alt="" />
>+                                                    [% END %]
> 
>-                        [% IF ( OPACFRBRizeEditions && XISBNS ) %]
>-                            <div id="editions">
>-                                <h2>Other editions of this work</h2>
>-                                <table class="table table-bordered table-striped">
>-                                    <caption class="sr-only">Other editions</caption>
>-                                    [% FOREACH XISBN IN XISBNS %]
>-                                        <tr>
>-                                            <td>
>-                                                [% IF ( OPACAmazonCoverImages ) %]
>-                                                    <img src="https://images-na.ssl-images-amazon.com/images/P/[% XISBN.normalized_isbn | html %].01._AA75_PU_PU-5_.jpg" alt="" />
>+                                                    [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %]
>+                                                        [% IF ( XISBN.content_identifier_exists ) %]
>+                                                            <img src="https://secure.syndetics.com/index.aspx?isbn=[% XISBN.browser_normalized_isbn | html %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %][% IF ( XISBN.browser_normalized_upc ) %]&amp;upc=[% XISBN.browser_normalized_upc | html %][% END %][% IF ( XISBN.browser_normalized_oclc ) %]&amp;oclc=[% XISBN.browser_normalized_oclc | html %][% END %]&amp;type=xw10" alt="" />
>+                                                        [% ELSE %]
>+                                                            <span class="no-image">No cover image available</span>
>+                                                        [% END # / IF  XISBN.content_identifier_exists %]
>+                                                    [% END # / IF SyndeticsEnabled && SyndeticsCoverImages %]
>+                                                </td>
>+
>+                                                [% UNLESS ( item_level_itypes ) %]
>+                                                    <td>[% XISBN.description | html %]</td>
>                                                 [% END %]
>+                                                <td>
>+                                                    <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% XISBN.biblionumber | uri %]">[% XISBN.title | html %]</a>
>+                                                    [% IF ( XISBN.author ) %]<span> by </span>[% XISBN.author | html %][% END %]
>+                                                    [% IF ( XISBN.copyrightdate ) %]<span> &copy;</span>[% XISBN.copyrightdate | html %][% END %]
>+                                                    [% IF ( XISBN.publishercode ) %]
>+                                                        <p>[% XISBN.publishercode | html %]
>+                                                            [% IF ( XISBN.place ) %]([% XISBN.place | html %])[% END %]
>+                                                            [% IF ( XISBN.publicationyear ) %][% ', ' _ XISBN.publicationyear | html %][% END %]
>+                                                            [% IF ( XISBN.pages ) %][% XISBN.pages | html %] [% XISBN.illus | html %] [% XISBN.size | html %][% END %]
>+                                                        </p>
>+                                                    [% END %]
>+                                                </td>
>+                                            </tr>
>+                                        [% END # / FOREACH XISBNS %]
>+                                    </table>
>+                                </div> 
>+                            [% END # / IF OPACFRBRizeEditions && XISBNS %]
>+
>+                            [% IF ( HTML5MediaEnabled ) %]
>+                                <div id="html5media" class="tab-pane" role="tabpanel" aria-labelledby="tab_html5media-tab">
>+                                [% 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>
>+                                        [% ELSE %]
>+                                            [% SET ctrl_preload = ' controls preload=none' #translatability %]
>+                                            <[% HTML5MediaParent _ ctrl_preload | html %] >
>+                                            <[% HTML5MediaSet.child | html %] src="[% HTML5MediaSet.srcblock | url %]" [% HTML5MediaSet.typeblock | html %] />
>+                                            <span>[[% HTML5MediaParent | html %] tag not supported by your browser.]</span>
>+                                            </[% HTML5MediaParent | html %]>
>+                                        [% END %]
>+                                    </p>
>+                                [% END %]
>+                                </div>
>+                            [% END # / IF HTML5MediaEnabled %]
> 
>-                                                [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %]
>-                                                    [% IF ( XISBN.content_identifier_exists ) %]
>-                                                        <img src="https://secure.syndetics.com/index.aspx?isbn=[% XISBN.browser_normalized_isbn | html %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %][% IF ( XISBN.browser_normalized_upc ) %]&amp;upc=[% XISBN.browser_normalized_upc | html %][% END %][% IF ( XISBN.browser_normalized_oclc ) %]&amp;oclc=[% XISBN.browser_normalized_oclc | html %][% END %]&amp;type=xw10" alt="" />
>-                                                    [% ELSE %]
>-                                                        <span class="no-image">No cover image available</span>
>-                                                    [% END # / IF  XISBN.content_identifier_exists %]
>-                                                [% END # / IF SyndeticsEnabled && SyndeticsCoverImages %]
>-                                            </td>
>-
>-                                            [% UNLESS ( item_level_itypes ) %]
>-                                                <td>[% XISBN.description | html %]</td>
>-                                            [% END %]
>-                                            <td>
>-                                                <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% XISBN.biblionumber | uri %]">[% XISBN.title | html %]</a>
>-                                                [% IF ( XISBN.author ) %]<span> by </span>[% XISBN.author | html %][% END %]
>-                                                [% IF ( XISBN.copyrightdate ) %]<span> &copy;</span>[% XISBN.copyrightdate | html %][% END %]
>-                                                [% IF ( XISBN.publishercode ) %]
>-                                                    <p>[% XISBN.publishercode | html %]
>-                                                        [% IF ( XISBN.place ) %]([% XISBN.place | html %])[% END %]
>-                                                        [% IF ( XISBN.publicationyear ) %][% ', ' _ XISBN.publicationyear | html %][% END %]
>-                                                        [% IF ( XISBN.pages ) %][% XISBN.pages | html %] [% XISBN.illus | html %] [% XISBN.size | html %][% END %]
>-                                                    </p>
>-                                                [% END %]
>-                                            </td>
>-                                        </tr>
>-                                    [% END # / FOREACH XISBNS %]
>-                                </table>
>-                            </div> 
>-                        [% END # / IF OPACFRBRizeEditions && XISBNS %]
>-
>-                        [% IF ( HTML5MediaEnabled ) %]
>-                            <div 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>
>-                                    [% ELSE %]
>-                                        [% SET ctrl_preload = ' controls preload=none' #translatability %]
>-                                        <[% HTML5MediaParent _ ctrl_preload | html %] >
>-                                          <[% HTML5MediaSet.child | html %] src="[% HTML5MediaSet.srcblock | url %]" [% HTML5MediaSet.typeblock | html %] />
>-                                          <span>[[% HTML5MediaParent | html %] tag not supported by your browser.]</span>
>-                                        </[% HTML5MediaParent | html %]>
>+                            [% IF ( OPACLocalCoverImages && localimages.count ) %]
>+                                <div id="images" class="tab-pane" role="tabpanel" aria-labelledby="tab_images-tab">
>+                                    <p>Click on an image to view it in the image viewer</p>
>+                                    [% FOREACH image IN localimages %]
>+                                        <a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblio.biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
>+                                            <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
>+                                        </a>
>                                     [% END %]
>-                                </p>
>-                              [% END %]
>-                            </div>
>-                        [% END # / IF HTML5MediaEnabled %]
>+                                </div>
>+                            [% END # / IF OPACLocalCoverImages && localimages.size %]
> 
>-                        [% IF ( OPACLocalCoverImages && localimages.count ) %]
>-                            <div id="images">
>-                                <p>Click on an image to view it in the image viewer</p>
>-                                [% FOREACH image IN localimages %]
>-                                    <a href="/cgi-bin/koha/opac-imageviewer.pl?biblionumber=[% biblio.biblionumber | uri %]&amp;imagenumber=[% image.imagenumber | uri %]" title="Local cover image">
>-                                        <img src="/cgi-bin/koha/opac-image.pl?thumbnail=1&amp;imagenumber=[% image.imagenumber | uri %]" alt="Local cover image" />
>-                                    </a>
>-                                [% END %]
>-                            </div>
>-                        [% END # / IF OPACLocalCoverImages && localimages.size %]
>+                    </div> 
> 
>-                </div> 
>-
>-                [% IF ( NovelistSelectProfile && NovelistSelectView == 'below' && ( normalized_isbn || normalized_upc ) ) %]
>-                    <div id="NovelistSelect">
>-                        <h2>Novelist Select</h2>
>-                        <div data-novelist-novelistselect="[% IF normalized_isbn %][% normalized_isbn | html %][% ELSE %][% normalized_upc | html %][% END %]"></div>
>-                    </div>
>-                [% END %]
>+                    [% IF ( NovelistSelectProfile && NovelistSelectView == 'below' && ( normalized_isbn || normalized_upc ) ) %]
>+                        <div id="NovelistSelect" class="tab-pane" role="tabpanel" aria-labelledby="tab_NovelistSelect-tab">
>+                            <h2>Novelist Select</h2>
>+                            <div data-novelist-novelistselect="[% IF normalized_isbn %][% normalized_isbn | html %][% ELSE %][% normalized_upc | html %][% END %]"></div>
>+                        </div>
>+                    [% END %]
> 
>-                [% IF ( Babeltheque ) %]
>-                    <div>
>-                        <div id="BW_etiquettes"></div>
>-                        <div id="BW_suggestions"></div>
>-                    </div>
>-                    <div class="clearfix"></div>
>-                    <div>
>-                        <div id="BW_podcasts"></div>
>-                    </div>
>-                    <div class="clearfix"></div>
>-                    <div>
>-                        <div id="BW_videos"></div>
>-                    </div>
>-                [% END # / IF Babeltheque %]
>+                    [% IF ( Babeltheque ) %]
>+                        <div>
>+                            <div id="BW_etiquettes"></div>
>+                            <div id="BW_suggestions"></div>
>+                        </div>
>+                        <div class="clearfix"></div>
>+                        <div>
>+                            <div id="BW_podcasts"></div>
>+                        </div>
>+                        <div class="clearfix"></div>
>+                        <div>
>+                            <div id="BW_videos"></div>
>+                        </div>
>+                    [% END # / IF Babeltheque %]
>+                </div> 
> 
>             </div> 
> 
>@@ -1624,7 +1651,20 @@
>                 });
>             [% END # /IF OPACDetailQRCode %]
> 
>-            $('#bibliodescriptions').tabs();
>+            [% SWITCH defaulttab -%]
>+            [%   CASE 'holdings' -%]
>+                showBsTab("bibliodescriptions", "holdings");
>+            [%   CASE 'components' -%]
>+                showBsTab("bibliodescriptions", "components");
>+            [%   CASE 'subscriptions' -%]
>+                showBsTab("bibliodescriptions", "subscriptions");
>+            [%   CASE 'serialcollection' -%]
>+                showBsTab("bibliodescriptions", "serialcollection");
>+            [%   CASE 'media' -%]
>+                showBsTab("bibliodescriptions", "html5media");
>+            [%   CASE  -%]
>+                showBsTab("bibliodescriptions", "holdings");
>+            [% END -%]
> 
>             [% IF ( Koha.Preference('OpacBrowseResults') && busc ) %]
>                 $(".l_Results").show();
>@@ -1961,6 +2001,14 @@
>             });
>         });
> 
>+        function showBsTab( container, panelid ){
>+            if( $( "#" + panelid ).length == 1 ){
>+                $("#" + container + " a[href='#" + panelid + "']").tab("show");
>+            } else {
>+                $("#" + container + " a:first").tab("show");
>+            }
>+        }
>+
>         function multiSearchRequest(){
>             var values = [];
>             $(".select_term").each(function(){
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
>index c637e4ad97..dc5e2aac67 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-readingrecord.tt
>@@ -3,6 +3,7 @@
> [% USE KohaDates %]
> [% USE TablesSettings %]
> [% USE AdditionalContents %]
>+[% USE Asset %]
> [% SET OpacNav = AdditionalContents.get( location => "OpacNav", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
> [% SET OpacNavBottom = AdditionalContents.get( location => "OpacNavBottom", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
> [% INCLUDE 'doc-head-open.inc' %]
>@@ -76,14 +77,21 @@
>                             [% END %]
> 
>                             [% IF Koha.Preference( 'OnSiteCheckouts' ) == 1 %]
>-                            <div id="tabs" class="toptabs">
>-                                <ul class="js-show">
>-                                    <li id="tab_all"><a href="#tabs-container">All</a></li>
>-                                    <li id="tab_checkout"><a href="#tabs-container">Checkouts</a></li>
>-                                    <li id="tab_onsite_checkout"><a href="#tabs-container">On-site checkouts</a></li>
>-                                </ul>
>+                                <div id="tabs" class="toptabs">
>+                                    <ul class="nav nav-tabs" role="tablist">
>+                                        <li class="nav-item" role="presentation">
>+                                            <a id="tab_all" class="nav-link active" data-toggle="tab" role="tab" aria-controls="tabs-container" aria-selected="true"  href="#tabs-container">All</a>
>+                                        </li>
>+                                        <li class="nav-item" role="presentation">
>+                                            <a id="tab_checkout" class="nav-link" data-toggle="tab" role="tab" aria-controls="tabs-container" aria-selected="false"  href="#tabs-container">Checkouts</a>
>+                                        </li>
>+                                        <li class="nav-item" role="presentation">
>+                                            <a id="tab_onsite_checkout" class="nav-link" data-toggle="tab" role="tab" aria-controls="tabs-container" aria-selected="false"  href="#tabs-container">On-site checkouts</a>
>+                                        </li>
>+                                    </ul>
>+                                    <div class="tab-content">
>                             [% END %]
>-                                <div id="tabs-container" style="overflow:hidden">
>+                                <div class="tab-pane active" role="tabpanel" id="tabs-container">
>                                     <table id="readingrec" class="table table-bordered table-striped">
>                                         <caption class="sr-only">Checkout history</caption>
>                                         <thead>
>@@ -177,6 +185,7 @@
>                                     </table>
>                                 </div> 
>                             [% IF ( Koha.Preference( 'OnSiteCheckouts' ) == 1 ) %]
>+                                    </div> 
>                                 </div> 
>                             [% END %]
>                         </div> 
>@@ -208,16 +217,14 @@
>             }
>         }, columns_settings);
> 
>-        var tabs = $("#tabs").tabs({
>-            activate: function(e, ui) {
>-                var id = $(ui.newTab).attr("id");
>-                if ( id == "tab_checkout" ) {
>-                    table.fnFilter("standard_checkout", 0);
>-                } else if ( id == "tab_onsite_checkout" ) {
>-                    table.fnFilter("onsite_checkout", 0);
>-                } else { // all
>-                    table.fnFilter('', 0);
>-                }
>+        $("#tabs a[data-toggle='tab']").on("shown.bs.tab", function (e) {
>+            var id = e.target.id;
>+            if ( id == "tab_checkout" ) {
>+                table.fnFilter("standard_checkout", 0);
>+            } else if ( id == "tab_onsite_checkout" ) {
>+                table.fnFilter("onsite_checkout", 0);
>+            } else { // all
>+                table.fnFilter('', 0);
>             }
>         });
>     });
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
>index 5f72bd8d52..7bfb0e11ee 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-search-history.tt
>@@ -51,12 +51,17 @@
>                     <h1>Search history</h1>
>                     [% IF Koha.Preference( 'OpacAuthorities' ) == 1 %]
>                         <div id="tabs" class="toptabs">
>-                            <ul>
>-                                <li><a href="#biblio_tab">Catalog</a></li>
>-                                <li><a href="#authority_tab">Authority</a></li>
>+                            <ul class="nav nav-tabs" role="tablist">
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link active" id="biblio-tab-link" href="#biblio_tab" aria-controls="biblio_tab" role="tab" data-toggle="tab" aria-selected="true">Catalog</a>
>+                                </li>
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" id="authority-tab-link" href="#authority_tab" aria-controls="authority_tab" role="tab" data-toggle="tab" aria-selected="false">Authority</a>
>+                                </li>
>                             </ul>
>+                        <div class="tab-content">
>                     [% END %]
>-                        <div id="biblio_tab">
>+                        <div id="biblio_tab" role="tabpanel" class="tab-pane active" aria-labelledby="biblio-tab-link">
>                             <div id="current_biblio">
>                                 [% IF ( current_biblio_searches ) %]
>                                     <h2>Current session</h2>
>@@ -155,85 +160,90 @@
>                         </div> 
> 
>                         [% IF Koha.Preference( 'OpacAuthorities' ) == 1 %]
>-                            <div id="authority_tab">
>-                                [% IF ( current_authority_searches ) %]
>-                                    <h2>Current session</h2>
>-                                    <form action="/cgi-bin/koha/opac-search-history.pl" method="post">
>-                                        <legend class="sr-only">Toolbar control</legend>
>-                                        [% INCLUDE 'toolbar_controls' %]
>-                                        <input type="hidden" name="action" value="delete" />
>-                                        <table class="historyt table table-bordered table-striped">
>-                                            <caption class="sr-only">Current session</caption>
>-                                            <thead>
>-                                                <tr>
>-                                                    <th></th>
>-                                                    <th>Date</th>
>-                                                    <th>Search</th>
>-                                                    <th>Results</th>
>-                                                </tr>
>-                                            </thead>
>-                                            <tbody>
>-                                                [% FOREACH s IN current_authority_searches %]
>+                            <div id="authority_tab" role="tabpanel" class="tab-pane" aria-labelledby="authority-tab-link">
>+                                <div id="current_authority">
>+                                    [% IF ( current_authority_searches ) %]
>+                                        <h2>Current session</h2>
>+                                        <form action="/cgi-bin/koha/opac-search-history.pl" method="post">
>+                                            <legend class="sr-only">Toolbar control</legend>
>+                                            [% INCLUDE 'toolbar_controls' %]
>+                                            <input type="hidden" name="action" value="delete" />
>+                                            <table class="historyt table table-bordered table-striped">
>+                                                <caption class="sr-only">Current session</caption>
>+                                                <thead>
>                                                     <tr>
>-                                                        <td class="selectcol">
>-                                                            <input type="checkbox" name="id" value="[% s.id | html %]" id="result[% s.id | html %]" />
>-                                                        </td>
>-                                                        <td data-order="[% s.time | html %]">
>-                                                            <label for="result[% s.id | html %]">
>-                                                                [% s.time |$KohaDates  with_hours => 1 %]
>-                                                            </label>
>-                                                        </td>
>-                                                        <td><a href="/cgi-bin/koha/opac-authorities-home.pl?[% s.query_cgi | $raw %]">[% s.query_desc | html %]</a></td>
>-                                                        <td>[% s.total | html %]</td>
>+                                                        <th></th>
>+                                                        <th>Date</th>
>+                                                        <th>Search</th>
>+                                                        <th>Results</th>
>                                                     </tr>
>-                                                [% END %]
>-                                            </tbody>
>-                                        </table>
>-                                        <input type="submit" class="btn btn-danger remove-selected" value="Remove selected searches">
>-                                    </form>
>-                                [% END # / IF ( current_authority_searches ) %]
>-
>-                                [% IF ( previous_authority_searches ) %]
>-                                    <h2>Previous sessions</h2>
>-                                    <form action="/cgi-bin/koha/opac-search-history.pl" method="post">
>-                                        <legend class="sr-only">Toolbar control</legend>
>-                                        [% INCLUDE 'toolbar_controls' %]
>-                                        <input type="hidden" name="action" value="delete" />
>-                                        <table class="historyt table table-bordered table-striped">
>-                                            <caption class="sr-only">Previous sessions</caption>
>-                                            <thead>
>-                                                <tr>
>-                                                    <th></th>
>-                                                    <th>Date</th>
>-                                                    <th>Search</th>
>-                                                    <th>Results</th>
>-                                                </tr>
>-                                            </thead>
>-                                            <tbody>
>-                                                [% FOREACH s IN previous_authority_searches %]
>+                                                </thead>
>+                                                <tbody>
>+                                                    [% FOREACH s IN current_authority_searches %]
>+                                                        <tr>
>+                                                            <td class="selectcol">
>+                                                                <input type="checkbox" name="id" value="[% s.id | html %]" id="result[% s.id | html %]" />
>+                                                            </td>
>+                                                            <td data-order="[% s.time | html %]">
>+                                                                <label for="result[% s.id | html %]">
>+                                                                    [% s.time |$KohaDates  with_hours => 1 %]
>+                                                                </label>
>+                                                            </td>
>+                                                            <td><a href="/cgi-bin/koha/opac-authorities-home.pl?[% s.query_cgi | $raw %]">[% s.query_desc | html %]</a></td>
>+                                                            <td>[% s.total | html %]</td>
>+                                                        </tr>
>+                                                    [% END %]
>+                                                </tbody>
>+                                            </table>
>+                                            <input type="submit" class="btn btn-danger remove-selected" value="Remove selected searches">
>+                                        </form>
>+                                    [% END # / IF ( current_authority_searches ) %]
>+                                </div> 
>+                                <hr />
>+                                <div id="previous_authority">
>+                                    [% IF ( previous_authority_searches ) %]
>+                                        <h2>Previous sessions</h2>
>+                                        <form action="/cgi-bin/koha/opac-search-history.pl" method="post">
>+                                            <legend class="sr-only">Toolbar control</legend>
>+                                            [% INCLUDE 'toolbar_controls' %]
>+                                            <input type="hidden" name="action" value="delete" />
>+                                            <table class="historyt table table-bordered table-striped">
>+                                                <caption class="sr-only">Previous sessions</caption>
>+                                                <thead>
>                                                     <tr>
>-                                                        <td class="selectcol">
>-                                                            <input type="checkbox" name="id" value="[% s.id | html %]" id="result[% s.id | html %]" />
>-                                                        </td>
>-                                                        <td data-order="[% s.time | html %]">
>-                                                            <label for="result[% s.id | html %]">
>-                                                                [% s.time |$KohaDates  with_hours => 1 %]
>-                                                            </label>
>-                                                        </td>
>-                                                        <td><a href="/cgi-bin/koha/opac-authorities-home.pl?[% s.query_cgi | $raw %]">[% s.query_desc | html %]</a></td>
>-                                                        <td>[% s.total | html %]</td>
>+                                                        <th></th>
>+                                                        <th>Date</th>
>+                                                        <th>Search</th>
>+                                                        <th>Results</th>
>                                                     </tr>
>-                                                [% END %]
>-                                            </tbody>
>-                                        </table>
>-                                        <input type="submit" class="btn btn-danger remove-selected" value="Remove selected searches">
>-                                    </form>
>-                                [% END # / IF ( previous_authority_searches )%]
>+                                                </thead>
>+                                                <tbody>
>+                                                    [% FOREACH s IN previous_authority_searches %]
>+                                                        <tr>
>+                                                            <td class="selectcol">
>+                                                                <input type="checkbox" name="id" value="[% s.id | html %]" id="result[% s.id | html %]" />
>+                                                            </td>
>+                                                            <td data-order="[% s.time | html %]">
>+                                                                <label for="result[% s.id | html %]">
>+                                                                    [% s.time |$KohaDates  with_hours => 1 %]
>+                                                                </label>
>+                                                            </td>
>+                                                            <td><a href="/cgi-bin/koha/opac-authorities-home.pl?[% s.query_cgi | $raw %]">[% s.query_desc | html %]</a></td>
>+                                                            <td>[% s.total | html %]</td>
>+                                                        </tr>
>+                                                    [% END %]
>+                                                </tbody>
>+                                            </table>
>+                                            <input type="submit" class="btn btn-danger remove-selected" value="Remove selected searches">
>+                                        </form>
>+                                    [% END # / IF ( previous_authority_searches )%]
>+                                </div>
> 
>                                 [% IF !current_authority_searches && !previous_authority_searches %]
>                                     <p>Your authority search history is empty.</p>
>                                 [% END %]
>                             </div> 
>+                        </div> 
>                         [% END # / IF Koha.Preference( 'OpacAuthorities' ) %]
>                     </div> 
>                 </div> 
>@@ -278,8 +288,6 @@
>             }
>         }));
> 
>-        [% IF Koha.Preference( 'OpacAuthorities' ) == 1 %]$('#tabs').tabs();[% END %]
>-
>         $(".CheckNone").click(function(e){
>             e.preventDefault();
>             var form = $(this).parents("form").get(0);
>diff --git a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>index a8dcd2a5f8..a87a228d2c 100644
>--- a/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>+++ b/koha-tmpl/opac-tmpl/bootstrap/en/modules/opac-user.tt
>@@ -200,166 +200,206 @@
>                     [% END %]
> 
>                     <div id="opac-user-views" class="toptabs">
>-                        <ul>
>-                            <li><a href="#opac-user-checkouts">Checked out ([% issues_count | html %])</a></li>
>-                            [% IF relatives %]<li><a href="#opac-user-relative-issues">Relatives' checkouts</a></li>[% END %]
>-                            [% IF ( overdues_count ) %]<li><a href="#opac-user-overdues">Overdue ([% overdues_count | html %])</a></li>[% END %]
>+                        <ul class="nav nav-tabs" role="tablist">
>+                            <li class="nav-item" role="presentation">
>+                                <a class="nav-link active" id="opac-user-checkouts-tab" data-toggle="tab" role="tab" aria-controls="opac-user-checkouts" aria-selected="true"  href="#opac-user-checkouts">Checked out ([% issues_count | html %])</a>
>+                            </li>
>+                            [% IF relatives %]
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" id="opac-user-relative-issues-tab" data-toggle="tab" role="tab" aria-controls="opac-user-relative-issues" aria-selected="false" href="#opac-user-relative-issues">Relatives' checkouts</a>
>+                                </li>
>+                            [% END %]
>+                            [% IF ( overdues_count ) %]
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" id="opac-user-overdues-tab" data-toggle="tab" role="tab" aria-controls="opac-user-overdues" aria-selected="false" href="#opac-user-overdues">Overdue ([% overdues_count | html %])</a>
>+                                </li>
>+                            [% END %]
>                             [% IF ( OPACFinesTab ) %]
>-                            [% IF ( amountoutstanding > 0 ) %]<li><a href="#opac-user-fines">Charges ([% amountoutstanding | $Price %])</a></li>[% END %]
>-                                [% IF ( amountoutstanding < 0 ) %]<li><a href="#opac-user-fines">Credits ([% amountoutstanding * -1 | $Price %])</a></li>[% END %]
>-                                [% IF relatives_with_fines %]<li><a href="#opac-user-relative-fines">Relatives' charges</a></li>[% END %]
>+                                [% IF ( amountoutstanding > 0 ) %]
>+                                    <li class="nav-item" role="presentation">
>+                                        <a class="nav-link" id="opac-user-fines-tab" data-toggle="tab" role="tab" aria-controls="opac-user-fines" aria-selected="false" href="#opac-user-fines">Charges ([% amountoutstanding | $Price %])</a>
>+                                    </li>
>+                                [% END %]
>+                                [% IF ( amountoutstanding < 0 ) %]
>+                                    <li class="nav-item" role="presentation">
>+                                        <a class="nav-link" id="opac-user-fines-tab" data-toggle="tab" role="tab" aria-controls="opac-user-fines" aria-selected="false" href="#opac-user-fines">Credits ([% amountoutstanding * -1 | $Price %])</a>
>+                                    </li>
>+                                [% END %]
>+                                [% IF relatives_with_fines %]
>+                                    <li class="nav-item" role="presentation">
>+                                        <a class="nav-link" id="opac-user-relative-fines-tab" data-toggle="tab" role="tab" aria-controls="opac-user-relative-fines" aria-selected="false" href="#opac-user-relative-fines">Relatives' charges</a>
>+                                    </li>
>+                                [% END %]
>                             [% END %]
> 
>                             [% IF borrower_club_enrollments.count || borrower_enrollable_clubs.count %]
>-                                <li>
>-                                    <a id="opac-user-clubs-tab-link" href="#opac-user-clubs">
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" data-toggle="tab" role="tab" aria-controls="opac-user-clubs" aria-selected="false" id="opac-user-clubs-tab-link" href="#opac-user-clubs">
>                                         Clubs ([% borrower_club_enrollments.count || 0 | html %]/[% borrower_enrollable_clubs.count || 0 | html %])
>                                     </a>
>                                 </li>
>                             [% END %]
> 
>-                            [% IF ( RESERVES.count ) %]<li><a href="#opac-user-holds">Holds ([% RESERVES.count | html %])</a></li>[% END %]
>-                            [% IF Koha.Preference('UseRecalls') && RECALLS.count %]<li><a href="#opac-user-recalls">Recalls ([% RECALLS.count | html %])</a></li>[% END %]
>-                            [% IF Koha.Preference('ArticleRequests') %]<li><a href="#opac-user-article-requests">Article requests ([% current_article_requests.size || 0 | html %])</a></li>[% END %]
>+                            [% IF ( RESERVES.count ) %]
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" id="opac-user-holds-tab" data-toggle="tab" role="tab" aria-controls="opac-user-holds" aria-selected="false" href="#opac-user-holds">Holds ([% RESERVES.count | html %])</a>
>+                                </li>
>+                            [% END %]
>+                            [% IF Koha.Preference('UseRecalls') && RECALLS.count %]
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" id="opac-user-recalls-tab" data-toggle="tab" role="tab" aria-controls="opac-user-recalls" aria-selected="false" href="#opac-user-recalls">Recalls ([% RECALLS.count | html %])</a>
>+                                </li>
>+                            [% END %]
>+                            [% IF Koha.Preference('ArticleRequests') %]
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" id="opac-user-article-requests-tab" data-toggle="tab" role="tab" aria-controls="opac-user-article-requests" aria-selected="false" href="#opac-user-article-requests">Article requests ([% current_article_requests.size || 0 | html %])</a>
>+                                </li>
>+                            [% END %]
>                             [% IF ( OverDriveCirculation ) %]
>-                            <li><a href="#opac-user-overdrive">OverDrive account</a></li>
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" id="opac-user-overdrive-tab" data-toggle="tab" role="tab" aria-controls="opac-user-overdrive" aria-selected="false" href="#opac-user-overdrive">OverDrive account</a>
>+                                </li>
>                             [% END %]
>                             [% IF ( RecordedBooksCirculation ) %]
>-                            <li><a href="#opac-user-recordedbooks">RecordedBooks account</a></li>
>+                                <li class="nav-item" role="presentation">
>+                                    <a class="nav-link" id="opac-user-recordedbooks-tab" data-toggle="tab" role="tab" aria-controls="opac-user-recordedbooks" aria-selected="false" href="#opac-user-recordedbooks">RecordedBooks account</a>
>+                                </li>
>                             [% END %]
>                         </ul>
>+                        <div class="tab-content">
> 
>-                        <div id="opac-user-overdrive">
>-                        </div>
>-                        <div id="opac-user-recordedbooks">
>-                        </div>
>-                        <div id="opac-user-checkouts">
>-                            [% IF ( issues_count ) %]
>-                                <form id="renewselected" action="/cgi-bin/koha/opac-renew.pl" method="post">
>-                                    <legend class="sr-only">Renew selected</legend>
>-                                    <input type="hidden" name="borrowernumber" value="[% borrowernumber | html %]">
>-                                    <input type="hidden" name="from" value="opac_user" />
>-                                    <table id="checkoutst" class="table table-bordered table-striped">
>-                                        <caption>[% issues_count | html %] Item(s) checked out</caption>
>-                                        <thead>
>-                                            <tr>
>-                                                [% IF ( JacketImages ) %]<th class="nosort">&nbsp;</th>[% END %]
>-                                                <th class="anti-the">Title</th>
>-                                                <th>Author</th>
>-                                                <th class="psort">Due</th>
>-                                                [% UNLESS ( item_level_itypes ) %]
>-                                                    <th>Item type</th>
>-                                                [% END %]
>-                                                [% IF ( show_barcode ) %]
>-                                                    <th>Barcode</th>
>-                                                [% END %]
>-                                                    <th>Call number</th>
>-                                                [% IF ( OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %]
>-                                                    <th>Renew</th>
>-                                                [% END %]
>-                                                [% IF ( OPACFinesTab ) %]
>-                                                    <th>Fines</th>
>-                                                [% END %]
>-                                                [% IF ( OPACMySummaryHTML ) %]
>-                                                    <th class="nosort">Links</th>
>-                                                [% END %]
>-                                                [% IF ( Koha.Preference('AllowCheckoutNotes') ) %]
>-                                                    <th class="hidden">Checkout note</th>
>-                                                    <th id="checkout-notes" class="nosort noExport" title="Use this to report any problems with your currently checked out items">Report a problem</th>
>-                                                [% END %]
>-                                            </tr>
>-                                        </thead>
>-                                        <tbody>
>-                                            [% FOREACH ISSUE IN ISSUES %]
>-                                                [% IF ( ISSUE.overdue ) %]<tr class="overdue">[% ELSE %]<tr>[% END %]
>-                                                [% IF ( JacketImages ) %]<td class="jacketcell">
>-                                                    [% IF ( OPACAmazonCoverImages ) %]
>-                                                        [% IF ( ISSUE.normalized_isbn ) %]
>-                                                            <a href="http://www.amazon.com/gp/reader/[% ISSUE.normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link" title="View on Amazon.com"><img src="https://images-na.ssl-images-amazon.com/images/P/[% ISSUE.normalized_isbn | html %].01.THUMBZZZ.jpg" alt="View on Amazon.com" class="item-thumbnail"/></a>
>-                                                        [% ELSE %]
>-                                                            <a href="#"><span class="no-image">No cover image available</span></a>
>-                                                        [% END %]
>+                            <div id="opac-user-overdrive" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-overdrive-tab">
>+                            </div>
>+                            <div id="opac-user-recordedbooks" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-recordedbooks-tab">
>+                            </div>
>+                            <div id="opac-user-checkouts" class="tab-pane active" role="tabpanel" aria-labelledby="opac-user-checkouts-tab">
>+                                [% IF ( issues_count ) %]
>+                                    <form id="renewselected" action="/cgi-bin/koha/opac-renew.pl" method="post">
>+                                        <legend class="sr-only">Renew selected</legend>
>+                                        <input type="hidden" name="borrowernumber" value="[% borrowernumber | html %]">
>+                                        <input type="hidden" name="from" value="opac_user" />
>+                                        <table id="checkoutst" class="table table-bordered table-striped">
>+                                            <caption>[% issues_count | html %] Item(s) checked out</caption>
>+                                            <thead>
>+                                                <tr>
>+                                                    [% IF ( JacketImages ) %]<th class="nosort">&nbsp;</th>[% END %]
>+                                                    <th class="anti-the">Title</th>
>+                                                    <th>Author</th>
>+                                                    <th class="psort">Due</th>
>+                                                    [% UNLESS ( item_level_itypes ) %]
>+                                                        <th>Item type</th>
>                                                     [% END %]
>-
>-                                                    [% IF ( GoogleJackets ) %]
>-                                                        [% IF ( ISSUE.normalized_isbn ) %]
>-                                                            <div style="display:block;" title="Click to view in Google Books" class="[% ISSUE.normalized_isbn | html %]" id="gbs-thumbnail[% loop.count | html %]"></div>
>-                                                        [% ELSE %]
>-                                                            <a href="http://books.google.com/books?q=[% ISSUE.title |url %]"><span class="no-image">No cover image available</span></a>
>-                                                        [% END %]
>+                                                    [% IF ( show_barcode ) %]
>+                                                        <th>Barcode</th>
>                                                     [% END %]
>-
>-                                                    [% IF ( BakerTaylorEnabled ) %]
>-                                                        [% bt_id = ( ISSUE.normalized_upc || ISSUE.normalized_isbn ) %]
>-                                                        [% IF ( bt_id ) %]
>-                                                            <a href="https://[% BakerTaylorBookstoreURL | uri %][% bt_id | uri %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
>-                                                        [% ELSE %]
>-                                                            <span class="no-image">No cover image available</span>
>-                                                        [% END %]
>+                                                        <th>Call number</th>
>+                                                    [% IF ( OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %]
>+                                                        <th>Renew</th>
>                                                     [% END %]
>-
>-                                                    [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
>-                                                        [% SET custom_cover_image_url = ISSUE.biblio_object.custom_cover_image_url %]
>-                                                        [% IF custom_cover_image_url %]
>-                                                            <a class="custom_cover_image" href="[% custom_cover_image_url | url %]"><img alt="Cover image" src="[% custom_cover_image_url | url %]" /></a>
>-                                                        [% END %]
>+                                                    [% IF ( OPACFinesTab ) %]
>+                                                        <th>Fines</th>
>                                                     [% END %]
>-
>-                                                    [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %]
>-                                                        <img src="https://secure.syndetics.com/index.aspx?isbn=[% ISSUE.normalized_isbn | html %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %]&amp;type=xw10&amp;upc=[% ISSUE.normalized_upc | html %]&amp;oclc=[% ISSUE.normalized_oclc | html %]" alt="" class="item-thumbnail" />
>+                                                    [% IF ( OPACMySummaryHTML ) %]
>+                                                        <th class="nosort">Links</th>
>                                                     [% END %]
>+                                                    [% IF ( Koha.Preference('AllowCheckoutNotes') ) %]
>+                                                        <th class="hidden">Checkout note</th>
>+                                                        <th id="checkout-notes" class="nosort noExport" title="Use this to report any problems with your currently checked out items">Report a problem</th>
>+                                                    [% END %]
>+                                                </tr>
>+                                            </thead>
>+                                            <tbody>
>+                                                [% FOREACH ISSUE IN ISSUES %]
>+                                                    [% IF ( ISSUE.overdue ) %]<tr class="overdue">[% ELSE %]<tr>[% END %]
>+                                                    [% IF ( JacketImages ) %]
>+                                                        <td class="jacketcell">
>+                                                            [% IF ( OPACAmazonCoverImages ) %]
>+                                                                [% IF ( ISSUE.normalized_isbn ) %]
>+                                                                    <a href="http://www.amazon.com/gp/reader/[% ISSUE.normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link" title="View on Amazon.com"><img src="https://images-na.ssl-images-amazon.com/images/P/[% ISSUE.normalized_isbn | html %].01.THUMBZZZ.jpg" alt="View on Amazon.com" class="item-thumbnail"/></a>
>+                                                                [% ELSE %]
>+                                                                    <a href="#"><span class="no-image">No cover image available</span></a>
>+                                                                [% END %]
>+                                                            [% END %]
> 
>-                                                </td>[% END # / IF JacketImages %]
>+                                                            [% IF ( GoogleJackets ) %]
>+                                                                [% IF ( ISSUE.normalized_isbn ) %]
>+                                                                    <div style="display:block;" title="Click to view in Google Books" class="[% ISSUE.normalized_isbn | html %]" id="gbs-thumbnail[% loop.count | html %]"></div>
>+                                                                [% ELSE %]
>+                                                                    <a href="http://books.google.com/books?q=[% ISSUE.title |url %]"><span class="no-image">No cover image available</span></a>
>+                                                                [% END %]
>+                                                            [% END %]
> 
>-                                                <td class="title">
>-                                                    <a class="title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ISSUE.biblionumber | html %]">[% INCLUDE 'biblio-title.inc' biblio=ISSUE %]</a>
>-                                                    [% IF ( ISSUE.enumchron ) %] [% ISSUE.enumchron | html %][% END %]
>+                                                            [% IF ( BakerTaylorEnabled ) %]
>+                                                                [% bt_id = ( ISSUE.normalized_upc || ISSUE.normalized_isbn ) %]
>+                                                                [% IF ( bt_id ) %]
>+                                                                    <a href="https://[% BakerTaylorBookstoreURL | uri %][% bt_id | uri %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
>+                                                                [% ELSE %]
>+                                                                    <span class="no-image">No cover image available</span>
>+                                                                [% END %]
>+                                                            [% END %]
> 
>-                                                    [% IF ( ISSUE.onsite_checkout ) %] <em class="onsite_checkout">(On-site checkout)</em>[% END %]
>+                                                            [% IF Koha.Preference('OPACCustomCoverImages') AND Koha.Preference('CustomCoverImagesURL') %]
>+                                                                [% SET custom_cover_image_url = ISSUE.biblio_object.custom_cover_image_url %]
>+                                                                [% IF custom_cover_image_url %]
>+                                                                    <a class="custom_cover_image" href="[% custom_cover_image_url | url %]"><img alt="Cover image" src="[% custom_cover_image_url | url %]" /></a>
>+                                                                [% END %]
>+                                                            [% END %]
> 
>-                                                    [% IF ( Koha.Preference('OpacStarRatings') == 'all' ) %]
>-                                                        [% INCLUDE 'user-star-ratings.inc' item=ISSUE %]
>-                                                    [% END %]
>+                                                            [% IF ( SyndeticsEnabled && SyndeticsCoverImages ) %]
>+                                                                <img src="https://secure.syndetics.com/index.aspx?isbn=[% ISSUE.normalized_isbn | html %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %]&amp;type=xw10&amp;upc=[% ISSUE.normalized_upc | html %]&amp;oclc=[% ISSUE.normalized_oclc | html %]" alt="" class="item-thumbnail" />
>+                                                            [% END %]
>+                                                        </td>
>+                                                    [% END # / IF JacketImages %]
> 
>-                                                    [% IF ( ISSUE.recall ) %]<br><i>This item has been recalled. Please return by the new due date.</i>[% END %]
>-                                                </td>
>+                                                    <td class="title">
>+                                                        <a class="title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ISSUE.biblionumber | html %]">[% INCLUDE 'biblio-title.inc' biblio=ISSUE %]</a>
>+                                                        [% IF ( ISSUE.enumchron ) %] [% ISSUE.enumchron | html %][% END %]
> 
>-                                                <td class="author">[% ISSUE.author | html %]</td>
>-                                                [% IF ( ISSUE.overdue ) %]
>-                                                    <td class="date_due overdue" data-order="[% ISSUE.date_due | html %]">
>-                                                        <span class="tdlabel">Date due:</span>
>-                                                        [% ISSUE.date_due | $KohaDates  as_due_date => 1 %]
>-                                                    </td>
>-                                                [% ELSE %]
>-                                                    <td class="date_due" data-order="[% ISSUE.date_due | html %]">
>-                                                        <span class="tdlabel">Date due:</span>
>-                                                        [% ISSUE.date_due | $KohaDates  as_due_date => 1 %]
>-                                                    </td>
>-                                                [% END %]
>-                                                [% UNLESS ( item_level_itypes ) %]
>-                                                    <td class="itype">
>-                                                        <span class="tdlabel">Item type:</span>
>-                                                        [% IF ( ISSUE.imageurl && !Koha.Preference('OpacNoItemTypeImages') ) %]
>-                                                            <img src="[% ISSUE.imageurl | html %]" title="[% ISSUE.description | html %]" alt="[% ISSUE.description | html %]" />
>-                                                        [% END %] [% ISSUE.description | html %]
>-                                                    </td>
>-                                                [% END %]
>-                                                [% IF ( show_barcode ) %]
>-                                                    <td class="barcode">
>-                                                        <span class="tdlabel">Barcode:</span>
>-                                                        [% ISSUE.barcode | html %]
>+                                                        [% IF ( ISSUE.onsite_checkout ) %] <em class="onsite_checkout">(On-site checkout)</em>[% END %]
>+
>+                                                        [% IF ( Koha.Preference('OpacStarRatings') == 'all' ) %]
>+                                                            [% INCLUDE 'user-star-ratings.inc' item=ISSUE %]
>+                                                        [% END %]
>+
>+                                                        [% IF ( ISSUE.recall ) %]<br><i>This item has been recalled. Please return by the new due date.</i>[% END %]
>                                                     </td>
>-                                                [% END %]
>-                                                <td class="call_no">
>-                                                    <span class="tdlabel">Call number:</span>
>-                                                    [% ISSUE.itemcallnumber | html %]
>-                                                </td>
>-                                                [% IF ( OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %]
>-                                                    [% IF ( ISSUE.status && canrenew ) %]
>-                                                        <td class="renew" data-order="[% ISSUE.renewsleft | html %]">
>+
>+                                                    <td class="author">[% ISSUE.author | html %]</td>
>+                                                    [% IF ( ISSUE.overdue ) %]
>+                                                        <td class="date_due overdue" data-order="[% ISSUE.date_due | html %]">
>+                                                            <span class="tdlabel">Date due:</span>
>+                                                            [% ISSUE.date_due | $KohaDates  as_due_date => 1 %]
>+                                                        </td>
>                                                     [% ELSE %]
>-                                                        <td class="renew" data-order="0">
>+                                                        <td class="date_due" data-order="[% ISSUE.date_due | html %]">
>+                                                            <span class="tdlabel">Date due:</span>
>+                                                            [% ISSUE.date_due | $KohaDates  as_due_date => 1 %]
>+                                                        </td>
>+                                                    [% END %]
>+                                                    [% UNLESS ( item_level_itypes ) %]
>+                                                        <td class="itype">
>+                                                            <span class="tdlabel">Item type:</span>
>+                                                            [% IF ( ISSUE.imageurl && !Koha.Preference('OpacNoItemTypeImages') ) %]
>+                                                                <img src="[% ISSUE.imageurl | html %]" title="[% ISSUE.description | html %]" alt="[% ISSUE.description | html %]" />
>+                                                            [% END %] [% ISSUE.description | html %]
>+                                                        </td>
>+                                                    [% END %]
>+                                                    [% IF ( show_barcode ) %]
>+                                                        <td class="barcode">
>+                                                            <span class="tdlabel">Barcode:</span>
>+                                                            [% ISSUE.barcode | html %]
>+                                                        </td>
>                                                     [% END %]
>+                                                    <td class="call_no">
>+                                                        <span class="tdlabel">Call number:</span>
>+                                                        [% ISSUE.itemcallnumber | html %]
>+                                                    </td>
>+                                                    [% IF ( OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %]
>+                                                        [% IF ( ISSUE.status && canrenew ) %]
>+                                                            <td class="renew" data-order="[% ISSUE.renewsleft | html %]">
>+                                                        [% ELSE %]
>+                                                            <td class="renew" data-order="0">
>+                                                        [% END %]
>                                                         [% IF ISSUE.renewed %]<span class="blabel label-success">Renewed!</span><br />[% END %]
>                                                         [% IF ( ISSUE.status ) %]
>                                                             [% IF ( canrenew ) %]
>@@ -425,514 +465,515 @@
>                                                         [% ELSIF ( ISSUE.item_denied_renewal ) %]
>                                                             Renewal not allowed
>                                                         [% END %]
>-                                                    </td>
>-                                                [% END %]
>-                                                [% IF ( OPACFinesTab ) %]
>-                                                    <td class="fines">
>-                                                        <span class="tdlabel">Fines:</span>
>-                                                        [% IF ( ISSUE.charges ) %]
>-                                                            Yes (Item overdue or lost)
>-                                                        [% ELSIF ( ISSUE.rentalfines ) %]
>-                                                            Yes (Rental fees)
>-                                                        [% ELSE %]
>-                                                            No
>-                                                        [% END %]
>-                                                    </td>
>-                                                [% END %]
>-                                                [% IF ( OPACMySummaryHTML ) %]
>-                                                    <td class="links">[% ISSUE.MySummaryHTML | $raw %]</td>
>-                                                [% END %]
>-                                                [% IF ( Koha.Preference('AllowCheckoutNotes') ) %]
>-                                                    <td>
>-                                                        [% ISSUE.note | html %]
>-                                                    </td>
>-                                                    <td class="note">
>-                                                        <div id="viewnote_[% ISSUE.issue_id | html %]">
>-                                                            [% ISSUE.note | html %]
>-                                                        </div>
>-                                                        <a id="save_[% ISSUE.issue_id | html %]" href="/cgi-bin/koha/opac-issue-note.pl?issue_id=[% ISSUE.issue_id | html %]" class="btn btn-primary btn-sm btn-add-note noprint" data-title="[% ISSUE.title | html %] [% FOREACH subtitle IN ISSUE.subtitle.split(' \| ') %][% IF Koha.Preference('marcflavour')=='UNIMARC' %],[% END %][% subtitle | html %][% END %]" data-issueid="[% ISSUE.issue_id | html %]" id="save_[% ISSUE.issue_id | html %]">
>-                                                            [% IF ( ISSUE.note ) -%]
>-                                                                <span>Edit note</span>
>-                                                            [% ELSE -%]
>-                                                                <span>Add note</span>
>+                                                        </td>
>+                                                    [% END %]
>+                                                    [% IF ( OPACFinesTab ) %]
>+                                                        <td class="fines">
>+                                                            <span class="tdlabel">Fines:</span>
>+                                                            [% IF ( ISSUE.charges ) %]
>+                                                                Yes (Item overdue or lost)
>+                                                            [% ELSIF ( ISSUE.rentalfines ) %]
>+                                                                Yes (Rental fees)
>+                                                            [% ELSE %]
>+                                                                No
>                                                             [% END %]
>-                                                        </a>
>-                                                        <input type="hidden" id="note_[% ISSUE.issue_id | html %]" name="note" value="[% ISSUE.note | html %]" data-origvalue="[% ISSUE.note | html %]" />
>-                                                    </td>
>-                                                [% END %]
>-                                            </tr>
>-                                        [% END # /FOREACH ISSUES %]
>-                                    </tbody>
>-                                </table>
>-                                [% IF ( canrenew && !userdebarred && OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %]
>-                                    <input type="submit" class="btn btn-primary" value="Renew selected" />
>-                                    <button type="button" id="renewall_js" class="btn btn-primary">Renew all</button>
>-                                [% END %]
>-                                </form>
>-
>-                                [% IF ( canrenew && !userdebarred && OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %]
>-                                    <form id="renewall" class="js-hide" action="/cgi-bin/koha/opac-renew.pl" method="post">
>-                                        <legend class="sr-only">Renew</legend>
>-                                        <input type="hidden" name="from" value="opac_user" />
>-                                        <input type="hidden" name="borrowernumber" value="[% borrowernumber | html %]" />
>-                                        [% FOREACH ISSUE IN ISSUES %]
>-                                            [% IF ISSUE.status %]
>-                                                <input type="hidden" name="item" value="[% ISSUE.itemnumber | html %]" />
>-                                            [% END %]
>+                                                        </td>
>+                                                    [% END %]
>+                                                    [% IF ( OPACMySummaryHTML ) %]
>+                                                        <td class="links">[% ISSUE.MySummaryHTML | $raw %]</td>
>+                                                    [% END %]
>+                                                    [% IF ( Koha.Preference('AllowCheckoutNotes') ) %]
>+                                                        <td>
>+                                                            [% ISSUE.note | html %]
>+                                                        </td>
>+                                                        <td class="note">
>+                                                            <div id="viewnote_[% ISSUE.issue_id | html %]">
>+                                                                [% ISSUE.note | html %]
>+                                                            </div>
>+                                                            <a id="save_[% ISSUE.issue_id | html %]" href="/cgi-bin/koha/opac-issue-note.pl?issue_id=[% ISSUE.issue_id | html %]" class="btn btn-primary btn-sm btn-add-note noprint" data-title="[% ISSUE.title | html %] [% FOREACH subtitle IN ISSUE.subtitle.split(' \| ') %][% IF Koha.Preference('marcflavour')=='UNIMARC' %],[% END %][% subtitle | html %][% END %]" data-issueid="[% ISSUE.issue_id | html %]" id="save_[% ISSUE.issue_id | html %]">
>+                                                                [% IF ( ISSUE.note ) -%]
>+                                                                    <span>Edit note</span>
>+                                                                [% ELSE -%]
>+                                                                    <span>Add note</span>
>+                                                                [% END %]
>+                                                            </a>
>+                                                            <input type="hidden" id="note_[% ISSUE.issue_id | html %]" name="note" value="[% ISSUE.note | html %]" data-origvalue="[% ISSUE.note | html %]" />
>+                                                        </td>
>+                                                    [% END %]
>+                                                    </tr>
>+                                                [% END # /FOREACH ISSUES %]
>+                                            </tbody>
>+                                        </table>
>+                                        [% IF ( canrenew && !userdebarred && OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %]
>+                                            <input type="submit" class="btn btn-primary" value="Renew selected" />
>+                                            <button type="button" id="renewall_js" class="btn btn-primary">Renew all</button>
>                                         [% END %]
>-                                        <input type="submit" class="btn btn-primary" value="Renew all" />
>                                     </form>
>-                                [% END %]
>-                            [% ELSE %]
>-                                <table class="table table-bordered table-striped">
>-                                    <caption class="sr-only">Checked out</caption>
>-                                    <tr><td>You have nothing checked out</td></tr>
>-                                </table>
>-                            [% END # IF issues_count %]
>-
>-                            
>-                            <div class="modal" id="addNoteModal" tabindex="-1" aria-labelledby="addNoteLabel" aria-hidden="true">
>-                                <div class="modal-dialog">
>-                                    <form action="#" id="addNoteForm">
>-                                        <div class="modal-content">
>-                                            <div class="modal-header">
>-                                                <h5 class="modal-title" id="addNoteLabel">Report a problem</h5>
>-                                                <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">
>-                                                    <span aria-hidden="true">&times;</span>
>-                                                </button>
>-                                            </div>
>-                                            <div class="modal-body" id="addNoteBody">
>-                                                <h6 id="addNoteTitle"></h6>
>-                                                <input type="hidden" id="addNoteIssueId" name="issue_id" value="" />
>-                                                <textarea name="note" id="addNote" rows="4"></textarea>
>-                                                <div class="hint">Your note will be shown to the librarian when the item is checked in.</div>
>-                                            </div>
>-                                            <div class="modal-footer">
>-                                                <button type="submit" class="btn btn-primary">Submit note</button>
>-                                                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
>+
>+                                    [% IF ( canrenew && !userdebarred && OpacRenewalAllowed && !( logged_in_user.is_expired && logged_in_user.category.effective_BlockExpiredPatronOpacActions ) ) %]
>+                                        <form id="renewall" class="js-hide" action="/cgi-bin/koha/opac-renew.pl" method="post">
>+                                            <legend class="sr-only">Renew</legend>
>+                                            <input type="hidden" name="from" value="opac_user" />
>+                                            <input type="hidden" name="borrowernumber" value="[% borrowernumber | html %]" />
>+                                            [% FOREACH ISSUE IN ISSUES %]
>+                                                [% IF ISSUE.status %]
>+                                                    <input type="hidden" name="item" value="[% ISSUE.itemnumber | html %]" />
>+                                                [% END %]
>+                                            [% END %]
>+                                            <input type="submit" class="btn btn-primary" value="Renew all" />
>+                                        </form>
>+                                    [% END %]
>+                                [% ELSE %]
>+                                    <table class="table table-bordered table-striped">
>+                                        <caption class="sr-only">Checked out</caption>
>+                                        <tr><td>You have nothing checked out</td></tr>
>+                                    </table>
>+                                [% END # IF issues_count %]
>+
>+                                
>+                                <div class="modal" id="addNoteModal" tabindex="-1" aria-labelledby="addNoteLabel" aria-hidden="true">
>+                                    <div class="modal-dialog">
>+                                        <form action="#" id="addNoteForm">
>+                                            <div class="modal-content">
>+                                                <div class="modal-header">
>+                                                    <h5 class="modal-title" id="addNoteLabel">Report a problem</h5>
>+                                                    <button type="button" class="closebtn" data-dismiss="modal" aria-label="Close">
>+                                                        <span aria-hidden="true">&times;</span>
>+                                                    </button>
>+                                                </div>
>+                                                <div class="modal-body" id="addNoteBody">
>+                                                    <h6 id="addNoteTitle"></h6>
>+                                                    <input type="hidden" id="addNoteIssueId" name="issue_id" value="" />
>+                                                    <textarea name="note" id="addNote" rows="4"></textarea>
>+                                                    <div class="hint">Your note will be shown to the librarian when the item is checked in.</div>
>+                                                </div>
>+                                                <div class="modal-footer">
>+                                                    <button type="submit" class="btn btn-primary">Submit note</button>
>+                                                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
>+                                                </div>
>                                             </div>
>-                                        </div>
>-                                    </form>
>+                                        </form>
>+                                    </div>
>                                 </div>
>-                            </div>
> 
>-                        </div> 
>+                            </div> 
> 
>-                        [% IF borrower_club_enrollments.count || borrower_enrollable_clubs.count %]
>-                            <div id="opac-user-clubs">
>-                                Loading...
>-                            </div>
>-                        [% END %]
>-
>-                        [% IF ( OPACFinesTab ) %]
>-                            
>-                            [% IF ( amountoutstanding > 0 ) %]
>-                                <div id="opac-user-fines">
>-                                    <table class="table table-bordered table-striped">
>-                                        <caption>Charges</caption>
>-                                        <thead><tr><th colspan="2">Amount</th></tr></thead>
>-                                        <tbody>
>-                                            <tr>
>-                                                <td>You currently owe fines and charges amounting to:</td>
>-                                                <td><a href="/cgi-bin/koha/opac-account.pl">[% amountoutstanding | $Price %]</a></td>
>-                                            </tr>
>-                                        </tbody>
>-                                    </table>
>+                            [% IF borrower_club_enrollments.count || borrower_enrollable_clubs.count %]
>+                                <div id="opac-user-clubs" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-clubs-tab-link">
>+                                    Loading...
>                                 </div>
>                             [% END %]
> 
>-                            [% IF ( amountoutstanding < 0 ) %]
>-                                <div id="opac-user-fines">
>-                                    <table class="table table-bordered table-striped">
>-                                        <caption>Credits</caption>
>-                                        <thead><tr><th colspan="2">Amount</th></tr></thead>
>-                                        <tbody>
>+                            [% IF ( OPACFinesTab ) %]
>+                                
>+                                [% IF ( amountoutstanding > 0 ) %]
>+                                    <div id="opac-user-fines" class="tab-pane" id="home" role="tabpanel" aria-labelledby="opac-user-fines-tab">
>+                                        <table class="table table-bordered table-striped">
>+                                            <caption>Charges</caption>
>+                                            <thead><tr><th colspan="2">Amount</th></tr></thead>
>+                                            <tbody>
>+                                                <tr>
>+                                                    <td>You currently owe fines and charges amounting to:</td>
>+                                                    <td><a href="/cgi-bin/koha/opac-account.pl">[% amountoutstanding | $Price %]</a></td>
>+                                                </tr>
>+                                            </tbody>
>+                                        </table>
>+                                    </div>
>+                                [% END %]
>+
>+                                [% IF ( amountoutstanding < 0 ) %]
>+                                    <div id="opac-user-fines" class="tab-pane" id="home" role="tabpanel" aria-labelledby="opac-user-fines-tab">
>+                                        <table class="table table-bordered table-striped">
>+                                            <caption>Credits</caption>
>+                                            <thead><tr><th colspan="2">Amount</th></tr></thead>
>+                                            <tbody>
>+                                                <tr>
>+                                                    <td>You have a credit of:</td><td><a href="/cgi-bin/koha/opac-account.pl">[% amountoutstanding * -1 | $Price %]</a></td>
>+                                                </tr>
>+                                            </tbody>
>+                                        </table>
>+                                    </div>
>+                                [% END %]
>+
>+                                [% IF relatives_with_fines %]
>+                                    <div id="opac-user-relative-fines" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-relative-fines-tab">
>+                                        <table class="table table-bordered table-striped">
>+                                            <caption>Fines and charges</caption>
>+                                            <thead>
>+                                                <tr>
>+                                                    <th colspan="2">Amount</th>
>+                                                </tr>
>+                                            </thead>
>+                                            <tbody>
>+                                                [% FOREACH r IN relatives_with_fines %]
>+                                                <tr>
>+                                                    <td>[% r.firstname | html %] [% r.surname | html %] currently owes fines and charges amounting to:</td>
>+                                                    <td><a href="/cgi-bin/koha/opac-account.pl#g[% r.id | uri %]">[% r.account.balance | $Price %]</a></td>
>+                                                </tr>
>+                                                [% END %]
>+                                            </tbody>
>+                                        </table>
>+                                    </div>
>+                                [% END %]
>+                            [% END # / OPACFinesTab %]
>+
>+                            [% IF relatives %]
>+                                <div id="opac-user-relative-issues" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-relative-issues-tab">
>+                                    <table id="opac-user-relative-issues-table" class="table table-bordered table-striped">
>+                                        <caption class="sr-only">Relative issues</caption>
>+                                        <thead>
>                                             <tr>
>-                                                <td>You have a credit of:</td><td><a href="/cgi-bin/koha/opac-account.pl">[% amountoutstanding * -1 | $Price %]</a></td>
>+                                                <th class="anti-the">Title</th>
>+                                                <th>Due</th>
>+                                                <th>Barcode</th>
>+                                                <th>Call number</th>
>+                                                <th class="psort">Relative</th>
>                                             </tr>
>+                                        </thead>
>+
>+                                        <tbody>
>+                                            [% FOREACH r IN relatives %]
>+                                                [% FOREACH c IN r.checkouts %]
>+                                                    <tr>
>+                                                        <td>
>+                                                            <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% c.item.biblio.biblionumber | uri %]">
>+                                                                [% c.item.biblio.title | html %][% IF ( c.item.enumchron ) %] [% c.item.enumchron | html %][% END %]
>+                                                            </a>
>+                                                        </td>
>+
>+                                                        <td>
>+                                                            [% c.date_due | $KohaDates %]
>+                                                        </td>
>+
>+                                                        <td>
>+                                                            [% c.item.barcode | html %]
>+                                                        </td>
>+
>+                                                        <td>
>+                                                            [% c.item.itemcallnumber | html %]
>+                                                        </td>
>+
>+                                                        <td>
>+                                                            [% r.firstname | html %] [% r.surname | html %]
>+                                                        </td>
>+                                                    </tr>
>+                                                [% END %]
>+                                            [% END %]
>                                         </tbody>
>                                     </table>
>                                 </div>
>                             [% END %]
> 
>-                            [% IF relatives_with_fines %]
>-                               <div id="opac-user-relative-fines">
>-                                    <table class="table table-bordered table-striped">
>-                                   <caption>Fines and charges</caption>
>+                            [% IF ( overdues_count ) %]
>+                                <div id="opac-user-overdues" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-overdues-tab">
>+                                    <table id="overduest" class="table table-bordered table-striped">
>+                                        <caption>Overdues <span class="count">([% overdues_count | html %] total)</span></caption>
>+                                        
>                                         <thead>
>                                             <tr>
>-                                                <th colspan="2">Amount</th>
>+                                                [% IF ( JacketImages ) %]<th class="nosort">&nbsp;</th>[% END %]
>+                                                <th class="anti-the">Title</th>
>+                                                [% UNLESS ( item_level_itypes ) %]<th>Item type</th> [% END %]
>+                                                [% IF ( show_barcode ) %]<th>Barcode</th>[% END %]
>+                                                <th>Call number</th>
>+                                                <th class="psort">Due</th>
>+                                                [% IF ( OpacRenewalAllowed ) %]
>+                                                    <th class="nosort">Renew</th>
>+                                                [% END %]
>+                                                [% IF ( OPACFinesTab ) %]
>+                                                    <th>Fines</th>
>+                                                [% END %]
>                                             </tr>
>                                         </thead>
>                                         <tbody>
>-                                            [% FOREACH r IN relatives_with_fines %]
>-                                            <tr>
>-                                                <td>[% r.firstname | html %] [% r.surname | html %] currently owes fines and charges amounting to:</td>
>-                                                <td><a href="/cgi-bin/koha/opac-account.pl#g[% r.id | uri %]">[% r.account.balance | $Price %]</a></td>
>-                                            </tr>
>-                                            [% END %]
>-                                        </tbody>
>-                                    </table>
>-                                </div>
>-                            [% END %]
>-                        [% END # / OPACFinesTab %]
>-
>-                        [% IF relatives %]
>-                            <div id="opac-user-relative-issues">
>-                                <table id="opac-user-relative-issues-table" class="table table-bordered table-striped">
>-                                    <caption class="sr-only">Relative issues</caption>
>-                                    <thead>
>-                                        <tr>
>-                                            <th class="anti-the">Title</th>
>-                                            <th>Due</th>
>-                                            <th>Barcode</th>
>-                                            <th>Call number</th>
>-                                            <th class="psort">Relative</th>
>-                                        </tr>
>-                                    </thead>
>-
>-                                    <tbody>
>-                                        [% FOREACH r IN relatives %]
>-                                            [% FOREACH c IN r.checkouts %]
>+                                            [% FOREACH OVERDUE IN OVERDUES %]
>                                                 <tr>
>-                                                    <td>
>-                                                        <a href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% c.item.biblio.biblionumber | uri %]">
>-                                                            [% c.item.biblio.title | html %][% IF ( c.item.enumchron ) %] [% c.item.enumchron | html %][% END %]
>-                                                        </a>
>-                                                    </td>
>-
>-                                                    <td>
>-                                                        [% c.date_due | $KohaDates %]
>-                                                    </td>
>-
>-                                                    <td>
>-                                                        [% c.item.barcode | html %]
>-                                                    </td>
>-
>-                                                    <td>
>-                                                        [% c.item.itemcallnumber | html %]
>-                                                    </td>
>+                                                    [% IF ( JacketImages ) %]
>+                                                        <td class="jacketcell">
>+                                                        [% IF ( OPACAmazonCoverImages ) %]
>+                                                            [% IF ( OVERDUE.normalized_isbn ) %]
>+                                                                <a href="http://www.amazon.com/gp/reader/[% OVERDUE.normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link" title="View on Amazon.com"><img src="https://images-na.ssl-images-amazon.com/images/P/[% OVERDUE.normalized_isbn | html %].01.THUMBZZZ.jpg" alt="View on Amazon.com" class="item-thumbnail" /></a>
>+                                                            [% ELSE %]
>+                                                                <a href="#"><span class="no-image">No cover image available</span></a>
>+                                                            [% END %]
>+                                                        [% END %]
> 
>-                                                    <td>
>-                                                        [% r.firstname | html %] [% r.surname | html %]
>-                                                    </td>
>-                                                </tr>
>-                                            [% END %]
>-                                        [% END %]
>-                                    </tbody>
>-                                </table>
>-                            </div>
>-                        [% END %]
>-
>-                        [% IF ( overdues_count ) %]
>-                            <div id="opac-user-overdues">
>-                                <table id="overduest" class="table table-bordered table-striped">
>-                                    <caption>Overdues <span class="count">([% overdues_count | html %] total)</span></caption>
>-                                    
>-                                    <thead>
>-                                        <tr>
>-                                            [% IF ( JacketImages ) %]<th class="nosort">&nbsp;</th>[% END %]
>-                                            <th class="anti-the">Title</th>
>-                                            [% UNLESS ( item_level_itypes ) %]<th>Item type</th> [% END %]
>-                                            [% IF ( show_barcode ) %]<th>Barcode</th>[% END %]
>-                                            <th>Call number</th>
>-                                            <th class="psort">Due</th>
>-                                            [% IF ( OpacRenewalAllowed ) %]
>-                                                <th class="nosort">Renew</th>
>-                                            [% END %]
>-                                            [% IF ( OPACFinesTab ) %]
>-                                                <th>Fines</th>
>-                                            [% END %]
>-                                        </tr>
>-                                    </thead>
>-                                    <tbody>
>-                                        [% FOREACH OVERDUE IN OVERDUES %]
>-                                            <tr>
>-                                                [% IF ( JacketImages ) %]
>-                                                    <td class="jacketcell">
>-                                                    [% IF ( OPACAmazonCoverImages ) %]
>-                                                        [% IF ( OVERDUE.normalized_isbn ) %]
>-                                                            <a href="http://www.amazon.com/gp/reader/[% OVERDUE.normalized_isbn | uri %][% AmazonAssocTag | uri %]#reader-link" title="View on Amazon.com"><img src="https://images-na.ssl-images-amazon.com/images/P/[% OVERDUE.normalized_isbn | html %].01.THUMBZZZ.jpg" alt="View on Amazon.com" class="item-thumbnail" /></a>
>-                                                        [% ELSE %]
>-                                                            <a href="#"><span class="no-image">No cover image available</span></a>
>+                                                        [% IF ( GoogleJackets ) %]
>+                                                            [% IF ( OVERDUE.normalized_isbn ) %]
>+                                                                <div style="display:block;" title="Click to view in Google Books" class="[% OVERDUE.normalized_isbn | html %]" id="gbs-thumbnail[% loop.count | html %]"></div>
>+                                                            [% ELSE %]
>+                                                                <a href="http://books.google.com/books?q=[% OVERDUE.title |url %]"><span class="no-image">No cover image available</span></a>
>+                                                            [% END %]
>                                                         [% END %]
>-                                                    [% END %]
> 
>-                                                    [% IF ( GoogleJackets ) %]
>-                                                        [% IF ( OVERDUE.normalized_isbn ) %]
>-                                                            <div style="display:block;" title="Click to view in Google Books" class="[% OVERDUE.normalized_isbn | html %]" id="gbs-thumbnail[% loop.count | html %]"></div>
>-                                                        [% ELSE %]
>-                                                            <a href="http://books.google.com/books?q=[% OVERDUE.title |url %]"><span class="no-image">No cover image available</span></a>
>+                                                        [% IF ( BakerTaylorEnabled ) %]
>+                                                            [% bt_id = ( OVERDUE.normalized_upc || OVERDUE.normalized_isbn ) %]
>+                                                            [% IF ( bt_id ) %]
>+                                                                <a href="https://[% BakerTaylorBookstoreURL | uri %][% bt_id | uri %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
>+                                                            [% ELSE %]
>+                                                                <span class="no-image">No cover image available</span>
>+                                                            [% END %]
>                                                         [% END %]
>-                                                    [% END %]
> 
>-                                                    [% IF ( BakerTaylorEnabled ) %]
>-                                                        [% bt_id = ( OVERDUE.normalized_upc || OVERDUE.normalized_isbn ) %]
>-                                                        [% IF ( bt_id ) %]
>-                                                            <a href="https://[% BakerTaylorBookstoreURL | uri %][% bt_id | uri %]"><img alt="See Baker &amp; Taylor" src="[% BakerTaylorImageURL | html %][% bt_id | html %]" /></a>
>-                                                        [% ELSE %]
>-                                                            <span class="no-image">No cover image available</span>
>+                                                        [% IF ( SyndeticsCoverImages ) %]
>+                                                            <img src="https://secure.syndetics.com/index.aspx?isbn=[% OVERDUE.normalized_isbn | html %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %]&amp;upc=[% OVERDUE.normalized_upc | html %]&amp;oclc=[% OVERDUE.normalized_oclc | html %]&amp;type=xw10" alt="" class="item-thumbnail" />
>                                                         [% END %]
>-                                                    [% END %]
>+                                                        </td>
>+                                                    [% END # /IF jacketcell %]
> 
>-                                                    [% IF ( SyndeticsCoverImages ) %]
>-                                                        <img src="https://secure.syndetics.com/index.aspx?isbn=[% OVERDUE.normalized_isbn | html %]/SC.GIF&amp;client=[% SyndeticsClientCode | html %]&amp;upc=[% OVERDUE.normalized_upc | html %]&amp;oclc=[% OVERDUE.normalized_oclc | html %]&amp;type=xw10" alt="" class="item-thumbnail" />
>-                                                    [% END %]
>+                                                    <td>
>+                                                        <a class="title" href="/cgi-bin/koha/opac-detail.pl?bib=[% OVERDUE.biblionumber | html %]">[% INCLUDE 'biblio-title.inc' biblio=OVERDUE %]</a>
>+                                                        <span class="item-details">[% OVERDUE.author | html %]</span>
>                                                     </td>
>-                                                [% END # /IF jacketcell %]
> 
>-                                                <td>
>-                                                    <a class="title" href="/cgi-bin/koha/opac-detail.pl?bib=[% OVERDUE.biblionumber | html %]">[% INCLUDE 'biblio-title.inc' biblio=OVERDUE %]</a>
>-                                                    <span class="item-details">[% OVERDUE.author | html %]</span>
>-                                                </td>
>-
>-                                                [% UNLESS ( item_level_itypes ) %]
>+                                                    [% UNLESS ( item_level_itypes ) %]
>+                                                        <td>
>+                                                            [% IF ( OVERDUE.imageurl  && !Koha.Preference('OpacNoItemTypeImages') ) %]
>+                                                                <img src="[% OVERDUE.imageurl | html %]" title="[% OVERDUE.description | html %]" alt="[% OVERDUE.description | html %]" />
>+                                                            [% END %] [% OVERDUE.description | html %]
>+                                                        </td>
>+                                                    [% END %]
>+                                                    [% IF ( show_barcode ) %]
>+                                                        <td>
>+                                                            <span class="tdlabel">Barcode:</span>
>+                                                            [% OVERDUE.barcode | html %]
>+                                                        </td>
>+                                                    [% END %]
>                                                     <td>
>-                                                        [% IF ( OVERDUE.imageurl  && !Koha.Preference('OpacNoItemTypeImages') ) %]
>-                                                            <img src="[% OVERDUE.imageurl | html %]" title="[% OVERDUE.description | html %]" alt="[% OVERDUE.description | html %]" />
>-                                                        [% END %] [% OVERDUE.description | html %]
>+                                                        <span class="tdlabel">Call number:</span>
>+                                                        [% OVERDUE.itemcallnumber | html %]
>                                                     </td>
>-                                                [% END %]
>-                                                [% IF ( show_barcode ) %]
>-                                                    <td>
>-                                                        <span class="tdlabel">Barcode:</span>
>-                                                        [% OVERDUE.barcode | html %]
>+                                                    <td data-order="[% OVERDUE.date_due | html %]">
>+                                                        <span class="tdlabel">Date due:</span>
>+                                                        [% OVERDUE.date_due | $KohaDates  as_due_date => 1 %]
>                                                     </td>
>-                                                [% END %]
>-                                                <td>
>-                                                    <span class="tdlabel">Call number:</span>
>-                                                    [% OVERDUE.itemcallnumber | html %]
>-                                                </td>
>-                                                <td data-order="[% OVERDUE.date_due | html %]">
>-                                                    <span class="tdlabel">Date due:</span>
>-                                                    [% OVERDUE.date_due | $KohaDates  as_due_date => 1 %]
>-                                                </td>
>-                                                [% IF ( OpacRenewalAllowed ) %]
>-                                                    <td>
>-                                                        [% IF ( OVERDUE.debarred ) %]
>-                                                            Account frozen
>-                                                        [% ELSIF ( OVERDUE.status ) %]
>-                                                            [% IF ( canrenew ) %]
>-                                                                <a href="/cgi-bin/koha/opac-renew.pl?from=opac_user&amp;item=[% OVERDUE.itemnumber | uri %]&amp;bornum=[% OVERDUE.borrowernumber | uri %]">Renew</a>
>+                                                    [% IF ( OpacRenewalAllowed ) %]
>+                                                        <td>
>+                                                            [% IF ( OVERDUE.debarred ) %]
>+                                                                Account frozen
>+                                                            [% ELSIF ( OVERDUE.status ) %]
>+                                                                [% IF ( canrenew ) %]
>+                                                                    <a href="/cgi-bin/koha/opac-renew.pl?from=opac_user&amp;item=[% OVERDUE.itemnumber | uri %]&amp;bornum=[% OVERDUE.borrowernumber | uri %]">Renew</a>
>+                                                                [% END %]
>+                                                                    <span class="renewals">(
>+                                                                        [% OVERDUE.renewsleft | html %] of [% OVERDUE.renewsallowed | html %] renewals remaining
>+                                                                        [% IF Koha.Preference('UnseenRenewals') && ISSUE.unseenallowed %]
>+                                                                            / [% OVERDUE.unseenleft | html %] of [% OVERDUE.unseenallowed | html %] renewals left before the item must be seen by the library
>+                                                                        [% END %]
>+                                                                    )</span>
>+                                                            [% ELSIF ( OVERDUE.norenew_overdue ) %]
>+                                                                Not allowed<span class="renewals">(overdue)</span>
>+                                                            [% ELSIF ( OVERDUE.onreserve ) %]
>+                                                                On hold
>+                                                            [% ELSE %]
>+                                                                No renewals left
>                                                             [% END %]
>-                                                                <span class="renewals">(
>-                                                                    [% OVERDUE.renewsleft | html %] of [% OVERDUE.renewsallowed | html %] renewals remaining
>-                                                                    [% IF Koha.Preference('UnseenRenewals') && ISSUE.unseenallowed %]
>-                                                                        / [% OVERDUE.unseenleft | html %] of [% OVERDUE.unseenallowed | html %] renewals left before the item must be seen by the library
>-                                                                    [% END %]
>-                                                                )</span>
>-                                                        [% ELSIF ( OVERDUE.norenew_overdue ) %]
>-                                                            Not allowed<span class="renewals">(overdue)</span>
>-                                                        [% ELSIF ( OVERDUE.onreserve ) %]
>-                                                            On hold
>-                                                        [% ELSE %]
>-                                                            No renewals left
>-                                                        [% END %]
>-                                                    </td>
>-                                                [% END %]
>-                                                [% IF ( OPACFinesTab ) %]
>-                                                    <td>
>-                                                        <span class="tdlabel">Fines:</span>
>-                                                        [% IF ( OVERDUE.charges ) %]
>-                                                            Yes
>-                                                        [% ELSE %]
>-                                                            No
>-                                                        [% END %]
>-                                                    </td>
>-                                                [% END %]
>-                                            </tr>
>-                                        [% END %]
>-                                    </tbody>
>-                                </table>
>-                            </div> 
>-                        [% END # /overdues_count %]
>-
>-                        [% PROCESS 'holds-table.inc' HOLDS = RESERVES, SuspendHoldsOpac = SuspendHoldsOpac, showpriority = showpriority, AutoResumeSuspendedHolds = AutoResumeSuspendedHolds %]
>-
>-                        [% IF Koha.Preference('UseRecalls') && RECALLS.count %]
>-                            <div id="opac-user-recalls">
>-                                <table id="recalls-table" class="table table-bordered table-striped">
>-                                    <caption>Recalls <span class="count">([% RECALLS.count | html %])</span></caption>
>-                                    <thead>
>-                                        <tr>
>-                                            <th class="anti-the">Title</th>
>-                                            <th class="psort">Placed on</th>
>-                                            <th>Expires on</th>
>-                                            <th>Pickup location</th>
>-                                            <th>Status</th>
>-                                            <th class="nosort">&nbsp;</th>
>-                                        </tr>
>-                                    </thead>
>-                                    <tbody>
>-                                        [% FOREACH RECALL IN RECALLS %]
>-                                        <tr>
>-                                            <td class="title">
>-                                                <a class="title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% RECALL.biblio_id | html %]">[% INCLUDE 'biblio-title.inc' biblio=RECALL.biblio %]</a> [% IF RECALL.item_level %]<p class="hint">Item recalled: [% RECALL.item.barcode | html %]</p>[% END %]
>-                                            </td>
>-                                            <td class="recalldate" data-order="[% RECALL.created_date | html %]">
>-                                                <span title="[% RECALL.created_date | html %]">
>-                                                    <span class="tdlabel">Recall date:</span>
>-                                                    [% RECALL.created_date | $KohaDates %]
>-                                                </span>
>-                                            </td>
>-                                            <td class="expirationdate" data-order="[% RECALL.expiration_date | html %]">
>-                                                [% IF ( RECALL.expiration_date ) %]
>-                                                    <span title="[% RECALL.expiration_date | html %]">
>-                                                        <span class="tdlabel">Expiration:</span>
>-                                                        [% RECALL.expiration_date | $KohaDates %]
>-                                                    </span>
>-                                                [% ELSE %]
>-                                                    <span title="0000-00-00">
>-                                                        <span class="tdlabel">Expiration:</span>
>-                                                        Never expires
>-                                                    </span>
>-                                                [% END %]
>-                                            </td>
>-                                            <td class="branch">
>-                                                <span class="tdlabel">Pick up location:</span>
>-                                                [% RECALL.library.branchname | html %]
>-                                            </td>
>-                                            <td class="status">
>-                                                <span class="tdlabel">Status:</span>
>-                                                [% IF ( RECALL.requested ) %]
>-                                                    Requested
>-                                                [% ELSIF ( RECALL.overdue ) %]
>-                                                    Overdue to be returned
>-                                                [% ELSIF ( RECALL.in_transit ) %]
>-                                                    In transit to [% RECALL.library.branchname | html %]
>-                                                [% ELSIF ( RECALL.waiting ) %]
>-                                                    Ready for pickup
>-                                                [% END %]
>-                                            </td>
>-                                            <td class="cancelrecall">
>-                                                [% IF ( RECALL.requested or RECALL.overdue ) %]
>-                                                    <form action="/cgi-bin/koha/opac-recall.pl" method="post">
>-                                                        <input type="hidden" name="op" value="cancel">
>-                                                        <input type="hidden" name="recall_id" value="[% RECALL.id | html %]">
>-                                                        <input type="hidden" name="biblionumber" value="[% RECALL.biblio_id | html %]">
>-                                                        <button type="submit" name="submit" class="btn btn-sm btn-danger cancel_recall"><i class="fa fa-remove" aria-hidden="true"></i> Cancel</button>
>-                                                    </form>
>-                                                [% END %]
>-                                            </td>
>-                                        [% END %]
>-                                        </tr>
>-                                    </tbody>
>-                                </table>
>-                            </div>
>-                        [% END # / # RECALLS.count %]
>+                                                        </td>
>+                                                    [% END %]
>+                                                    [% IF ( OPACFinesTab ) %]
>+                                                        <td>
>+                                                            <span class="tdlabel">Fines:</span>
>+                                                            [% IF ( OVERDUE.charges ) %]
>+                                                                Yes
>+                                                            [% ELSE %]
>+                                                                No
>+                                                            [% END %]
>+                                                        </td>
>+                                                    [% END %]
>+                                                </tr>
>+                                            [% END %]
>+                                        </tbody>
>+                                    </table>
>+                                </div> 
>+                            [% END # /overdues_count %]
> 
>-                        [% IF Koha.Preference('ArticleRequests') %]
>-                            <div id="opac-user-article-requests">
>-                                [% IF current_article_requests.size %]
>-                                    <table id="article-requests-table" class="table table-bordered table-striped">
>-                                        <caption>Article requests <span class="count"></span></caption>
>+                            [% PROCESS 'holds-table.inc' HOLDS = RESERVES, SuspendHoldsOpac = SuspendHoldsOpac, showpriority = showpriority, AutoResumeSuspendedHolds = AutoResumeSuspendedHolds %]
>+
>+                            [% IF Koha.Preference('UseRecalls') && RECALLS.count %]
>+                                <div id="opac-user-recalls" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-recalls-tab">
>+                                    <table id="recalls-table" class="table table-bordered table-striped">
>+                                        <caption>Recalls <span class="count">([% RECALLS.count | html %])</span></caption>
>                                         <thead>
>                                             <tr>
>-                                                <th class="anti-the article-request-record-title">Record title</th>
>-                                                <th class="psort article-request-created-on">Placed on</th>
>-                                                <th class="anti-the article-request-title">Title</th>
>-                                                <th class="article-request-author">Author</th>
>-                                                <th class="article-request-volume">Volume</th>
>-                                                <th class="article-request-issue">Issue</th>
>-                                                <th class="article-request-date">Date</th>
>-                                                <th class="article-request-toc" title="Table of contents">TOC</th>
>-                                                <th class="article-request-pages">Pages</th>
>-                                                <th class="article-request-chapters">Chapters</th>
>-                                                <th class="article-request-patron-notes">Notes</th>
>-                                                <th class="article-request-format">Format</th>
>-                                                <th class="article-request-status">Status</th>
>-                                                <th class="article-request-branchcode">Pickup library</th>
>-                                                <th class="nosort article-request-cancel">&nbsp;</th>
>+                                                <th class="anti-the">Title</th>
>+                                                <th class="psort">Placed on</th>
>+                                                <th>Expires on</th>
>+                                                <th>Pickup location</th>
>+                                                <th>Status</th>
>+                                                <th class="nosort">&nbsp;</th>
>                                             </tr>
>                                         </thead>
>-
>                                         <tbody>
>-                                        [% FOREACH ar IN current_article_requests %]
>-                                                <td class="article-request-record-title">
>-                                                    <a class="article-request-title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ar.biblionumber | html %]">
>-                                                        [% INCLUDE 'biblio-title.inc' biblio=ar.biblio %]
>-                                                        [% ar.item.enumchron | html %]
>-                                                    </a>
>-                                                    [% ar.biblio.author | html %]
>-                                                    [% IF ar.itemnumber %] <em>(only [% ar.item.barcode | html %])</em>[% END %]
>-                                                </td>
>-
>-                                                <td class="article-request-created_on">
>-                                                    [% ar.created_on | $KohaDates %]
>-                                                </td>
>-
>-                                                <td class="article-request-title">
>-                                                    [% ar.title | html %]
>-                                                </td>
>-
>-                                                <td class="article-request-author">
>-                                                    [% ar.author | html %]
>-                                                </td>
>-
>-                                                <td class="article-request-volume">
>-                                                    [% ar.volume | html %]
>-                                                </td>
>-
>-                                                <td class="article-request-issue">
>-                                                    [% ar.issue | html %]
>-                                                </td>
>-
>-                                                <td class="article-request-date">
>-                                                    [% ar.date | html %]
>+                                            [% FOREACH RECALL IN RECALLS %]
>+                                            <tr>
>+                                                <td class="title">
>+                                                    <a class="title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% RECALL.biblio_id | html %]">[% INCLUDE 'biblio-title.inc' biblio=RECALL.biblio %]</a> [% IF RECALL.item_level %]<p class="hint">Item recalled: [% RECALL.item.barcode | html %]</p>[% END %]
>                                                 </td>
>-
>-                                                <td class="article-request-toc">
>-                                                    [% IF ar.toc_request %]Yes[% END %]
>+                                                <td class="recalldate" data-order="[% RECALL.created_date | html %]">
>+                                                    <span title="[% RECALL.recalldate | html %]">
>+                                                        <span class="tdlabel">Recall date:</span>
>+                                                        [% RECALL.created_date | $KohaDates %]
>+                                                    </span>
>                                                 </td>
>-
>-                                                <td class="article-request-pages">
>-                                                    [% ar.pages | html %]
>+                                                <td class="expirationdate" data-order="[% RECALL.expiration_date | html %]">
>+                                                    [% IF ( RECALL.expiration_date ) %]
>+                                                        <span title="[% RECALL.expiration_date | html %]">
>+                                                            <span class="tdlabel">Expiration:</span>
>+                                                            [% RECALL.expirationdate | $KohaDates %]
>+                                                        </span>
>+                                                    [% ELSE %]
>+                                                        <span title="0000-00-00">
>+                                                            <span class="tdlabel">Expiration:</span>
>+                                                            Never expires
>+                                                        </span>
>+                                                    [% END %]
>                                                 </td>
>-
>-                                                <td class="article-request-chapters">
>-                                                    [% ar.chapters | html %]
>+                                                <td class="branch">
>+                                                    <span class="tdlabel">Pick up location:</span>
>+                                                    [% RECALL.library.branchname | html %]
>                                                 </td>
>-
>-                                                <td class="article-request-patron-notes">
>-                                                    [% ar.patron_notes | html %]
>+                                                <td class="status">
>+                                                    <span class="tdlabel">Status:</span>
>+                                                    [% IF ( RECALL.requested ) %]
>+                                                        Requested
>+                                                    [% ELSIF ( RECALL.overdue ) %]
>+                                                        Overdue to be returned
>+                                                    [% ELSIF ( RECALL.in_transit ) %]
>+                                                        In transit to [% RECALL.library.branchname | html %]
>+                                                    [% ELSIF ( RECALL.waiting ) %]
>+                                                        Ready for pickup
>+                                                    [% END %]
>                                                 </td>
>-
>-                                                <td class="article-request-format">[% IF ar.format == 'PHOTOCOPY' %]Copy[% ELSIF ar.format == 'SCAN' %]Scan[% END %]</td>
>-
>-                                                <td class="article-request-status">
>-                                                    [% IF ar.status == 'PENDING' %]
>-                                                        Pending
>-                                                    [% ELSIF ar.status == 'PROCESSING' %]
>-                                                        Processing
>-                                                    [% ELSIF ar.status == 'REQUESTED' %]
>-                                                        New
>-                                                    [% ELSIF ar.status == 'COMPLETED' %]
>-                                                        Completed
>-                                                    [% ELSIF ar.status == 'CANCELED' %]
>-                                                        Canceled
>+                                                <td class="cancelrecall">
>+                                                    [% IF ( RECALL.requested or RECALL.overdue ) %]
>+                                                        <form action="/cgi-bin/koha/opac-recall.pl" method="post">
>+                                                            <input type="hidden" name="op" value="cancel">
>+                                                            <input type="hidden" name="recall_id" value="[% RECALL.id | html %]">
>+                                                            <input type="hidden" name="biblionumber" value="[% RECALL.biblio_id | html %]">
>+                                                            <button type="submit" name="submit" class="btn btn-sm btn-danger cancel_recall"><i class="fa fa-remove" aria-hidden="true"></i> Cancel</button>
>+                                                        </form>
>                                                     [% END %]
>                                                 </td>
>+                                            [% END %]
>+                                            </tr>
>+                                        </tbody>
>+                                    </table>
>+                                </div>
>+                            [% END # / # RECALLS.count %]
>+
>+                            [% IF Koha.Preference('ArticleRequests') %]
>+                                <div id="opac-user-article-requests" class="tab-pane" role="tabpanel" aria-labelledby="opac-user-article-requests-tab">
>+                                    [% IF current_article_requests.size %]
>+                                        <table id="article-requests-table" class="table table-bordered table-striped">
>+                                            <caption>Article requests <span class="count"></span></caption>
>+                                            <thead>
>+                                                <tr>
>+                                                    <th class="anti-the article-request-record-title">Record title</th>
>+                                                    <th class="psort article-request-created-on">Placed on</th>
>+                                                    <th class="anti-the article-request-title">Title</th>
>+                                                    <th class="article-request-author">Author</th>
>+                                                    <th class="article-request-volume">Volume</th>
>+                                                    <th class="article-request-issue">Issue</th>
>+                                                    <th class="article-request-date">Date</th>
>+                                                    <th class="article-request-toc" title="Table of contents">TOC</th>
>+                                                    <th class="article-request-pages">Pages</th>
>+                                                    <th class="article-request-chapters">Chapters</th>
>+                                                    <th class="article-request-patron-notes">Notes</th>
>+                                                    <th class="article-request-format">Format</th>
>+                                                    <th class="article-request-status">Status</th>
>+                                                    <th class="article-request-branchcode">Pickup library</th>
>+                                                    <th class="nosort article-request-cancel">&nbsp;</th>
>+                                                </tr>
>+                                            </thead>
> 
>-                                                <td class="article-request-branchcode">
>-                                                    [% ar.branch.branchname | html %]
>-                                                </td>
>+                                            <tbody>
>+                                                <tr>
>+                                                    [% FOREACH ar IN current_article_requests %]
>+                                                        <td class="article-request-record-title">
>+                                                            <a class="article-request-title" href="/cgi-bin/koha/opac-detail.pl?biblionumber=[% ar.biblionumber | html %]">
>+                                                                [% INCLUDE 'biblio-title.inc' biblio=ar.biblio %]
>+                                                                [% ar.item.enumchron | html %]
>+                                                            </a>
>+                                                            [% ar.biblio.author | html %]
>+                                                            [% IF ar.itemnumber %] <em>(only [% ar.item.barcode | html %])</em>[% END %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-created_on">
>+                                                            [% ar.created_on | $KohaDates %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-title">
>+                                                            [% ar.title | html %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-author">
>+                                                            [% ar.author | html %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-volume">
>+                                                            [% ar.volume | html %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-issue">
>+                                                            [% ar.issue | html %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-date">
>+                                                            [% ar.date | html %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-toc">
>+                                                            [% IF ar.toc_request %]Yes[% END %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-pages">
>+                                                            [% ar.pages | html %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-chapters">
>+                                                            [% ar.chapters | html %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-patron-notes">
>+                                                            [% ar.patron_notes | html %]
>+                                                        </td>
>+
>+                                                        <td class="article-request-format">[% IF ar.format == 'PHOTOCOPY' %]Copy[% ELSIF ar.format == 'SCAN' %]Scan[% END %]</td>
>+
>+                                                        <td class="article-request-status">
>+                                                            [% IF ar.status == 'PENDING' %]
>+                                                                Pending
>+                                                            [% ELSIF ar.status == 'PROCESSING' %]
>+                                                                Processing
>+                                                            [% ELSIF ar.status == 'REQUESTED' %]
>+                                                                New
>+                                                            [% ELSIF ar.status == 'COMPLETED' %]
>+                                                                Completed
>+                                                            [% ELSIF ar.status == 'CANCELED' %]
>+                                                                Canceled
>+                                                            [% END %]
>+                                                        </td>
> 
>-                                                <td class="article-request-cancel">
>-                                                    <button data-title="[% ar.biblio.title | html %] [% ar.item.enumchron | html %]" data-article-request_id="[% ar.id | html %]" class="btn btn-sm btn-danger btn-delete-article-request"><i class="fa fa-remove" aria-hidden="true"></i> Cancel</button>
>-                                                </td>
>-                                            </tr>
>-                                        [% END %]
>-                                    </tbody>
>-                                </table>
>-                            [% ELSE %]
>-                                <table class="table table-bordered table-striped">
>-                                    <caption class="sr-only">Article requests</caption>
>-                                    <tr><td>You have no article requests currently.</td></tr>
>-                                </table>
>-                            [% END # IF current_article_requests.size %]
>-                        </div> 
>-                    [% END %]
>+                                                        <td class="article-request-branchcode">
>+                                                            [% ar.branch.branchname | html %]
>+                                                        </td>
> 
>+                                                        <td class="article-request-cancel">
>+                                                            <button data-title="[% ar.biblio.title | html %] [% ar.item.enumchron | html %]" data-article-request_id="[% ar.id | html %]" class="btn btn-sm btn-danger btn-delete-article-request"><i class="fa fa-remove" aria-hidden="true"></i> Cancel</button>
>+                                                        </td>
>+                                                    [% END %]
>+                                                </tr>
>+                                            </tbody>
>+                                        </table>
>+                                    [% ELSE %]
>+                                        <table class="table table-bordered table-striped">
>+                                            <caption class="sr-only">Article requests</caption>
>+                                            <tr><td>You have no article requests currently.</td></tr>
>+                                        </table>
>+                                    [% END # IF current_article_requests.size %]
>+                                </div> 
>+                            [% END %]
>+                        </div> 
>                     </div> 
>                 </div> 
>             </div> 
>@@ -1000,7 +1041,7 @@
>         }
>         $(document).ready(function(){
>             $('#opac-user-article-requests caption .count').html(AR_CAPTION_COUNT.format('[% current_article_requests_count | html %]'));
>-            $('#opac-user-views').tabs();
>+
>             $(".modal-nojs").addClass("modal").addClass("hide").removeClass("modal-nojs");
> 
>             $(".btn-delete-hold").on("click", function(e){
>@@ -1311,7 +1352,7 @@
>         [% END %]
> 
>         [% IF ( overdrive_tab ) %]
>-            $("#opac-user-views").tabs("select", "#opac-user-overdrive");
>+            $("#opac-user-views a[href='#opac-user-overdrive']").tab("show");
>         [% END %]
> 
>         $("#opac-user-overdrive").each( function() {
>@@ -1328,7 +1369,7 @@
>                     KOHA.RecordedBooks.display_error("#opac-user-recordedbooks", "[% recordedbooks_error.dquote | html %]");
>                 [% END %]
>                 [% IF ( recordedbooks_tab ) %]
>-                    $("#opac-user-views").tabs("select", "#opac-user-recordedbooks");
>+                    $("#opac-user-views a[href='#opac-user-recordedbooks']").tab("show");
>                 [% END %]
>                 $("#opac-user-recordedbooks").each( function() {
>                     KOHA.RecordedBooks.display_account_details(this);
>-- 
>2.30.2

Actions: View | Diff | Splinter Review

Attachments on bug 30570: 133538 | 134793 | 134795 | 135079 | 135678 | 135754 | 137205 | 137214