{% include 'header.twig' %}
    <div class="overlay"></div>

<style>
  
  .order-actions{
  background: #ff712b;
    border-radius: 5px;
  }
</style>
<!-- Main variables *content* -->
            <main>
         <div class="container-fluid mt-3">
           <div class="row">
               <div class="col-lg-12">
                  <div class="card p-lg-2 p-1">
                     <div class="row align-items-center">
                        <div class="col-md-auto col-12">
                          <ul class="orders-nav">
                            <li class="col-lg col-6">
                              <a href="/orders" class="orders-nav-link active">
                                <div class="icon">
                                  <i class="ri-sort-asc"></i>
                                </div>
                                <span class="text">
                                  All
                                </span>
                              </a>
                            </li>
                            <li class="col-lg col-6">
                              <a href="/orders/pending" class="orders-nav-link">
                                <div class="icon">
                                  <i class="ri-loader-2-line"></i>
                                </div>
                                <span class="text">
                                  Pending
                                </span>
                              </a>
                            </li>			
                            <li class="col-lg col-6">
                              <a href="/orders/inprogress" class="orders-nav-link">
                                <div class="icon">
                                  <i class="ri-loader-2-line"></i>
                                </div>
                                <span class="text">
                                  In progress
                                </span>
                              </a>
                            </li>
                            <li class="col-lg col-6">
                              <a href="/orders/completed" class="orders-nav-link">
                                <div class="icon">
                                  <i class="ri-checkbox-circle-line"></i>
                                </div>
                                <span class="text">
                                  Completed
                                </span>
                              </a>
                            </li>
                            <li class="col-lg col-6">
                              <a href="/orders/partial" class="orders-nav-link">
                                <div class="icon">
                                  <i class="ri-pie-chart-line"></i>
                                </div>
                                <span class="text">
                                  Partial
                                </span>
                              </a>
                            </li>
                            <li class="col-lg col-6">
                              <a href="/orders/processing" class="orders-nav-link">
                                <div class="icon">
                                  <i class="ri-truck-line"></i>
                                </div>
                                <span class="text">
                                  Processing
                                </span>
                              </a>
                            </li>
                            <li class="col-lg col-6">
                              <a href="/orders/canceled" class="orders-nav-link">
                                <div class="icon">
                                  <i class="ri-close-circle-line"></i>
                                </div>
                                <span class="text">
                                  Canceled
                                </span>
                              </a>
                            </li>
                          </ul>
                        </div>

                        <div class="col-lg">
                          <form action="" method="get" id="history-search">
                                                        <div class="input-group">
                                                            <input type="text" name="search" class="form-control" value="{{ search }}" placeholder="Search orders">
                                                            <div class="input-group-append">
                                                                <button class="btn btn-big-secondary" type="submit" style="
    background: #FF7700;
