{% extends 'base.html' %}

      {% block content %}
      <script>
        document.getElementById("retraits").classList.add("is-active")
      </script>

      <section class="section is-title-bar">
        <div class="level">
          <div class="level-left">
            <div class="level-item">
              <ul >
                <li style="font-size: 17px !important;">PAY2UP</li>
                <li style="font-size: 17px !important;">Retraits</li>
              </ul>
            </div>
          </div>
          <div class="level-right">
             
          </div>
        </div>
      </section>

      <div class="card has-table has-mobile-sort-spaced m-1-mobile">
        <header class="card-header">
          <p class="card-header-title">
            <span class="icon"><i class="mdi mdi-account-multiple"></i></span>
            Transactions
          </p>
          <a href="" class="card-header-icon">
            <span class="icon"><i class="mdi mdi-reload"></i></span>
          </a>
        </header>
        <div class="card-content">
          <div class="b-table has-pagination">
            <div class="table-wrapper has-mobile-cards">
              {% if count == 0 %}
              <p class="subtitle has-text-centered py-3">Vous n'avez aucune transaction</p>
              {% else %}
              
              
              
              <table class="table is-fullwidth is-striped is-hoverable is-sortable is-fullwidth">
                <thead>
                  <tr>
                    <th>
                      <b>ID</b>
                    </th>
                    <th>
                      Client
                    </th>
                    <th>
                      Montant
                    </th>
                    <th>
                      Moyens de payments
                    </th>
                    <th>
                      Status
                    </th>
                    <th>
                      Date de création
                    </th>
                    <th>
                      Type
                    </th>
                    <th>
                      Actions
                    </th>
                  </tr>
                </thead>
                <tbody>

                  <style>
                    @media only screen and (max-width: 768px) {
                      /* Header responsive */
                      .section.is-title-bar .level {
                        display: block;
                      }
                      
                      .section.is-title-bar .level-left,
                      .section.is-title-bar .level-right {
                        margin-bottom: 1rem;
                      }
                      
                      /* Table responsive */
                      table, thead, tbody, th, td, tr {
                        display: block;
                      }
                      
                      thead tr {
                        position: absolute;
                        top: -9999px;
                        left: -9999px;
                      }
                      
                      tr {
                        margin-bottom: 1rem;
                        border: 1px solid #f0f0f0;
                        border-radius: 8px;
                        background: white;
                        padding: 0;
                      }
                      
                      td {
                        border: none;
                        position: relative;
                        padding: 0.75rem 1rem !important;
                        min-height: 40px;
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                      }
                      
                      td:before {
                        content: attr(data-label);
                        font-weight: 600;
                        color: #6b7280;
                        font-size: 0.75rem;
                        text-transform: uppercase;
                        letter-spacing: 0.5px;
                        flex-shrink: 0;
                        width: 100px;
                      }
                      
                      td > * {
                        flex: 1;
                        text-align: right;
                      }
                    }
                  </style>
                  {% for t in transactions %}
                  <tr class="">
                    <td data-label="Id"> 
                      {{t.transactionID}}
                    </td>
                    <td data-label="Client">
                      {{t.client_number|slice:":15"}}
                    </td>
                    <td data-label="Montant">
                     {% if t.type == "RETRAIT" %} - {% endif %} {{t.amount}} <b>XOF</b>
                    </td>
                    <td data-label="Par">
                      {{t.type_wallet}}
                    </td>
                 
                    <td data-label="Status">
                      <div class="tag  {% if t.transactionStatus == "SUCCESS"  %}is-success {% else %}is-warning {% endif %}  is-light">
                        
                        {{t.transactionStatus}}
                      
                      </div>
                    </td>
  
                    <td data-label="Date">
                      <small class="has-text-grey is-abbr-like" title="Oct 25, 2020"> {{t.created}}</small>
                    </td>
  
                    <td data-label="Type">
                      {{t.type}}
                    </td>

                    
                    <td data-label="Actions">
                      {% if t.transactionStatus == "INITIATED" %}
                      <button class="button is-info is-small" onclick="goTo('/super/retraits/valid?id={{t.transactionID}}')">Valider</button>
                      {% endif %}
                    </td>
                    
                    
  
                  </tr>
                  
                  {% endfor %}
                 
                </tbody>
              </table>

              {% endif %}

            </div>


            {% if nbpage > 1 %}

            <div class="notification">
              <div class="level">
                <div class="level-left">
                  <div class="level-item">
                    <div class="buttons has-addons">

                      {% if transactions.has_previous %}
                          <button onclick="goTo('?page={{ transactions.previous_page_number }}')" type="button" class="button ">{{ transactions.previous_page_number }}</button>
                      {% endif %}

                      <button type="button" class="button is-active">{{transactions.number}}</button>

                      {% if transactions.has_next %}
                          <button onclick="goTo('?page={{ transactions.next_page_number }}')" type="button" class="button">{{ transactions.next_page_number }}</button>
                      {% endif %}
                    </div>
                  </div>
                </div>
                <div class="level-right">
                  <div class="level-item">
                    <small>Page {{transactions.number}} sur {{nbpage}}</small>
                  </div>
                </div>
              </div>
            </div>

          {% endif %}




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



  {% endblock content %}