{% include 'header.twig' %}


<!-- Main variables *content* -->
			<main>
         <div class="container-fluid mt-3">
            <div class="row">
               <div class="col-lg-12">
                  <div class="card p-4">
                     <div class="row align-items-center">
                        <div class="col-md-auto col-12">
							  <div class="dropdown">
								<button class="btn btn-primary btn-100 dropdown-toggle dd-btn ps-5" type="button" data-toggle="dropdown" aria-expanded="false">
								  <div class="d-flex fw-400">
									<i class="ri-filter-2-line me-2"></i>
									<span>Filter Status</span>
									<i class="ri-arrow-down-s-line ms-auto ms-md-3"></i>
								  </div>
								</button>
								<ul class="dropdown-menu" aria-labelledby="filterServicesDd">
									<li><a class="dropdown-item" href="/orders">All</a></li>
									<li><a class="dropdown-item" href="/orders/pending">Pending</a></li>
									<li><a class="dropdown-item" href="/orders/inprogress">In progress</a></li>
									<li><a class="dropdown-item" href="/orders/completed">Completed</a></li>
									<li><a class="dropdown-item" href="/orders/partial">Partial</a></li>
									<li><a class="dropdown-item" href="/orders/processing">Processing</a></li>
									<li><a class="dropdown-item" href="/orders/canceled">Canceled</a></li>
								</ul>
							  </div>
                        </div>

                        <div class="col-lg">
						<form action="/orders" method="get" id="history-search">
                           <div class="search-services">
                              <div class="icon">
                                 <i class="ri-search-line"></i>
                              </div>
                              <input type="text" name="search" class="textbox" value="" placeholder="Search">
                           </div>
						</form>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
           
           
       <!--end-->   
           
           
                
                 <div class="row">
               <div class="col-lg-12">
                  <div class="page overflow-hidden">
                     <div class="page-body pb-4 pb-xl-6 mt-4">
							<div class="services-head-row">
							  <div class="si-wrapper">
								<div class="service-item mb-4">
								  <div class="s-row s-title">
								      
                                    	<div class="s-col s-col-sm">
									   ID	</div>
                                    <div class="s-col s-col-sm">
									  Date</div>
									<div class="s-col s-title">
									  Link	</div>
									<div class="s-col s-col-md">
									  Charge</div>
									<div class="s-col s-col-md">
									  Start count</div>
									<div class="s-col s-col-md">
									  Quantity</div>
									  	<div class="s-col s-col-md">
									  Service</div>
									<div class="s-col s-col-md">
									Status</div>
									<div class="s-col s-col-md">
									Remains	</div>
																		<div class="s-col s-col-md">
									  
									</div>
								  </div>
								</div>
							  </div>
							</div>
							  
        <div class="table-responsive">
          <table class="table ">
							
							 <tbody>
                
                 {% for order in orders %}
              <tr>
                <td class="s-col s-col-md">{{ order['id'] }}</td>
                <td class="s-col s-col-md">{{ order['date'] }}</td>
                
                 <td>
                <div class="order_link_wrap">
                <a href="{{ order['link'] }}" target="_blank" class="order_link">
                  <span> <i class="far fa-link"></i>{{ order['link'] }}</span>
                   </a> </div></td>
                <td class="s-col s-col-md">{{ order['charge'] }}</td>
                <td class=" s-col s-col-md ">{{ order['start_count'] }}</td>
                <td class="s-col s-col-md">{{ order['quantity'] }}</td>
                <td class="s-col s-col-md">{{ order['service'] }}</td>
                <td class="s-col s-col-md">{{ order['status'] }}</td>
                <td class="s-col s-col-md">{{ order['remains'] }}</td>
              </tr>
            {% endfor %}
                
                          </tbody>
          </table>
        </div>
      </div>

       {% if pagination["count"] > 1 %}
        <ul class="pagination">

          {% if pagination["current"] != 1 %}
            <li>
              <a href="orders/{{ status }}/{{ pagination["previous"] }}{% if search %}?search={{ search }}{% endif %}" aria-label="Previous">
                <span aria-hidden="true">&laquo;</span>
              </a>
            </li>
          {% endif %}

          {% set r, l = 3, 3 %}

          {% if pagination['current'] == 1 %}
            {% set r = 7 %}
          {% endif %}

          {% if pagination['current'] == 2 %}
            {% set r = 5 %}
          {% endif %}

          {% if pagination['current'] >= pagination['count'] %}
            {% set l = 5 %}
          {% endif %}

          {% for page in 1..pagination["count"] %}
            {% if page >= (pagination['current']-l) and page <= (pagination['current']+r) %}
              <li{% if page == pagination['current'] %} class="active" {%endif%}><a href="orders/{{ status }}/{{ page }}{% if search %}?search={{ search }}{% endif %}">{{ page }}</a></li>
            {%endif%}
          {% endfor %}

          {% if pagination['current'] < pagination['count'] %}
            <li>
              <a href="orders/{{ status }}/{{ pagination['next'] }}{% if search %}?search={{ search }}{% endif %}" aria-label="Next">
                <span aria-hidden="true">&raquo;</span>
              </a>
            </li>
          {% endif %}

        </ul>
      {% endif %}
    </div>
  </div>
</div>
        </div>
      </div>
    </div> <!-- wrapper End -->
           
           
            <div class="row">
               <div class="col-lg-12">
                  <div class="page overflow-hidden">
                     <div class="page-body pb-4 pb-xl-6 mt-4">
			
							<div class="category-card">
                              
						<div class="card mt-3 p-3">
				<div class="card-body">
					<div class="noorders text-center">
							<p>Hello <strong>{{ user["username"]  }}</strong>, you've never placed an order before.</p>
							<p>You can add a balance and order any service on the <a href="/">New Order</a> page.</p>
						<div class="d-flex justify-content-center mt-5">
							 <a href="/addfunds"><button class="btn btn-primary mb-4 mx-1">Add funds</button></a>
						</div>
					</div>
				</div>
			</div>
				<div class="order-container">
								  </div>
							</div>
                     </div>
                  </div>
				  
				  
				  <section class="mt-3">
					<div class="container text-center d-flex justify-content-center">
					  <nav aria-label="">
					  					  </nav>
					</div>
				  </section>
				  
               </div>
            </div>
         </div>
      </main>


		


      
      <div class="mobile-navbar">
        <div class="mobile-navbar-content">
            <a href="/" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="far fa-box-heart"></i>
                </div>
                <div class="mnc-item-text">New order</div>
            </a>
            <a href="/addfunds" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-exchange-dollar-line"></i>
                </div>
                <div class="mnc-item-text">Add funds</div>
            </a>
            <a href="/tickets" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-customer-service-2-line"></i>
                </div>
                <div class="mnc-item-text">Tickets</div>
            </a>
            <a href="/services" class="mnc-item">
                <div class="mnc-item-icon">
                    <i class="ri-list-check-2"></i>
                </div>
                <div class="mnc-item-text">Services</div>
            </a>
        </div>
    </div>
  
       <div class="bs-toast">
         <div class="bs-toast-content">
            <div class="toast-text">Copy to clipboard</div>
         </div>
      </div>

      <div class="overlay"></div>



{% include 'footer.twig' %}
