<%!
title = 'Login - change password'
%>
<%inherit file="//layout/base.html" />
<%namespace name="lib" file="//lib.html" import="*" />
<%def name="css()">
    <%lib:stylesheet_tags files="${['/static/css/login.css']}" />
</%def>

        <style>
        .spl-change-password-skip {
            width: 498px;
            margin: 5px 0;
        }
        @media (max-width: 767px) {
            .spl-pwd-reset-description {
                text-align: center;
                margin-bottom: 20px;
            }
            .spl-change-password-skip {
                width: 220px;
                margin: 0 auto;
                text-align: center;
            }
        }
        </style>

        <!--Above the Login Form -->
        <div class="account">
            <div class="wrapper-container">
                <header>
                    <h1 id="brand">
                    % if cherrypy.config['product_type'] == 'hunk':
                        splunk<span class="prompt">&gt;&#x00AE;&#xF000;</span>
                    % elif cherrypy.config['product_type'] == 'enterprise':
                        splunk<span class="prompt">&gt;&#x00AE;&#xF001;</span>
                    % elif cherrypy.config['product_type'] == 'cloud':
                        splunk<span class="prompt">&gt;&#x00AE;&#xF002;</span>    
                    % else:
                        splunk<span class="prompt">&gt;&#x00AE;</span>
                    % endif
                    </h1>
                    <h2 class="spl-pwd-reset-description">${_('Change password')}</h2>
                </header>
                <div class="content">
                    <form action="${ make_url('/account/passwordchange') }" method="post" class="loginForm spl-pwdreset-form" autocomplete="off">
                        ${csrf_hidden_input()}
                        % if return_to:
                            <input type="hidden" name="return_to" value="${return_to|h}">
                        % endif

                        <table>
                            <td>
                                <div class="input-wrapper">
                                    <label for="newpassword" class="placeholder-text">${_('New password')}</label>
                                    <input type="password" id="newpassword" name="newpassword" tabindex="1"/>
                                </div>
                            </td>
                            <td>
                                <div class="input-wrapper">
                                    <label for="confirmpassword" class="placeholder-text">${_('Confirm new password')}</label>
                                    <input type="password" id="confirmpassword" name="confirmpassword" tabindex="2"/>
                                </div>
                            </td>
                            <td>
                                <button class="splButton-primary save-pass-button" type="submit" tabindex="3">${_('Save password')}</button>
                            </td>
                        </table>
                    </form>
                    
                    <div class="messages">
                        % if err:
                        <p id="jserror" class="error">
                            ${err|h}
                        </p>
                        % endif
                    </div>

                     % if not fpc:
                        <p class="spl-change-password-skip"><a href="#" tabindex="4" onclick="window.location='${return_to or '/'|h}';">${_('Skip')}</a></p>
                    % endif
                </div>
            </div>
        </div>

<script type="text/javascript" language="Javascript1.3">
function initializePlaceholder() {
    $(".input-wrapper").each(function(index, el) {
        var $placeholder = $(el).find(".placeholder-text");
        var $input = $(el).find("input");
        var updatePlaceholder = function() {
            $placeholder[$input.val() === '' ? 'show' : 'hide']();
        };

        $placeholder.click(function() {
            $input.focus();
        });
        $input.focus(function() {
            $placeholder.addClass("focus");
        });
        $input.blur(function() {
            $placeholder.removeClass("focus");
        });
        $input.bind('keyup mouseup change', function() {
            updatePlaceholder();
        });
    });
}

window.onload = function() {   
    document.getElementById('newpassword').focus();
    initializePlaceholder();
}
</script>
