{% extends "affiliates_templets/affiliates_base.html" %}
{% block content %}
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    {% with messages = get_flashed_messages() %}
    {% if messages %}
        <ul class="flashes">
        {% for message in messages %}
            <h2><b><center style="color:green">{{ message }}</center></b></h2>
        {% endfor %}
        </ul>
    {% endif %}
    {% endwith %}

    <!-- Start::app-content -->
    <div class="main-content app-content">
        <div class="container-fluid">
            <!-- Start::page-header -->
            <div class="d-md-flex d-block align-items-center justify-content-between my-4 page-header-breadcrumb">
                <div>
                    <p class="fw-semibold fs-18 mb-0">Profile Details</p>
                </div>
            </div>
            <!-- End::page-header -->

            <!-- Start::row-1 -->
            <div class="row">
                <div class="col-xl-4">
                    <div class="card custom-card">
                        <div class="card-header">
                            <div class="card-title">
                                Personal Info
                            </div>
                        </div>
                        <div class="card-body">
                            <ul class="list-group">
                                <li class="list-group-item">
                                    <div class="d-flex flex-wrap align-items-center">
                                        <div class="me-2 fw-semibold">
                                            Name :
                                        </div>
                                        <span class="fs-12 text-muted">{{ affiliateDict.userName }}</span>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="d-flex flex-wrap align-items-center">
                                        <div class="me-2 fw-semibold">
                                            Email :
                                        </div>
                                        <span class="fs-12 text-muted">{{ affiliateDict.email }}</span>
                                    </div>
                                </li>
                                <li class="list-group-item">
                                    <div class="d-flex flex-wrap align-items-center">
                                        <div class="me-2 fw-semibold">
                                            Phone Number :
                                        </div>
                                        <span class="fs-12 text-muted">{{ affiliateDict.phoneNumber }}</span>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-xl-4">
                    <div class="card custom-card">
                        <div class="card-header">
                            <div class="card-title">
                                Affiliate Change Password
                            </div>
                        </div>
                        <div class="card-body">
                            <form method="POST" action="{{ url_for('affiliates.affiliate_change_password', affiliateId=affiliateDict.id) }}" enctype="multipart/form-data">
                                <div class="form-group">
                                    <label for="oldPassword">Old Password*</label>
                                    <input type="text" class="form-control" id="oldPassword" name="oldPassword" placeholder="Enter old password" required>
                                </div>
                                <div class="form-group">
                                    <label for="newPassword">New Password*</label>
                                    <input type="text" class="form-control" id="newPassword" name="newPassword" placeholder="Enter new password" required>
                                </div>
                                <div class="form-group">
                                    <label for="confirmNewPassword">Confirm Password*</label>
                                    <input type="text" class="form-control" id="confirmNewPassword" name="confirmNewPassword" placeholder="Enter confirm password" required>
                                </div>
                                <div class="modal-footer justify-content-between">
                                    <button type="submit" class="btn btn-primary">Submit</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
            <!-- End::row-1 -->
        </div>
    </div>
    <!-- End::app-content -->
</div>
{% endblock %}