">
                                                                    <span class="fas fa-search"></span>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </form>
                        </div>
                     </div>
                  </div>
               </div>
            </div>
                  
                  
                  
                  
                  
                  
                  
                  
                  
                    {% if orders is empty and 'all' == status %}
             <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>
            {% endif %}
                  
                  
                  
                  
                  
                  
                  
                  <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>
              
    {% for order in orders %}
        <div class="order-container">
          <div class="card mb-3">
        <div class="card-body">
          <div class="op-card--top">
            <div class="row align-items-center">
              <div class="col-lg-auto col-md-auto mb-3 mb-lg-0">
{% if order['status'] == lang['orders.status.completed'] %}
               <div class="op-stats completed">
                   {{ order['id'] }}
                </div>
{% endif %}
{% if order['status'] == lang['orders.status.processing'] %}
                <div class="op-stats processing">
                   {{ order['id'] }}
                </div>
{% endif %}
{% if order['status'] == lang['orders.status.pending'] %}
                <div class="op-stats pending">
                   {{ order['id'] }}
                </div>
{% endif %}
{% if order['status'] == lang['orders.status.partial'] %}
               <div class="op-stats op-stats-sm partial">
                   {{ order['id'] }}
                </div>
{% endif %}
{% if order['status'] == lang['orders.status.inprogress'] %}
               <div class="op-stats inprogress">
                   {{ order['id'] }}
                </div>
{% endif %}
{% if order['status'] == lang['orders.status.canceled'] %}
               <div class="op-stats cancelled">
                   {{ order['id'] }}
                </div>
{% endif %}  
              </div><!-- ./col (ID)  -->
              <div class="col-lg-3 col-md mb-3 mb-lg-0">
                <h3 class="op-service-title">
                    
              <!--      <span style="background:var(--color-6);color:#fff!important; border-radius: 5px; padding: 1px 3px">{{ order["service_id"] }}</span>&nbsp;-->
                    
                  {{ order['service'] }}
                </h3>
              </div><!-- ./col (service title) -->
              <div class="col-12 d-none d-md-block d-lg-none"></div>
              <div class="col-lg-3 col-md-6  mb-3 mb-lg-0">
                <a href="{{ order['link'] }}" target="_blank" class="orders-nav-link op-search-box op-order-link mb-0">
                  <div class="icon">
                    <i class="ri-share-box-fill"></i>
                  </div>
                  <div class="link">{{ order['link'] }}</div>
                </a>
              </div><!-- ./col (service title) -->
              <div class="col-lg col-md-6 mb-3 mb-lg-0">
                <div class="op-date">{{ order['date'] }}</div>
              </div>
              <div class="col-lg-auto">
                      {% if order['status'] == lang['orders.status.completed'] %}
                         <div class="op-stats completed">{{ order['status'] }}</div>
                      {% endif %}
                      {% if order['status'] == lang['orders.status.processing'] %}
                          <div class="op-stats processing">{{ order['status'] }}</div>
                      {% endif %}
                      {% if order['status'] == lang['orders.status.pending'] %}
                          <div class="op-stats pending">{{ order['status'] }}</div>
                      {% endif %}
                      {% if order['status'] == lang['orders.status.partial'] %}
                        <div class="op-stats op-stats-sm partial">{{ order['status'] }}</div>
                      {% endif %}
                      {% if order['status'] == lang['orders.status.inprogress'] %}
                          <div class="op-stats inprogress">{{ order['status'] }}</div>
                      {% endif %}
                      {% if order['status'] == lang['orders.status.canceled'] %}
                          <div class="op-stats cancelled">{{ order['status'] }}</div>
                      {% endif %}  
              </div>
            </div>
          </div><!-- ./op-card--top -->
          <div class="op-card--bottom">
            <div class="row align-items-center row-cols-md-4 row-cols-2">
              <div class="col-lg-auto mt-3 mt-md-0">
                <div class="op-item">
                  <div class="title">{{lang["orders.charge"]}}</div>
                  <div class="icon">
                    <i class="ri-sort-asc"></i>
                  </div>
                  <div class="text">{{ order['charge'] }}</div>
                </div>
              </div><!-- ./col -->
              <div class="col-lg-auto mt-3 mt-md-0">
                <div class="op-item">
                  <div class="title">{{lang["orders.quantity"]}}</div>
                  <div class="icon">
                    <i class="ri-money-dollar-circle-line"></i>
                  </div>
                  <div class="text">{{ order['quantity'] }}</div>
                </div>
              </div><!-- ./col -->
              <div class="col-lg-auto mt-3 mt-md-0">
                <div class="op-item">
                  <div class="title">{{lang["orders.start.count"]}}</div>
                  <div class="icon">
                    <i class="ri-sort-asc"></i>
                  </div>
                  <div class="text">{{ order['start_count'] }}</div>
                </div>
              </div><!-- ./col -->
              <div class="col-lg-auto mt-3 mt-md-0">
                <div class="op-item">
                  <div class="title">{{lang["orders.remains"]}}</div>
                  <div class="icon">
                    <i class="ri-sort-asc"></i>
                  </div>
                  <div class="text">{{ order['remains'] }}</div>
                </div>
              </div><!-- ./col -->
             
              
              
              <div class="col-lg-auto col-12 col-md-12 ms-lg-auto d-flex align-items-center justify-content-center mt-3 mt-lg-0 ms-auto">
              
                  <span class="order-actions">   
                {% if order["refillButton"] == "2" %}
{% if order['status'] == "Completed"  %}

{% if order['show_refill'] == "true"  %}
<a href="orders/refill/{{order['id']}}" class="btn btn-sm refill-button">Refill</a>

{% endif %}
{% endif %}
{% endif %}
{% if order["refillButton"] == "3" %}

{% if order['status'] == "Completed"  %}

{% if order['show_refill'] == "true"  %}
  <button data-tippy-content="Refill will be available in {{order['refillTimeLeft']}}" class="btn btn-sm refill-button">Refill</button>
{% endif %}
{% endif %}
{% endif %}
{% if order["refillButton"] == "4" %}



{% if order['status'] == "Completed"  %}

{% if order['show_refill'] == "true"  %}
<button type="button" class="btn btn-primary btn-sm">{{"Refilling"}}</button>
{% endif %}
{% endif %}
{% endif %}

{% if order['cancelButton']   == true %}
         


                   <a href="orders/cancel/{{order['id']}}" class="btn btn-actions bg-danger">cancel</a>
               {% endif %}
                      </span>
   
                              <a href="/tickets" class="op-stats op-stats-btn warning-btn cs-btn" style="cursor: pointer">
                  <i class="ri-customer-service-2-line"></i>
                </a>
              </div>
              
              
            </div><!-- ./row -->
          </div><!-- ./op-card--bottom -->
        </div>
      </div><!-- ./card -->
                               
       
    {% endfor %}
  </section>
                                    
      {% 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">«</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">»</span>
              </a>
            </li>
          {% endif %}

        </ul>
      {% endif %}

                                    
                        </div>
                    </div>
                </section>

            </div>
        </div>
    </div>
              
 {% include 'footer.twig' %}