works.html

<div xmlns:i18n="http://exist-db.org/xquery/i18n" data-template="templates:surround" data-template-with="templates/template_works.html" data-template-at="content">
    <div data-template="i18n:translate" data-template-catalogues="data/i18n">
        <div class="container">
            <h2 style="margin-top: 3%" class="hidden-md hidden-sm hidden-xs">
                <span class="text-muted">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"/>
                    <i18n:text key="works">Werke</i18n:text>
                </span>
                <hr/>
            </h2>
            <h2 style="margin-top: 2%" class="hidden-lg hidden-sm hidden-xs">
                <span class="text-muted">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"/>
                    <i18n:text key="works">Werke</i18n:text>
                </span>
                <hr/>
            </h2>
            <h2 class="hidden-lg hidden-md">
                <span class="text-muted">
                    <span class="glyphicon glyphicon-file" aria-hidden="true"/>
                    <i18n:text key="works">Werke</i18n:text>
                </span>
                <hr/>
            </h2>
            <div style="margin-bottom:1em;border:1px solid gray;border-radius:5px;" data-template="app:WRKsNotice"/>
            <!--<div class="row" data-template="app:loadListOfWorks">-->
            <div class="row">
                <div class="col-md-3 hidden-xs hidden-sm">
                    <ul class="fadeIn" id="facets" style="padding-top: 20%; padding-left: 5%"/>
                    <!-- show this when js is disabled -->
                    <noscript>
                        <div style="margin-top: -13%;" data-template="app:sortWRK"/>
                    </noscript>
                    <div class="corpus-download">
                        <h4>
                            <i18n:text key="aboutCorpus">About the Corpus</i18n:text>
                        </h4>
                        <span data-template="app:corpusStatsTeaser"/>
                        <hr/>
                        <span data-template="app:WRKsCorpusDownload"/>
                        <hr/>
                        <span data-template="app:WRKsList"/>
                    </div>
                </div>
                <div class="col-md-9" id="results" style="padding-top: 5%">
                    <!-- show this when js is disabled -->
                    <noscript>
                        <div class="col-md-12" style="top: -27px; margin-bottom: -3%;">
                            <span data-template="app:countWRKsnoJs"/>
                            <span>
                                <i18n:text key="works">Werke</i18n:text>
                            </span>
                        </div>
                        <span data-template="app:loadWRKsnoJs"/>
                    </noscript>
                </div>
                <script type="text/javascript">
                    var works_items = [  <span data-template="app:loadWRKfacets"/> ];
                </script>
            </div>
        </div>
    </div>
</div>