[% WRAPPER "default/base.tt2" %]
<script src="[% ctx.media_prefix %]/js/ui/default/booking/reservation.js"></script>
<link rel="stylesheet" type="text/css" href="[% ctx.media_prefix %]/css/skin/[% ctx.skin %]/booking.css" />
<script type="text/javascript">
    dojo.require("dojox.grid.DataGrid");
    openils.Util.addOnLoad(my_init);
</script>
<div id="auto_l10n_start_here">
    <div id="brt_search_block" class="container">
        <h1 class="booking AUTO_choose_a_brt"></h1>
        <form onsubmit="init_reservation_interface(this); return false;">
            <div id="brt_selector_here" class="nice_vertical_padding"></div>
            <div id="brt_select_other_controls">
                <!-- <div class="nice_vertical_padding">
                    <input type="checkbox" name="brt_noncat_only"
                        id="brt_noncat_only" checked="checked" />
                    <label for="brt_noncat_only"
                        class="AUTO_brt_noncat_only"></label>
                </div> -->
                <div class="nice_vertical_padding">
                    <input type="submit"
                        class="AUTO_ATTR_VALUE_next" />
                </div>
            </div>
        </form>
        <div id="preselected_patron"></div>
    </div>

    <div id="brt_reserve_block" class="container">
        <form>
            <div id="brsrc_available_outer">
                <h1 class="booking" id="brsrc_list_header"></h1>
                <!-- I'm reluctantly hardcoding the size attribute below to 12
                    since you can't get the behavior of the size attribute with
                    anything in CSS. -->
                <select id="brsrc_list" name="brsrc_list" multiple="multiple"
                    size="12"></select>
                <div id="holds_patron_barcode" class="nice_vertical_padding">
                    <label class="AUTO_patron_barcode"
                        for="patron_barcode" /></label>
                    <input name="patron_barcode" id="patron_barcode"
                        onchange="update_bresv_grid();" />
                </div>
                <div class="nice_vertical_padding">
                    <span class="two_buttons">
                        <input type="button"
                            class="AUTO_ATTR_VALUE_reserve_brsrc"
                            onclick="create_bresv_on_brsrc();" />
                        &nbsp;
                        <input type="button"
                            class="AUTO_ATTR_VALUE_reserve_brt"
                            onclick="create_bresv_on_brt();" />
                    </span>
                </div>
            </div>
            <div id="reserve_right_side">
                <h2 class="booking AUTO_i_need_this_resource"></h2>
                <div id="reserve_datetime_start">
                    <label class="reserve_datetime AUTO_starting_at"
                        for="reserve_date_start"></label><br />
                    <input id="reserve_date_start" />
                    <input id="reserve_time_start" />
                </div>
                <div id="reserve_datetime_end">
                    <label class="reserve_datetime AUTO_ending_at"
                        for="reserve_date_end"></label><br />
                    <input id="reserve_date_end" />
                    <input id="reserve_time_end" />
                </div>
                <h2 id="bra_and_brav_header"
                    class="booking AUTO_with_these_attr"></h2>
                <div id="bra_and_brav"></div>
            </div>
            <div id="reserve_under">
                <hr />
                <h2 class="booking" id="existing_reservation_patron_line"></h2>
                <div id="bresv_grid_alt_explanation"></div>
                <table id="bresv_grid" jsId="bresvGrid"
                    dojoType="dojox.grid.DataGrid" query="{id: '*'}"
                    rowSelector="20px" autoHeight="true">
                    <thead>
                        <tr><!-- FIXME: i18n problem: init_auto_l10n() runs
                                too late to take care of the below elements. -->
                            <th field="type">Type</th>
                            <th field="resource">Resource</th>
                            <th field="start_time">Start time</th>
                            <th field="end_time">End time</th>
                        </tr>
                    </thead>
                </table>
                <div class="nice_vertical_padding"
                    id="existing_bresv_under_buttons">
                    <input type="button" id="button_edit_existing"
                        class="AUTO_ATTR_VALUE_button_edit_existing"
                        disabled="disabled" />
                    <input type="button" id="button_cancel_existing"
                        class="AUTO_ATTR_VALUE_button_cancel_existing"
                        onclick="cancel_selected_bresv(bresvGrid.selection.getSelected());" />
                </div>
            </div>
        </form>
    </div>
</div>
[% END %]