<div class="container-fluid mt--6">
    <div class="row">
      <div class="col">
        <div class="card">
          <!-- Card header -->
          <div class="card-header border-0">
            <h3 class="mb-0">Details</h3>
          </div>
          <!-- Light table -->
          <div class="table-responsive">
            <table class="table align-items-center table-flush">
              <thead class="thead-light">
                <tr>
                  <th scope="col" class="sort" data-sort="name">FQDN</th>
                  <th scope="col" class="sort" data-sort="status">Version</th>
                  <th scope="col" class="sort" data-sort="name">Last Updated On</th>
                  <th scope="col" class="sort" data-sort="name">status</th>
                  <th scope="col" class="sort" data-sort="status">Last Mongo Backup On</th>
                  <th scope="col" class="sort" data-sort="status">Nightly Restart</th>
                  <th scope="col" class="sort" data-sort="budget">Total Memory</th>
                  <th scope="col" class="sort" data-sort="status">Free Memory</th>
                  <th scope="col" class="sort" data-sort="status">Available for Applications</th>
                  <th scope="col" class="sort" data-sort="status">Swap Space</th>
                  <th scope="col" class="sort" data-sort="status">Cores</th>
                  <th scope="col" class="sort" data-sort="status">Total System Space</th>
                  <th scope="col" class="sort" data-sort="status">Available Space</th>
                  <th scope="col" class="sort" data-sort="status">/parablu size</th>
                </tr>
              </thead>
              <tbody class="list">
                {% for customer in datas %}
                <tr>
                  <th scope="row">
                    <div class="media align-items-center">
                      {% if customer['System Name'] == "0" %}
                        
                      {% else %}
                      <a data-id="{{customer['System Name']}}" data-type="{{customer['Date & Time ']}}" data-cloud = "{{res}}" class="serverUptimeHistory"
                        style="cursor: pointer;">
                        <u><span class="name mb-0 text-sm">{{customer['System Name']}}</span></u>
                      </a>
                      {% endif %}
  
                    </div>
                  </th>
                  {% if customer['MachineVersion'] == "0" %}
                  <td class="budget">
               
                  </td>
                  {% else %}
                  <td class="budget">
                    {{customer['MachineVersion']}}
                  </td>
                  {% endif %}
                  {% if customer['Date & Time '] == "0" %}
                <td class="budget">
           
                </td>
                {% else %}
                <td class="budget">
                  {{customer['Date & Time '] | format_date}}
                </td>
                {% endif %}

                <td id="status-{{customer['System Name']}}"></td>


                {% if customer['lastMongoUpdate'] == "0" %}
                <td class="budget">

                </td>
                {% else %}
                <td class="budget">
                  {% if customer['lastMongoUpdate'] != "0" %}
                  {{customer['lastMongoUpdate']}}
                  {% else %}
                  Not yet updated
                  {% endif %}
                </td>
                {% endif %}


                {% if customer['lastNightlyRestart'] == "0" %}
                <td class="budget">
                  N/A
                </td>
                {% else %}
                <td class="budget">
                  {% if customer['lastNightlyRestart'] != "N/A" %}
                  {{customer['lastNightlyRestart'] }}
                  {% else %}
                  Not yet updated
                  {% endif %}
                </td>
                {% endif %}

                {% if customer['Total Physical Memory'] == "0" %}
                <td class="budget">
     
                </td>
                {% else %}
                <td>
                  <span class="badge badge-dot mr-4">
                    <span class="status">{{customer['Total Physical Memory'] | bytes_to_gb}}</span>
                    <!-- <span class="status">8</span> -->
                  </span>
                </td>
                {% endif %}
                {% if customer['Free Physical Memory'] == "0" %}
                <td class="budget">
   
                </td>
                {% else %}
                <td class="budget">
                  {{customer['Free Physical Memory'] | bytes_to_gb}}
                </td>
                {% endif %}

                {% if customer['Available'] == "0" %}
                <td class="budget">
           
                </td>
                {% else %}
                <td class="budget">
                  {{customer['Available'] |bytes_to_gb}}
                </td>
                {% endif %}

                {% if customer['Swap Memory / Disabled'] == "0" %}
                <td class="budget">
            
                </td>
                {% else %}
                <td class="budget">
                  {{customer['Swap Memory / Disabled'] | bytes_to_gb}}
                </td>
                {% endif %}

                {% if customer['Processor'] == "0" %}
                <td class="budget">
    
                </td>
                {% else %}
                <td class="budget">
                  {{customer['Processor'] }}
                </td>
                {% endif %}
                
                {% if customer['Total Space'] == "0" %}
                <td class="budget">
     
                </td>
                {% else %}
                <td class="budget">
                  {{customer['Total Space'] |lstrip_zero}}
                </td>
                {% endif %}
                
                {% if customer['Free Space'] == "0" %}
                <td class="budget">
               
                </td>
                {% else %}
                <td class="budget">
                  {{customer['Free Space'] |lstrip_zero }}
                </td>
                {% endif %}

                {% if customer['parabluDiskAvailable'] == "0" %}
                <td class="budget">
                  
                </td>
                {% else %}
                <td class="budget">
                  {{customer['parabluDiskAvailable'] }}B
                </td>
                {% endif %}

                </tr>
                {% endfor %}              
              </tbody>
            </table>
          </div>
          <!-- Card footer -->
          <div class="card-footer py-4">
            <nav aria-label="...">
  
            </nav>
          </div>
        </div>
      </div>
    </div>
  
  
  </div>


  <div class="modal fade" id="SystemTime" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body systemUptime">
        ...
      </div>
      <div class="modal-footer">

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

<script type='text/javascript'>
    $(document).ready(function () {
      $('.serverUptimeHistory').click(function () {
        var userid = $(this).data('id');
        console.log("The value of the userid is : ")
        console.log(userid);
        var systemType = $(this).data('type');
        console.log("The value of the date is : ");
        console.log(systemType);
        var cloudName = $(this).data('cloud');
        console.log("The value of the cloudname is : ");
        console.log(cloudName);
        $.ajax({
          url: '/serverUptimeHistory',
          type: 'post',
          data: { userid: userid, res: systemType ,cloudName:cloudName},
          success: function (data) {
            $('.systemUptime').html(data);
            $('.systemUptime').append(data.htmlresponse);
            $('#SystemTime').modal('show');
          }
        });
      });
    });
  </script>
  