{% extends "client/base_site.html" %}
{% load i18n static %}
{% block title %}Deposit - Dashboard{% endblock %}

{% block topbar %}
    {% include "client/topbar.html" %}
{% endblock %}

{% block content %} 
    <div class="page-content">
        <div class="page-container">
            {% block breadcrumbs %}
                {% include "client/breadcrumbs.html" with title="Deposit" %}
            {% endblock %}

            <div class="card shadow-sm">
                <div class="card-header border-bottom card-tabs d-flex flex-wrap align-items-center gap-2">
                            <div class="flex-grow-1">
                                <h4 class="header-title">{{ account.account_number }} ({{ account.accounttype.account_category }} | {{ account.accounttype.currency }})</h4>
                            </div>

                            <div class="d-flex flex-wrap flex-lg-nowrap gap-2">
                                <div class="flex-shrink-0 d-flex align-items-center gap-2">
                                    <div class="position-relative">
                                        <input type="text" class="form-control ps-4" placeholder="Search Here...">
                                        <i class="ti ti-search position-absolute top-50 translate-middle-y start-0 ms-2"></i>
                                    </div>
                                </div>
                                <a href="{% url 'client-create-deposit' account.account_id %}" class="btn btn-success"><i class="ti ti-plus me-1"></i>Add New Deposit</a>
                            </div><!-- end d-flex -->
                </div>

                
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>Transction ID</th>
                            <th>Channel Type</th>
                            <th>Deposit Method</th>
                            <th>Amount</th>
                            <th>Status</th>
                            <th>Created At</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for deposit in deposits %}
                        <tr>
                            <td>{{ deposit.deposit_id }}</td>
                            <td>{{ deposit.channel_type }}</td>
                            <td>{{ deposit.deposit_method }}</td>
                            <td>{{ deposit.amount|floatformat:2 }}</td>
                            <td>
                                {% if deposit.status|lower == 'success' %}
                                    <span style="color: white; background-color: green; padding: 2px 6px; border-radius: 4px;">Success</span>
                                {% else %}
                                    <span style="color: white; background-color: orange; padding: 2px 6px; border-radius: 4px;">Pending</span>
                                {% endif %}
                            </td>
                            <td>{{ deposit.created_at }}</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>

                <nav aria-label="Deposit pagination">
                  <ul class="pagination justify-content-center">
                    {% if deposits.has_previous %}
                      <li class="page-item">
                        <a class="page-link" href="?page=1">&laquo; First</a>
                      </li>
                      <li class="page-item">
                        <a class="page-link" href="?page={{ deposits.previous_page_number }}">Previous</a>
                      </li>
                    {% else %}
                      <li class="page-item disabled"><span class="page-link">First</span></li>
                      <li class="page-item disabled"><span class="page-link">Previous</span></li>
                    {% endif %}

                    <li class="page-item active">
                      <span class="page-link">
                        Page {{ deposits.number }} of {{ deposits.paginator.num_pages }}
                      </span>
                    </li>

                    {% if deposits.has_next %}
                      <li class="page-item">
                        <a class="page-link" href="?page={{ deposits.next_page_number }}">Next</a>
                      </li>
                      <li class="page-item">
                        <a class="page-link" href="?page={{ deposits.paginator.num_pages }}">Last &raquo;</a>
                      </li>
                    {% else %}
                      <li class="page-item disabled"><span class="page-link">Next</span></li>
                      <li class="page-item disabled"><span class="page-link">Last</span></li>
                    {% endif %}
                  </ul>
                </nav>


            </div>
                          
        </div>

        {% block footer %}{% include "client/footer.html" %}{% endblock %}
</div>
{% endblock %}