[% ctx.page_title = 'Self Checkout' %]
[% WRAPPER default/base.tt2 %]
<script src='[% ctx.media_prefix %]/js/ui/default/circ/selfcheck/selfcheck.js'> </script>
<script src="[% ctx.media_prefix %]/js/ui/default/circ/selfcheck/payment.js"></script>
<link rel='stylesheet' type='text/css' href='[% ctx.media_prefix %]/css/skin/[% ctx.skin %]/selfcheck.css'/>
[% INCLUDE 'default/circ/selfcheck/audio_config.tt2' %]

<div id='oils-selfck-top-div'>
    [% INCLUDE 'default/circ/selfcheck/banner.tt2' %]
</div>
<div id='oils-selfck-bottom-div'>
    <div id='oils-selfck-content-div'>
        <div id='oils-selfck-content-header'>
            <span><a id='oils-selfck-print-list-link' href='javascript:void(0);'>Print List</a></span>
        </div>
        <div id='oils-selfck-circ-page' class='hidden'>
            <!-- Checkout / renewal and items out interface -->
            [% INCLUDE 'default/circ/selfcheck/circ_page.tt2' %]
        </div>
        <div id='oils-selfck-holds-page' class='hidden'>
            <!-- Patron holds interface -->
            [% INCLUDE 'default/circ/selfcheck/holds_page.tt2' %]
        </div>
        <div id='oils-selfck-fines-page' class='hidden'>
            <!-- Fines and interface -->
            [% INCLUDE 'default/circ/selfcheck/fines.tt2' %]
        </div>
        <div id='oils-selfck-payment-page' class='hidden'>
            <!-- credit card payments interface -->
            [% INCLUDE 'default/circ/selfcheck/payment.tt2' %]
        </div>
    </div>
    <div id='oils-selfck-summary-div'>
        [% INCLUDE 'default/circ/selfcheck/summary.tt2' %]
    </div>
</div>
<div dojoType='openils.widget.ProgressDialog' jsId='progressDialog'></div>
<div dojoType="dijit.Dialog" jsId='oilsSelfckWsDialog' class='oils-login-dialog' style='display:none;'>
    <form>
        <table>
            <tr>
                <td>Choose a location</td>
                <td><div dojoType='openils.widget.OrgUnitFilteringSelect' jsId='oilsSelfckWsLocSelector' 
                    searchAttr='shortname' labelAttr='shortname'/></td>
            </tr>
            <tr>
                <td>Enter a workstation name</td>
                <td><input dojoType='dijit.form.TextBox' jsId='oilsSelfckWsName'/></td>
            </tr>
            <tr>
                <td colspan='2' align='center'>
                    <button jsId='oilsSelfckWsSubmit' dojoType='dijit.form.Button'>Submit</button>
                </td>
            </tr>
        </table>
    </form>
</div>
[% END %]