[%  PROCESS "default/opac/parts/header.tt2";
    WRAPPER "default/opac/parts/base.tt2" +
        "default/opac/parts/myopac/base.tt2";
    myopac_page = "prefs"  %]
    <div id='myopac_prefs_div'>
        <div id="acct_prefs_tabs"
             style="padding-bottom: 12px;color:#666;">
            <div style="float:left;">
                <div class="align selected"
                     id="prefs_info_lbl"><img src=
                     "[% ctx.media_prefix %]/images/sub_prefs_info_on.jpg" /></div>

                <div class="align hide_me"
                     id="prefs_info_link">
                    <a href="#"><img src=
                         "[% ctx.media_prefix %]/images/sub_prefs_info_off.jpg" /></a>
                </div>

                <div class="align"
                     id="prefs_notify_link">
                    <a href="#"><img src=
                         "[% ctx.media_prefix %]/images/sub_prefs_notify_off.jpg" /></a>
                </div>

                <div class="align selected hide_me"
                     id="prefs_notify_lbl"><img src=
                     "[% ctx.media_prefix %]/images/sub_prefs_notify_on.jpg" /></div>

                <div class="align"
                     id="prefs_search_link">
                    <a href="#"><img src=
                         "[% ctx.media_prefix %]/images/sub_prefs_search_off.jpg" /></a>
                </div>

                <div class="align selected hide_me"
                     id="prefs_search_lbl"><img src=
                     "[% ctx.media_prefix %]/images/sub_prefs_search_on.jpg" /></div>
            </div>

            <div style="float:right;width:65px;">
                <div style="position:absolute">
                    <div style="position:relative;top:75px;">
                        <a id='acct_prefs_save'
                             class='hide_me'
                             href="#"><img alt="Save"
                             src="[% ctx.media_prefix %]/images/save-btn.png" /></a>
                    </div>
                </div>
            </div>

            <div class="clear-both"></div>
        </div>

        <div class="header_middle">
            <span id="acct_prefs_header">
                Account Information and Preferences
            </span>
            <span class="float-right">
                <a class="hide_me"
                    href="#">Export List</a>
            </span>
        </div>

        <div class="clear-both normal-height"></div>

        <table class="hide_me full-width" id="acct_search_main">
            <tbody id='myopac_prefs_tbody'>
                <tr id='myopac_prefs_loading'>
                    <td colspan='3'><b>[% l("Loading...") %]</b></td>
                </tr>

                <tr id='myopac_prefs_row'>
                    <td width='20%'>[% l("Search hits per page") %]</td>

                    <td>
                        <div style="position:absolute">
                            <div style="position:relative;top:0px;left:55px;">
                                <a href="#">
                                <img alt="Search Hits Help"
                                     src=
                                     "[% ctx.media_prefix %]/images/question-mark.png" /></a>
                            </div>
                        </div><select id='prefs_hits_per'
                            style="position:relative;z-index:100;">
                            <option value='5'>
                                5
                            </option>

                            <option value='8'>
                                8
                            </option>

                            <option value='10'>
                                10
                            </option>

                            <option value='15'>
                                15
                            </option>

                            <option value='20'>
                                20
                            </option>

                            <option value='25'>
                                25
                            </option>

                            <option value='50'>
                                50
                            </option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td colspan="2"><label for="circHistStart">Keep history of
                    checked out items?</label> <input type="checkbox"
                           id="circHistStart" /></td>
                </tr><!-- FONT size preference -->

                <tr class="hide_me">
                    <td>[% l("Default Font Size") %]</td>

                    <td><select id='prefs_def_font'>
                        <option value='regular'>
                            [% l("Regular Font") %]
                        </option>

                        <option value='large'>
                            [% l("Large Font") %]
                        </option>
                    </select></td>
                </tr>

                <tr class="hide_me">
                    <td>[% l("Default Search Location") %]</td>
                    <td>
                        <div style='margin-bottom: 5px;'>
                            <input type='checkbox' id='myopac_pref_home_lib' />
                                 [% l("Always search my home library by default.") %]
                        </div>
                        <select id='prefs_def_location'></select>
                    </td>
                </tr>

                <tr class="hide_me">
                    <td>[% l("Default Search Range") %]</td>

                    <td><select id='prefs_def_range'>
                        </select></td>
                </tr>
            </tbody>
        </table><a href=
        "http://www.kcls.org/usingthelibrary/catalog_help/library_elf.cfm"><u>Try
        Library Elf-to manage library materials!</u></a>

        <table class="hide_me"
               id="acct_notify_main">
            <tbody>
                <tr class="hide_me">
                    <td><span>[% l("Default Hold Notification Method") %]</span> <a class=
                    'classic_link'
                       href='#'>[% l("(Help)") %]</a></td>

                    <td style="padding-left:15px;"><select id=
                    'prefs_hold_notify'>
                        <option value='phone:email'
                                selected='selected'>
                            [% l("Use Phone and Email") %]
                        </option>

                        <option value='phone'>
                            [% l("Use Phone Only") %]
                        </option>

                        <option value='email'>
                            [% l("Use Email Only") %]
                        </option>
                    </select></td>
                </tr>

                <tr>
                    <td style="padding-top:10px;"><strong>Pick Up Notice for
                    Holds</strong><br />
                    <input type="checkbox"
                           id="opac.hold_notify.email"
                           name="opac.hold_notify.email" /> <label for=
                           "opac.hold_notify.email">Email</label><br />
                    <input type="checkbox"
                           id="opac.hold_notify.phone"
                           name="opac.hold_notify.phone" /> <label for=
                           "opac.hold_notify.phone">Phone</label>
                           <b>(Temporarily phone notification will generate a
                           mailed paper notice.)</b></td>
                </tr>

                <tr>
                    <td style="padding-top:10px;"><strong>Expire Notice for
                    Holds</strong><br />
                    <input type="checkbox"
                           id="notification.hold.expire.email"
                           name="notification.hold.expire.email" /> <label for=
                           "notification.hold.expire.email">Email</label></td>
                </tr>

                <tr>
                    <td style="padding-top:10px;"><strong>Cancel Notice for
                    Holds</strong><br />
                    <input type="checkbox"
                           id="notification.hold.cancel.email"
                           name="notification.hold.cancel.email" /> <label for=
                           "notification.hold.cancel.email">Email</label></td>
                </tr>

                <tr>
                    <td style="padding-top:10px;"><strong>Overdue First
                    Notice</strong><br />
                    <input type="checkbox"
                           id="notification.overdue.first.email"
                           name="notification.overdue.first.email" />
                           <label for=
                           "notification.overdue.first.email">Email</label><br />
                    <input type="checkbox"
                           id="notification.overdue.first.phone"
                           name="notification.overdue.first.phone" />
                           <label for=
                           "notification.overdue.first.phone">Phone</label>
                           <b>(Temporarily phone notification will generate a
                           mailed paper notice.)</b></td>
                </tr>

                <tr>
                    <td style="padding-top:10px;"><strong>Courtesy
                    Notice</strong><br />
                    <input type="checkbox"
                           id="notification.predue.email"
                           name="notification.predue.email" /> <label for=
                           "notification.predue.email">Email</label><br /></td>
                </tr>
            </tbody>
        </table>

        <div id="acct_info_main">
            <div id='myopac.expired.alert'
                 class='hide_me'
                 style='margin-bottom: 20px;'>
                <table class='data_grid'
                       width='100%'>
                    <tbody>
                        <tr>
                            <td width='100%'
                                style='color:red;'>
                                [% l("Your account expired on") %]
                                <span id='myopac.expired.date'></span>!
                                [% l("Please see a librarian to renew your account.") %]</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <div id='myopac.notes.div'
                 class='hide_me'>
                <table class='data_grid'
                       width='100%'>
                    <thead>
                        <tr>
                            <td colspan='2'>
                            <b>[% l("* Staff Notes *") %]</b></td>
                        </tr>
                    </thead>

                    <tbody id='myopac.notes.tbody'>
                        <tr id='myopac.notes.tr'>
                            <td><b name='title'></b> : <span name=
                            'value'></span></td>
                        </tr>
                    </tbody>
                </table><br />
            </div>

            <table width='70%'
                   class='light_border data_grid'>
                <tbody id='myopac_summary_tbody'>
                    <tr>
                        <td width='30%'
                            class='color_4 light_border'>[% l("Name") %]</td>

                        <td class='light_border'><span id=
                        'myopac_summary_prefix'
                              style='padding-right: 5px;'></span> <span id=
                              'myopac_summary_first'
                              style='padding-right: 5px;'></span> <span id=
                              'myopac_summary_middle'
                              style='padding-right: 5px;'></span> <span id=
                              'myopac_summary_last'
                              style='padding-right: 5px;'></span> <span id=
                              'myopac_summary_suffix'></span></td>

                        <td></td>
                    </tr>

                    <tr>
                        <td class='color_4 light_border'>
                        [% l("Day Phone") %]</td>

                        <td class='light_border'
                            id='myopac_summary_dayphone'></td>

                        <td class='light_border'><a href='#'
                           class="hide_me"
                           id='myopac_summary_phone1_change'
                           style=
                           'text-decoration: underline;'>[% l("Change") %]</a></td>
                    </tr>

                    <tr id='myopac_update_phone1_row'
                        class='hide_me'>
                        <td class='myopac_update_cell'
                            colspan='3'>
                            <span class='myopac_update_span'>
                                Enter New [% l("Day Phone") %]:
                            </span>

                            <input type='text' size='24' id='myopac_new_phone1' />
                            <span class='myopac_update_span'>
                                <button>
                                    <span class='myopac_update_span'>
                                        [% l("Submit") %]</span>
                                </button>
                            </span>
                            <span class='myopac_update_span'>
                                <button>
                                    <span class='myopac_update_span'>
                                        [% l("Cancel") %]</span>
                                </button>
                            </span>
                        </td>
                    </tr>

                    <tr>
                        <td class='color_4 light_border'>
                        [% l("Evening Phone") %]</td>

                        <td class='light_border'
                            id='myopac_summary_eveningphone'></td>

                        <td class='light_border'><a href='#'
                           class="hide_me"
                           id='myopac_summary_phone2_change'
                           style=
                           'text-decoration: underline;'>[% l("Change") %]</a></td>
                    </tr>

                    <tr id='myopac_update_phone2_row'
                        class='hide_me'>
                        <td class='myopac_update_cell'
                            colspan='3'><span class='myopac_update_span'>New
                            [% l("Evening Phone") %]:</span>
                            <input type='text' size='24' id='myopac_new_phone2' />
                            <span class='myopac_update_span'><button><span class=
                                'myopac_update_span'>[% l("Submit") %]</span></button></span>
                            <span class='myopac_update_span'><button><span class=
                                'myopac_update_span'>[% l("Cancel") %]</span></button></span>
                        </td>
                    </tr>

                    <tr>
                        <td class='color_4 light_border'>
                        [% l("Other Phone") %]</td>

                        <td class='light_border'
                            id='myopac_summary_otherphone'></td>

                        <td class='light_border'><a href='#'
                           class="hide_me"
                           id='myopac_summary_phone3_change'
                           style=
                           'text-decoration: underline;'>[% l("Change") %]</a></td>
                    </tr>

                    <tr id='myopac_update_phone3_row'
                        class='hide_me'>
                        <td class='myopac_update_cell'
                            colspan='3'><span class='myopac_update_span'>Enter
                            New [% l("Other Phone") %]:</span>
                            <input type='text' size='24' id='myopac_new_phone3' />
                            <span class='myopac_update_span'><button><span class=
                                'myopac_update_span'>[% l("Submit") %]</span></button></span>
                            <span class='myopac_update_span'><button><span class=
                                'myopac_update_span'>[% l("Cancel") %]</span></button></span>
                        </td>
                    </tr>

                    <tr>
                        <td class='color_4 light_border'>
                            <div style="position:absolute">
                                <div style=
                                "position:relative;left:70px;top:-3px;">
                                    <a href="#">
                                    <img alt="Username Help"
                                         src=
                                         "[% ctx.media_prefix %]/images/question-mark.png" /></a>
                                </div>
                            </div>[% l("Username") %]
                        </td>

                        <td class='light_border'
                            id='myopac_summary_username'></td>

                        <td class='light_border'><a href='#'
                           class="hide_me"
                           id='myopac_summary_username_change'
                           style=
                           'text-decoration: underline;'>[% l("Change") %]</a></td>
                    </tr>

                    <tr id='myopac_update_username_row'
                        class='hide_me'>
                        <td class='myopac_update_cell'
                            colspan='3'><span class=
                            'myopac_update_span'>[% l("Enter new username:") %]</span>
                            <input type='text' size='24' id='myopac_new_username' />
                            <span class='myopac_update_span'><button><span class=
                                'myopac_update_span'>[% l("Submit") %]</span></button></span>
                            <span class='myopac_update_span'><button><span class=
                                'myopac_update_span'>[% l("Cancel") %]</span></button></span>
                        </td>
                    </tr>
                    <tr>
                        <td class='color_4 light_border'>
                        [% l("Password") %]</td>
                        <td class='light_border'
                            id='myopac_summary_password'>
                            [% l("(not shown)") %]</td>
                        <td class='light_border'><a href='#'
                           class="hide_me"
                           id='myopac_summary_password_change'
                           style=
                           'text-decoration: underline;'>[% l("Change") %]</a></td>
                    </tr>
                    <tr id='myopac_update_password_row'
                        class='hide_me'>
                        <td class='myopac_update_cell'
                            colspan='3'>
                            <table>
                                <tbody>
                                    <tr>
                                        <td>
                                            <span class= 'myopac_update_span'>
                                                [% l("Enter current password:") %]
                                            </span>
                                        </td>

                                        <td>
                                            <input type='password'
                                               size='24'
                                               id='myopac_current_password' />
                                           </td>
                                    </tr>
                                    <tr>
                                        <td><span class=
                                        'myopac_update_span'>[% l("Enter new password:") %]</span></td>

                                        <td><input type='password'
                                               size='24'
                                               id='myopac_new_password' />
                                           </td>
                                    </tr>

                                    <tr>
                                        <td><span class=
                                        'myopac_update_span'>[% l("Re-enter new password:") %]</span></td>

                                        <td>
                                            <input type='password'
                                                size='24'
                                                id='myopac_new_password2' />
                                        </td>
                                    </tr>
                                </tbody>
                            </table><span class=
                            'myopac_update_span'><button><span class=
                            'myopac_update_span'>[% l("Submit") %]</span></button></span>
                            <span class='myopac_update_span'><button><span class='myopac_update_span'>
                            [% l("Cancel") %]</span></button></span>
                        </td>
                    </tr>

                    <tr>
                        <td class='color_4 light_border'>
                        [% l("Email Address") %]</td>

                        <td class='light_border'
                            id='myopac_summary_email'></td>

                        <td class='light_border'><a href='#'
                           class="hide_me"
                           id='myopac_summary_email_change'
                           style=
                           'text-decoration: underline;'>[% l("Change") %]</a></td>
                    </tr>

                    <tr id='myopac_update_email_row'
                        class='hide_me'>
                        <td class='myopac_update_cell' colspan='3'>
                            <span class= 'myopac_update_span'>
                                [% l("Enter new email address:") %]
                            </span>
                            <input type='text' size='24' id='myopac_new_email' />
                            <span class='myopac_update_span'>
                                <button>
                                    <span class= 'myopac_update_span'>
                                        [% l("Submit") %]</span>
                                </button>
                            </span>
                            <span class='myopac_update_span'>
                                <button>
                                    <span class='myopac_update_span'>
                                        [% l("Cancel") %]</span>
                                </button>
                            </span>
                        </td>
                    </tr>
                    <tr class="hide_me">
                        <td class='color_4 light_border'>
                        [% l("Primary Identification") %]</td>

                        <td class='light_border'
                            id='myopac_summary_ident1'></td>

                        <td></td>
                    </tr>

                    <tr>
                        <td class='color_4 light_border'>
                        [% l("Active Barcode") %]</td>

                        <td class='light_border'
                            id='myopac_summary_barcode'></td>

                        <td></td>
                    </tr>

                    <tr>
                        <td class='color_4 light_border'>
                        [% l("Home Library") %]</td>
                        <td class='light_border'
                            id='myopac_summary_homelib'></td>
                        <td><a href='#'
                           class="hide_me"
                           id='myopac_summary_home_change'
                           style=
                           'text-decoration: underline;'>[% l("Change") %]</a></td>
                    </tr>
                    <tr id='myopac_update_home_row'
                        class='hide_me'>
                        <td class='myopac_update_cell'
                            colspan='3'>
                            <span class='myopac_update_span'>
                                New home library:</span>
                            <select id='myopac_new_home'>
                            </select>
                            <span class='myopac_update_span'>
                                <button>
                                    <span class= 'myopac_update_span'>
                                        [% l("Submit") %]</span>
                                </button>
                            </span>
                            <span class='myopac_update_span'>
                                <button>
                                    <span class= 'myopac_update_span'>
                                        [% l("Cancel") %]</span>
                                </button>
                            </span>
                        </td>
                    </tr>
                    <tr class="hide_me">
                        <td class='color_4 light_border'>
                            [% l("Account Creation Date") %]
                        </td>
                        <td class='light_border'
                            id='myopac_summary_create_date'></td>
                        <td></td>
                    </tr>
                </tbody>
            </table><br />
            <hr style="border-bottom:none;*height:0px;" color="#DCDBDB" />
            <br />

            <table width='100%' class='light_border data_grid'>
                <thead>
                    <tr>
                        <td>[% l("Addresses") %]</td>

                        <td id='myopac_pending_addr_td' class='hide_me'>
                            <table cellpadding="0" cellspacing="0" border="0">
                                <tr>
                                    <td>[% l("Pending Addresses") %]</td>

                                    <td>
                                        <a href="#"><img
                                            alt="Address Help"
                                            src="[% ctx.media_prefix %]/images/question-mark.png" /></a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </thead>
                <tbody id='myopac_addr_tbody'>
                    <tr id='myopac_addr_row' class='light_border'>
                        <td>
                            <table>
                                <tr>
                                    <td>[% l("Address Type") %]</td>
                                    <td name='myopac_addr_type'></td>
                                </tr>

                                <tr>
                                    <td>[% l("Street") %]</td>
                                    <td name='myopac_addr_street'></td>
                                </tr>
                                <tr>
                                    <td>[% l("Street") %]</td>
                                    <td name='myopac_addr_street2'></td>
                                </tr>

                                <tr>
                                    <td>[% l("City") %]</td>
                                    <td name='myopac_addr_city'></td>
                                </tr>

                                <tr>
                                    <td>[% l("County") %]</td>
                                    <td name='myopac_addr_county'></td>
                                </tr>

                                <tr>
                                    <td>[% l("State") %]</td>
                                    <td name='myopac_addr_state'></td>
                                </tr>

                                <tr>
                                    <td>[% l("Country") %]</td>
                                    <td name='myopac_addr_country'></td>
                                </tr>

                                <tr>
                                    <td>[% l("Zip") %]</td>
                                    <td name='myopac_addr_zip'></td>
                                </tr>
                                <tr>
                                    <td name='myopac_addr_edit_td'
                                        colspan='2' class='hide_me'>
                                        <a class='classic_link'
                                            name='myopac_addr_edit_link'
                                            href='#'>Edit Address</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                        <td class='hide_me'
                            name='myopac_pending_addr_td'>
                            <table>
                                <tr>
                                    <td>[% l("Address Type") %]</td>

                                    <td><input name=
                                    'myopac_pending_addr_type' /></td>
                                </tr>
                                <tr>
                                    <td>
                                    [% l("Street") %]</td>

                                    <td><input name=
                                    'myopac_pending_addr_street' /></td>
                                </tr>
                                <tr>
                                    <td>[% l("Street") %]</td>
                                    <td>
                                        <input name='myopac_pending_addr_street2' />
                                    </td>
                                </tr>
                                <tr>
                                    <td>[% l("City") %]</td>
                                    <td>
                                        <input name='myopac_pending_addr_city' />
                                    </td>
                                </tr>
                                <tr>
                                    <td>[% l("County") %]</td>

                                    <td>
                                        <input name='myopac_pending_addr_county' />
                                    </td>
                                </tr>
                                <tr>
                                    <td>[% l("State") %]</td>
                                    <td>
                                        <input name='myopac_pending_addr_state' />
                                    </td>
                                </tr>

                                <tr>
                                    <td>[% l("Country") %]</td>

                                    <td>
                                        <input name='myopac_pending_addr_country' />
                                    </td>
                                </tr>
                                <tr>
                                    <td>[% l("Zip") %]</td>
                                    <td><input name=
                                    'myopac_pending_addr_zip' /></td>
                                </tr>
                                <tr>
                                    <td name='myopac_addr_edit_td' colspan='2'>
                                        <a class='classic_link'
                                            name='myopac_pending_addr_edit_link'
                                            href='#'>Save Changes</a>
                                        <a style='padding-left:10px;'
                                            class='classic_link'
                                            name='myopac_pending_addr_del_link'
                                            href='#'>Discard Pending Address</a>
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div class='hide_me' id='myopac_username_error'>
            [% l("Please enter a username") %]
        </div>
        <div class='hide_me' id='myopac_username_dup'>
            [% l("The requested username is not available.  Please choose a different username.") %]
        </div>
        <div class='hide_me' id='myopac_username_success'>
            [% l("Username successfully updated") %]
        </div>
        <div class='hide_me' id='myopac_username_failure'>
            [% l("Username update failed") %]
        </div>
        <div class='hide_me' id='myopac_email_error'>
            [% l("Please enter a valid email address") %]
        </div>
        <div class='hide_me' id='myopac_email_success'>
            [% l("Email address successfully updated") %]
        </div>
        <div class='hide_me' id='myopac_email_failure'>
            [% l("Email address update failed") %]
        </div>
        <div class='hide_me' id='myopac_password_error'>
            [% l("Passwords are empty or do not match") %]
        </div>
        <div class='hide_me' id='myopac_password_success'>
            [% l("Password successfully updated") %]
        </div>
        <div class='hide_me' id='myopac_password_failure'>
            [% l("Password update failed") %]
        </div>
        <span class='hide_me' id= 'myopac_invalid_username'>
            [% l("Username cannot contain spaces or have the same format as a barcode") %]
        </span>
        <span class='hide_me' id='myopac_addr_changes_saved'>
            Address Saved
        </span>
        <div class='hide_me' id='prefs_update_success'>
            [% l("Preferences successfully updated") %]
        </div>
        <div class='hide_me' id='prefs_update_failure'>
            [% l("Preferences update failed!") %]
        </div>
        <span class='hide_me' id='myopac_pref_hold_notify_alert'>
            [% l("This setting defines how you will be notified of holds that are ready to be picked up from the library.  By default, holds will use the notification style you choose here.  However, you will still have the option to change individual holds regardless of this setting.") %]
        </span>
    </div>
[% END %]