{% extends base_template %}

{% block content %}

<div class="container-fluid">

    <div class="row justify-content-center">

        <div class="col-md-6 col-lg-5">

            <div class="card" style="border:0; background:#dee2e6; margin-top:15vh;">

                <div class="card-header"
                    style="border:0; background:#6c757d; color:#fff; font-weight:600; font-size:1.15rem;">
                    <i class="bi bi-key me-2"></i>
                    Change Password
                </div>

                <div class="card-body">
                    {% if messages %}

                    {% for message in messages %}

                    <div class="alert alert-{{ message.tags }}">
                        {{ message }}
                    </div>

                    {% endfor %}

                    {% endif %}


                    <form method="POST" action="{% url 'change_password' %}">

                        {% csrf_token %}


                        <!-- CURRENT PASSWORD -->

                        <div class="mb-3">

                            <label for="current_password" class="form-label fw-semibold">

                                Current Password

                            </label>

                            <input type="password" class="form-control" id="current_password" name="current_password"
                                style="border:0; background:#fff;" required>

                        </div>


                        <!-- NEW PASSWORD -->

                        <div class="mb-3">

                            <label for="new_password" class="form-label fw-semibold">

                                New Password

                            </label>

                            <input type="password" class="form-control" id="new_password" name="new_password"
                                style="border:0; background:#fff;" required>

                        </div>


                        <!-- CONFIRM PASSWORD -->

                        <div class="mb-4">

                            <label for="confirm_password" class="form-label fw-semibold">

                                Confirm New Password

                            </label>

                            <input type="password" class="form-control" id="confirm_password" name="confirm_password"
                                style="border:0; background:#fff;" required>

                        </div>


                        <!-- BUTTONS -->

                        <div class="d-flex gap-2">

                            <button type="submit" class="btn btn-dark">

                                <i class="bi bi-key"></i>
                                Change Password

                            </button>


                            <a href="{% if request.session.department == 'SCM' %}{% url 'scm_home' %}{% elif request.session.department == 'Finance' %}{% url 'finance_home' %}{% elif request.user.role == 'Admin' %}{% url 'admin:index' %}{% else %}{% url 'login' %}{% endif %}"
                                class="btn btn-outline-secondary">

                                Cancel

                            </a>

                        </div>

                    </form>

                </div>

            </div>

        </div>

    </div>

</div>

{% endblock %}