{% extends 'layouts/base.html' %}

{% block title %} {{cloudName}} {% endblock title %}

{% block stylesheets %}
<link rel="stylesheet" href="/static/assets/css/style.css">
<link rel="stylesheet" href="/static/assets/css/dataTables.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- <link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.min.css" rel="stylesheet"> -->
<style>
    #colo {
        color: brown;
    }

    /* CSS link color (red) */
    #colo:hover {
        color: blue;
    }

    /* CSS link hover (green) */


    .sticky-header {
    position: sticky;
    top: 0;
    z-index: 999; /* Adjust this value if necessary */
    background-color: #fff; /* Set the desired background color for the sticky header */
    /* Add any additional styling for the sticky header */
   }

</style>

{% endblock stylesheets %}

{% block content %}
<div class="header bg-primary pb-6">
    <div class="container-fluid">
        <div class="header-body">
            <div class="row align-items-center py-4">
                <div class="col-lg-6 col-7">

                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <ol class="breadcrumb breadcrumb-links breadcrumb-dark">
                            <li class="breadcrumb-item">Machine Name : </li>
                            <!-- <li>{{session['accesstype']}}</li> -->
                        </ol>
                    </nav>

                    <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <a href="{{url_for('admin.dashboard')}}">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark" data-toggle="tooltip" data-placement="bottom"
                              title="Dashboard">
                              <li class="breadcrumb-item"><i class="fas fa-home"></i></li>
                            </ol>
                          </a>
                    </nav>

                    <!-- <nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
                        <a data-id="{{cloudname}}" class="addClient" style="cursor: pointer;">
                            <ol class="breadcrumb breadcrumb-links breadcrumb-dark" data-toggle="tooltip"
                                data-placement="bottom" title="Add Note">
                                <li class="breadcrumb-item">
                                    Add Note
                                </li>
                            </ol>
                        </a>
                    </nav> -->
                </div>
            </div>
            <!-- Card stats -->
        </div>
    </div>
</div>

<!-- Page content -->
<div class="container-fluid mt--6">
    <div class="row">
        <div class="col-xl-12">
            <div class="card">
                <div class="card-header border-0">
                    <div class="row align-items-center">
                        <div class="col">
                            <h2>Complete Agent Creation List</h2>             
                        </div>
                    </div>
                </div>
                <div class="table-responsive">
                    <!-- <h3 style="text-align: 4000px;">Add Note</h3> -->
                    <!-- Projects table -->
                    <table id="example" class="display table table-striped table-bordered">
                        <thead class="sticky-header">
                            <tr>
                                <th style="width: 130pt;">Agent Requested On</th>
                                <th style="width: 130pt;">Agent Created On</th>
                                <th style="width: 130pt;">Owners</th>
                                <th style="width: 130pt;">Customer Name</th>
                                <th style="width: 130pt;">Version</th>
                                <th style="width: 130pt;">Status</th>
                            </tr>
                        </thead>
                        {% for agent in agentList%}
                        <tr>
                            <td scope="row" style="width: 20px;">{{agent['timestamp']| timestampToDateTime}}</td>
                            <td scope="row" style="width: 20px;">{{agent['agentcreatedTime']| timestampToDateTime}}</td>
                            <td scope="row" style="width: 20px;">{{agent['SubmittedBy']}}</td>
                            <td scope="row" style="width: 20px;">{{agent['cloudName']}}</td>
                            <td scope="row" style="width: 20px;">{{agent['agentversion']}}</td>
                            <td scope="row" style="white-space: normal;"><a href="/agentStatus/{{agent['_id']}}">{{agent['agentstatus']}}</a></td>
                        </tr>
                        {% endfor %}
                        <tbody>
                            
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

    </div>

    {% include "includes/footer.html" %}

</div>
{% endblock content %}


{% block javascripts %}
<script>
    function updateSessionTime() {
        var start = new Date('{{ session.logged_in_at }}' * 1000);  // Convert Unix timestamp to JavaScript date
        var now = new Date();
        var elapsed = now - start;
        var hours = Math.floor(elapsed / (1000 * 60 * 60));
        var minutes = Math.floor((elapsed / (1000 * 60)) % 60);
        var seconds = Math.floor((elapsed / 1000) % 60);
        var sessionTime = hours + ':' + minutes.toString().padStart(2, '0') + ':' + seconds.toString().padStart(2, '0');
        document.getElementById('session-time').textContent = sessionTime;
    }
    setInterval(updateSessionTime, 1000);  // Update session time every second
  </script>
  
{% endblock javascripts %}
