Bug 34852: Use template wrapper for breadcrumbs: OPAC part 2
[koha.git] / koha-tmpl / opac-tmpl / bootstrap / en / modules / opac-browse.tt
1 [% USE Koha %]
2 [% USE Asset %]
3 [% USE raw %]
4 [% USE AdditionalContents %]
5 [% SET OpacNav = AdditionalContents.get( location => "OpacNav", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
6 [% SET OpacNavBottom = AdditionalContents.get( location => "OpacNavBottom", lang => lang, library => logged_in_user.branchcode || default_branch, blocktitle => 0 ) %]
7 [% INCLUDE 'doc-head-open.inc' %]
8 <title>Browse our catalog &rsaquo; [% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog</title>
9 [% INCLUDE 'doc-head-close.inc' %]
10 [% BLOCK cssinclude %][% END %]
11 [% INCLUDE 'bodytag.inc' bodyid='opac-browser' %]
12 [% INCLUDE 'masthead.inc' %]
13
14 <div class="main">
15     [% WRAPPER breadcrumbs %]
16         [% WRAPPER breadcrumb_item bc_active= 1 %]
17             <span>Browse search</span>
18         [% END %]
19     [% END #/ WRAPPER breadcrumbs %]
20
21     <div class="container-fluid">
22         <div class="row">
23             [% IF ( OpacNav || OpacNavBottom ) %]
24                 <div class="col-lg-2">
25                     <div id="navigation">
26                     [% INCLUDE 'navigation.inc' %]
27                     </div>
28                 </div>
29             [% END %]
30
31             [% IF ( OpacNav ) %]
32                 <div class="col-10 order-first order-md-first order-lg-2">
33             [% ELSE %]
34                 <div class="col order-first order-md-first order-lg-2">
35             [% END %]
36
37             [% IF Koha.Preference('SearchEngine') == 'Elasticsearch' && Koha.Preference('OpacBrowseSearch') %]
38                 <div id="browse-search" class="maincontent">
39                     <h1>Browse search</h1>
40
41                     <form>
42                         <legend class="sr-only">Browse search</legend>
43                         <div class="form-row">
44                             <div class="col">
45                                 <label for="browse-searchterm">Search for:</label>
46                                 <input type="search" id="browse-searchterm" class="form-control" name="searchterm" value="" />
47                             </div> <!-- /.col-12.col-sm-9 -->
48                             <div class="col-auto">
49                                 <label for="browse-searchfield">Search type:</label>
50                                 <select id="browse-searchfield" name="searchfield" class="form-control">
51                                     <option value="author">Author</option>
52                                     <option value="subject">Subject</option>
53                                     <option value="title">Title</option>
54                                 </select>
55                             </div> <!-- /.col-auto -->
56                         </div> <!-- /.form-row -->
57                         <div class="form-row">
58                             <div class="col">
59                                 <div id="browse-searchfuzziness">
60                                     <div class="form-check form-check-inline">
61                                         <label for="exact" class="form-check-label">
62                                             <input class="form-check-input" type="radio" name="browse-searchfuzziness" id="exact" value="0" />Exact
63                                         </label>
64                                     </div> <!-- /.form-check.form-check-inline -->
65                                     <div class="form-check form-check-inline">
66                                         <label for="fuzzy" class="form-check-label">
67                                             <input class="form-check-input" type="radio" name="browse-searchfuzziness" id="fuzzy" value="1" checked="checked" /> Fuzzy
68                                         </label>
69                                     </div> <!-- /.form-check.form-check-inline -->
70                                     <div class="form-check form-check-inline">
71                                         <label for="reallyfuzzy" class="form-check-label">
72                                             <input class="form-check-input" type="radio" name="browse-searchfuzziness" id="reallyfuzzy" value="2" /> Really fuzzy
73                                         </label>
74                                     </div> <!-- /.form-check.form-check-inline -->
75                                 </div> <!-- /#browse-searchfuzziness -->
76                             </div> <!-- /.col -->
77                         </div> <!-- /.form-row -->
78                         <div class="form-row">
79                             <div class="col">
80                                 <button class="btn btn-primary" type="submit" accesskey="s">Search</button>
81                             </div>
82                         </div>
83                     </form>
84
85                     <div id="browse-suggestionserror" class="alert alert-warning d-none" role="alert">
86                         An error occurred, please try again.
87                     </div>
88
89                     <div id="browse-resultswrapper" class="d-none">
90                         <h2>Results</h2>
91
92                         <div class="loading d-none"><img src="[% interface | html %]/[% theme |html %]/images/loading.gif" alt=""> Loading</div>
93                         <div class="alert alert-warning no-results d-none" role="alert">Sorry, there are no results. Try a different search term.</div>
94
95                         <div class="accordion" id="browse-searchresults">
96                             <div id="card_template" class="card">
97                                 <div class="card-header" id="heading">
98                                     <a class="expand-result" href="#" data-toggle="collapse" aria-expanded="false" aria-controls="collapse">
99                                     </a>
100                                 </div> <!-- /#heading.card-header -->
101                                 <div id="collapse" class="collapse" aria-labelledby="heading" data-parent="#browse-searchresults">
102                                     <div class="card-body">
103                                     </div>
104                                 </div> <!-- /#collapse.collapse -->
105                             </div> <!-- /#card_template.card -->
106                         </div> <!-- /#browse-searchresults.accordion -->
107                     </div><!-- / #browse-resultswrapper -->
108                 </div><!-- /#browse-search -->
109             [% ELSE %]
110                 <h1>Browse search</h1>
111                 <div class="alert alert-info">
112                     This feature is not enabled
113                 </div>
114             [% END %]
115
116             </div><!-- / .col/col-10 -->
117         </div><!-- / .row -->
118     </div><!-- / .container-fluid -->
119 </div><!-- / .main -->
120
121 [% INCLUDE 'opac-bottom.inc' %]
122 [% BLOCK jsinclude %]
123     [% Asset.js("/js/browse.js") | $raw %]
124 [% END %]