[% PROCESS 'master_templates/_defheader.tmpl'
    theme="yui"
    app_key=data.app_key
    extrastyle = '
    .align-div-with-table {
        margin-left: 120px;
        padding: 10px 0;
    }

    .highlight-section {
        background: #faebcc;
        border-radius: 2px;
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05) inset;
        min-height: 20px;
        padding: 19px;
        border: 1px solid #faebcc;
    }

    .highlight-section p {
        margin: 0 0 10px 0;
        font-weight: bold;
    }

    .label-column {
        width: 120px;
        text-align: right;
    }

    ';
-%]

[% PROCESS 'warnings/_mysql_version.tmpl' %]

[% IF !data.root_user && !data.users.size %]
<div>
    <p>[% locale.maketext("No users available.") %]</p>
</div>
[% ELSE %]
<script type="text/javascript">
    var REQUIRED_PASSWORD_STRENGTH = [% data.minpwstrength %];
    var validUserSelected = function(el) {
        return el.selectedIndex > 0;
    };

    var init_page = function() {
        var is_root_user = [% (data.root_user) ? 1 : 0 %];
        var password_validators = CPANEL.password.setup("password", "password2", "password_strength", REQUIRED_PASSWORD_STRENGTH, "create_strong_password", "why_strong_passwords_link", "why_strong_passwords_text");
        if (!is_root_user) {
            var select_user = new CPANEL.validate.validator("[% locale.maketext("[asis,MySQL] User") %]");
            select_user.add('user', validUserSelected, "[% locale.maketext("You must select a user.") %]");
            select_user.attach();
            password_validators.push(select_user);
        }
        CPANEL.validate.attach_to_form("submit", password_validators);
        YAHOO.util.Dom.get("password").focus();
    };
    YAHOO.util.Event.onDOMReady(init_page);
</script>


<div>
    <div id="why_strong_passwords_text" style="display: none">
        [% data.password_why %]
        <br /><br />
        [% data.password_tip %]
    </div>

    <div class="span12">
        <form method="post" action="../scripts/passwdmysql">
            <!-- prevent password autofill -->
            <input type="text" style="display:none">
            <input type="password" autocomplete='off' style="display:none">

            <table>
                <tr>
                    [% IF !data.root_user %]
                        <td class="label-column">[% locale.maketext('MySQL User:') %]</td>
                        <td>
                            <select name="user" id="user">
                                <option value="">[% locale.maketext('Select') %]</option>
                                [% FOREACH user IN data.users %]
                                    [% IF user.user.length() %]
                                    <option value="[% user.user.html() %]">[% user.user.html() %]</option>
                                    [% END %]
                                [% END %]
                            </select>
                        </td>
                        <td><div id="user_error"></div></td>
                    [% ELSE %]
                        <input type="hidden" name="user" id="user" value="root" />
                    [% END %]
                </tr>
                <tr>
                    <td class="label-column">[% locale.maketext('Password:') %]</td>
                    <td><input type="password" autocomplete='off' id="password" name="password" style="width: 150px" /></td>
                    <td><div id="password_error"></div></td>
                </tr>
                <tr>
                    <td class="label-column">[% locale.maketext('Password (again):') %]</td>
                    <td><input type="password" autocomplete='off' id="password2" name="password2" style="width: 150px" /></td>
                    <td><div id="password2_error"></div></td>
                </tr>
                <tr>
                    <td class="label-column">[% locale.maketext('Strength') %] (
                        <div style="display: inline" id="why_strong_passwords_link" class="action_link">
                            [% locale.maketext('Why?') %]
                        </div>):
                    </td>
                    <td>
                        [%# width changed to 156px to match the text fields above and account for the padding and border size of those fields %]
                        <div id="password_strength" style="width: 156px; height: 20px; border: 1px solid black; margin: 5px 0px 3px 0px"></div>
                    </td>
                    <td>
                        <input type="button" id="create_strong_password" value="[% locale.maketext('Password Generator') %]" tabindex="-1" class="btn-secondary" style="vertical-align: middle;" />
                    </td>
                </tr>
            </table>

            [% IF data.root_user && data.defined('using_remote_host') && data.using_remote_host %]
            <div class="align-div-with-table">
                <div class="highlight-section">
                    <p>[% locale.maketext('You are currently using a remote [asis,MySQL] server. Which server’s password do you want to change?') %]</p>
                    <div class="radio">
                        <label>
                            <input type="radio"
                                id="local_host"
                                name="mysqlhost"
                                value="1" />
                            [% locale.maketext('Local [asis,MySQL] server') %]
                        </label>
                    </div>
                    <div class="radio">
                        <label>
                            <input type="radio"
                                id="remote_host"
                                name="mysqlhost"
                                checked="checked"
                                value="0" />
                            [% locale.maketext('Remote [asis,MySQL] server') %]
                        </label>
                    </div>
                </div>
            </div>
            [% END %]

            <div class="align-div-with-table">
                <input type="submit" id="submit" value="[% locale.maketext('Change Password') %]" name="submit" class="btn-primary" />
            </div>
        </form>
        [% IF data.root_user %]
            <p>
                [% locale.maketext('[output,strong,Note]: By default, the [asis,MySQL] root password is set to a random string. You should set this to something that is very hard to guess. You do not need to remember this password unless you plan to connect manually to [asis,MySQL] as the root user.') %]
            </p>
        [% END %]
    </div>
</div>
[% END %]
[% PROCESS 'master_templates/_deffooter.tmpl'
    theme="yui" %]