[% USE Koha %]
[% USE Asset %]
[% USE raw %]
[% INCLUDE 'doc-head-open.inc' %]
<title>[% IF ( LibraryNameTitle ) %][% LibraryNameTitle | html %][% ELSE %]Koha online[% END %] catalog &rsaquo; Browse our catalog</title>
[% INCLUDE 'doc-head-close.inc' %]
[% BLOCK cssinclude %][% END %]
[% INCLUDE 'bodytag.inc' bodyid='opac-browser' %]
[% INCLUDE 'masthead.inc' %]

<div class="main">
    <nav aria-label="breadcrumb">
        <ul class="breadcrumb">
            <li class="breadcrumb-item">
                <a href="/cgi-bin/koha/opac-main.pl">Home</a>
            </li>
            <li class="breadcrumb-item active" aria-current="page">
                <a href="#">Browse search</a>
            </li>
        </ul>
    </nav>

    <div class="container-fluid">
        <div class="row">
            [% IF ( OpacNav || OpacNavBottom ) %]
                <div class="col-lg-2">
                    <div id="navigation">
                    [% INCLUDE 'navigation.inc' %]
                    </div>
                </div>
            [% END %]

            [% IF ( OpacNav ) %]
                <div class="col-10 order-first order-md-first order-lg-2">
            [% ELSE %]
                <div class="col order-first order-md-first order-lg-2">
            [% END %]

            [% IF Koha.Preference('SearchEngine') == 'Elasticsearch' && Koha.Preference('OpacBrowseSearch') %]
                <div id="browse-search" class="maincontent">
                    <h1>Browse search</h1>

                    <form>
                        <div class="form-row">
                            <div class="col">
                                <label for="browse-searchterm">Search for:</label>
                                <input type="search" id="browse-searchterm" class="form-control" name="searchterm" value="" />
                            </div> <!-- /.col-12.col-sm-9 -->
                            <div class="col-auto">
                                <label for="browse-searchfield">Search type:</label>
                                <select id="browse-searchfield" name="searchfield" class="form-control">
                                    <option value="author">Author</option>
                                    <option value="subject">Subject</option>
                                    <option value="title">Title</option>
                                </select>
                            </div> <!-- /.col-auto -->
                        </div> <!-- /.form-row -->
                        <div class="form-row">
                            <div class="col">
                                <div id="browse-searchfuzziness">
                                    <div class="form-check form-check-inline">
                                        <label for="exact" class="form-check-label">
                                            <input class="form-check-input" type="radio" name="browse-searchfuzziness" id="exact" value="0" />Exact
                                        </label>
                                    </div> <!-- /.form-check.form-check-inline -->
                                    <div class="form-check form-check-inline">
                                        <label for="fuzzy" class="form-check-label">
                                            <input class="form-check-input" type="radio" name="browse-searchfuzziness" id="fuzzy" value="1" checked="checked" /> Fuzzy
                                        </label>
                                    </div> <!-- /.form-check.form-check-inline -->
                                    <div class="form-check form-check-inline">
                                        <label for="reallyfuzzy" class="form-check-label">
                                            <input class="form-check-input" type="radio" name="browse-searchfuzziness" id="reallyfuzzy" value="2" /> Really fuzzy
                                        </label>
                                    </div> <!-- /.form-check.form-check-inline -->
                                </div> <!-- /#browse-searchfuzziness -->
                            </div> <!-- /.col -->
                        </div> <!-- /.form-row -->
                        <div class="form-row">
                            <div class="col">
                                <button class="btn btn-primary" type="submit" accesskey="s">Search</button>
                            </div>
                        </div>
                    </form>

                    <div id="browse-suggestionserror" class="alert alert-warning d-none" role="alert">
                        An error occurred, please try again.
                    </div>

                    <div id="browse-resultswrapper" class="d-none">
                        <h2>Results</h2>

                        <div class="loading d-none"><img src="[% interface | html %]/[% theme |html %]/images/loading.gif" alt=""> Loading</div>
                        <div class="alert alert-warning no-results d-none" role="alert">Sorry, there are no results. Try a different search term.</div>

                        <div class="accordion" id="browse-searchresults">
                            <div id="card_template" class="card">
                                <div class="card-header" id="heading">
                                    <a class="expand-result" href="#" data-toggle="collapse" aria-expanded="false" aria-controls="collapse">
                                    </a>
                                </div> <!-- /#heading.card-header -->
                                <div id="collapse" class="collapse" aria-labelledby="heading" data-parent="#browse-searchresults">
                                    <div class="card-body">
                                    </div>
                                </div> <!-- /#collapse.collapse -->
                            </div> <!-- /#card_template.card -->
                        </div> <!-- /#browse-searchresults.accordion -->
                    </div><!-- / #browse-resultswrapper -->
                </div><!-- /#browse-search -->
            [% ELSE %]
                <h3>This feature is not enabled</h3>
            [% END %]

            </div><!-- / .col/col-10 -->
        </div><!-- / .row -->
    </div><!-- / .container-fluid -->
</div><!-- / .main -->

[% INCLUDE 'opac-bottom.inc' %]
[% BLOCK jsinclude %]
    [% Asset.js("/js/browse.js") | $raw %]
[% END %]