{% extends "partials/dashboard-base.html" %}
{% load static %}
{% load humanize %}
{% block content %}
    <!-- Dashboard Section start -->
    <section class="dashboard-section body-collapse pay step step-2">
        <div class="overlay pt-120">
            <div class="container-fruid">
                <div class="main-content">
                    <div class="head-area d-flex align-items-center justify-content-between">
                        <h4>Request Payment</h4>
                        <div class="icon-area">
                            <img src="{% static 'assets1/images/icon/support-icon.png' %}" alt="icon">
                        </div>
                    </div>
                    <div class="choose-recipient">
                        <div class="step-area">
                            <span class="mdr">Step 2 of 3</span>
                            <h5>Set Amount of request</h5>
                        </div>
                        <div class="user-select">
                            <div class="single-user">
                                <div class="left d-flex align-items-center">
                                    <div class="img-area">
                                        <!-- <img src="{{ a.user.kyc.image.url }}" alt="image"> -->
                                        <img src="{{ account.user.kyc.image.url }}" style="width: 100px; height: 100px; border-radius: 50%; object-fit: cover;"  alt="image">
    
                                    </div>
                                    <div class="text-area">
                                        <p>{{ account.user.kyc.full_name|title }}</p>
                                        <span class="mdr"><b>{{ account.account_number }}</b></span> <br>
                                        <span class="mdr">{{ account.user.email }}</span>
                                    </div>
                                </div>
                                <div class="right">
                                    
                                    <a href="{% url 'core:search-account' %}">
                                        <i class="icon-h-edit"></i>
                                        Edit
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <form action="{% url 'core:amount-request-process' account.account_number  %}" method="POST">
                        {% csrf_token %}
                        <div class="send-banance">
                            <span class="mdr">You Request</span>
                            <div class="input-area">
                                <input class="xxlr" placeholder="Enter Amount Request" type="number" name="amount-request" id="amount-request">
                                <select>
                                    <option value="1">USD</option>
                                    <option value="2">USD</option>
                                    <option value="3">USD</option>
                                </select>
                            </div>
                            
                        </div>
                        <!-- Js -->

                        <div class="send-banance pt-0 mt-0">
                            <span class="mdr">Request Description</span>
                            <div class="input-area">
                                <input class="xxlr" placeholder="Request money for house rent" type="text" name="description">
                                
                            </div>
                        </div>
                        <div class="footer-area mt-40">
                            <a href="{% url 'core:request-search-account' %}">Previous Step</a>
                            <button type="submit" style="padding: 10px 30px; border-radius: 10px; background: rgb(98, 0, 255); color: #fff;" class="active">Next</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
    <!-- Dashboard Section end -->

    {% endblock content %}