{{#with ub}}
<div id="ubContent" style="word-wrap: break-word;">

    {{#if locked}}
        <div>{{locked}}</div>
    {{/if}}

    <div id="ubError">
        {{#if error}} 
            {{error}}
        {{/if}}
    </div>

    {{#unless error}}
    <ul id="libraryData" class="collapsible" data-collapsible="expandable">
        <li id="loaningCollapsible">
            <div class="collapsible-header truncate">
                <div style="display: inline-block;">{{langString "campus.ub.loaning.name"}}</div>
                <span style="display: inline-block; float: right;">{{LoanedItem.length}}</span>
            </div>
            <div class="collapsible-body">
                <div style="margin-left: 5px; margin-top: 5px;">{{langString "campus.ub.loaning.loanState"}}:</div>
                <div style="margin: 5px 5px 0 5px" class="row">
                    <div class="col s4 rwth-green">
                        &gt; 5 {{langString "campus.ub.loaning.days"}}
                    </div>
                    <div class="col s4 rwth-yellow">
                        &lt;= 5 {{langString "campus.ub.loaning.days"}}
                    </div>
                    <div class="col s4 rwth-red">
                        {{langString "campus.ub.loaning.expired"}}
                    </div>
                </div>
                {{#each LoanedItem}}
                    {{> campus.ub.loaning loanedItem=this}}
                {{/each}}
            </div>
        </li>

        <li id="orderingCollapsible">
            <div class="collapsible-header truncate">
                <div style="display: inline-block;">{{langString "campus.ub.ordering.name"}}</div>
                <span style="display: inline-block; float: right;">{{OrderedItem.length}}</span>
            </div>
            <div class="collapsible-body">
                {{#each OrderedItem}}
                    <div style="margin: 5px" class="card">
                        <div class="card-content">
                            {{> campus.ub.ordering orderedItem=this}}
                        </div>
                    </div>
                {{/each}}
            </div>
        </li>

        <li id="prebookCollapsible">
            <div class="collapsible-header truncate">
                <div style="display: inline-block;">{{langString "campus.ub.prebook.name"}}</div>
                <span id="prebook_badge" style="display: inline-block; float: right;">{{PrebookItem.length}}</span>
            </div>
            <div class="collapsible-body">
                {{#each PrebookItem}}
                    {{> campus.ub.prebook prebookItem=this}}
                {{/each}}
            </div>
        </li>

        <li id="paymentCollapsible">
            <div class="collapsible-header truncate">
                <div style="display: inline-block;">{{langString "campus.ub.paying.name"}}</div>
                <span style="display: inline-block; float: right;">{{totalDue}}€</span>
                <span style="display: inline-block; float: right; margin-right: 10px;">{{AccountDetails.length}}</span>
            </div>
            <div class="collapsible-body">
                {{#each AccountDetails}}
                <div style="margin: 5px" class="card">
                    <div class="card-content">
                        {{> campus.ub.payment paymentItem=this}}
                    </div>
                </div>
                {{/each}}
            </div>
        </li>
    </ul>
    {{/unless}}
    <a href="#das.channelDetails?channelId=fda4d69c-dd7b-4d4a-94a3-98cebecc9f59">{{langString "campus.ub.feedback"}}</a>
</div>
{{/with}}