<style>
    .btn-outline {
        background-color: transparent;
        color: inherit;
        transition: all .5s;
    }

    .btn-primary.btn-outline {
        color: #428bca;
    }

    .btn-success.btn-outline {
        color: #5cb85c;
    }

    .btn-info.btn-outline {
        color: #5bc0de;
    }

    .btn-warning.btn-outline {
        color: #f0ad4e;
    }

    .btn-danger.btn-outline {
        color: #d9534f;
    }

    .btn-primary.btn-outline:hover,
    .btn-success.btn-outline:hover,
    .btn-info.btn-outline:hover,
    .btn-warning.btn-outline:hover,
    .btn-danger.btn-outline:hover {
        color: #fff;
    }
</style>

<div class="well">
    <form role="form" method="POST" action="<?= base_url('updatePassword')?>">
        <input type="hidden" value="<?=$autoId?>" name="auto_id"/>
        <div class="row form-group">
            <div class="col-md-6 col-lg-offset-3">
                <h3 class="text-info form-group">Change Password...!!</h3>
            </div>
        </div>
        
        <div class="row form-group">
            <div class="col-lg-offset-3 col-md-6">
                <div class="input-group">
                    <span class="input-group-addon">Old Password:</span>
                    <input class="form-control" required="" name="old-password" type="password" placeholder="Current Password">
                </div>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-lg-offset-3 col-md-6">
                <div class="input-group">
                    <span class="input-group-addon">New Password:</span>
                    <input class="form-control" required="" name="new-password" type="password" placeholder="New Password">
                </div>
            </div>
        </div>
        <div class="row form-group">
            <div class="col-lg-offset-3 col-md-6">
                <div class="input-group">
                    <span class="input-group-addon">Confirm Password:</span>
                    <input class="form-control" required="" name="confirm-password" type="password" placeholder="Confirm Password">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-9 col-lg-push-3">
                <p class="form-group">
                    <a>
                        <button class="btn btn-primary btn-outline" type="submit">Update&nbsp;Password</button>
                    </a>
                    <?php
                    if (isset($status) and $status) {
                        ?>
                       <b class="text-center text-success update-password-message">&nbsp;&nbsp;<?= $message ?></b>
                    <?php } elseif(isset ($status)) { ?>
                       <b class="text-center text-danger update-password-message">&nbsp;&nbsp;<?= $message ?></b>
                        <?php
                    }
                    ?>  
                </p>
            </div>
        </div>
    </form>





</div>
<script type="text/javascript">
    $(document).ready(function () {
        window.setTimeout(function () {
            $('.update-password-message').fadeTo(1500, 0);
            $('.update-password-message').slideUp(500, function () {
                $('.update-password-message').remove();
            });

        }, 4000);
    });</script>