{% extends ../base.html %}

{% block meta %}
{% end %}

{% block title %}Crafty Controller - Activity Logs{% end %}

{% block content %}

<div class="content-wrapper">

    <!-- Page Title Header Starts-->
  <div class="row page-title-header">
    <div class="col-12">
      <div class="page-header">
        <h4 class="page-title">Activity Logs</h4>
      </div>
    </div>

  </div>
  <!-- Page Title Header Ends-->
  <div class="row">
    <div class="col-md-12 col-lg-12 grid-margin stretch-card">
      <div class="card">
        <div class="card-header header-sm d-flex justify-content-between align-items-center">
          <h4 class="card-title"><i class="fas fa-history"></i> &nbsp;Audit Logs</h4>
          <span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}", data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}", data-placement="top"></span>
        </div>
        <div class="card-body">

          <div class="table-responsive">
            <table class="table table-hover" id="audit_table" style="overflow: scroll;" width="100%">
              <thead>
                  <tr class="rounded">
                      <td>Username</td>
                      <td>Time</td>
                      <td>Action</td>
                      <td>Server ID</td>
                      <td>IP</td>
                  </tr>
              </thead>
              <tbody>
              {% for row in data['audit_logs'] %}
              <tr>
                  <td>{{ row['user_name'] }}</td>
                  <td>
                      {{ row['created'].strftime('%Y-%m-%d %H:%M:%S') }}
                  </td>
                  <td>{{ row['log_msg'] }}</td>
                  <td>{{ row['server_id'] }}</td>
                  <td>{{ row['source_ip'] }}</td>
              </tr>
              {% end %}
              </tbody>
          </table>

          </div>
        </div>
      </div>
    </div>
  </div>
  <style>
    .popover-body{
      color: white !important;;
  }
  </style>




</div>
<!-- content-wrapper ends -->

{% end %}

{% block js %}
<script>

$( document ).ready(function() {
    console.log('ready for JS!')
    $('#audit_table').DataTable({
      'order': [1, 'desc']
    }
    );

});
</script>
<script>
  $(document).ready(function(){
    $('[data-toggle="popover"]').popover();
      if($(window).width() < 1000){
      $('.too_small').popover("show");
    }

  });
   $(window).ready(function(){
          $('body').click(function(){
              $('.too_small').popover("hide");
      });
  });
  $(window).resize(function() {
    // This will execute whenever the window is resized
    if($(window).width() < 1000){
      $('.too_small').popover("show");
    }
    else{
      $('.too_small').popover("hide");
    } // New width
  });
  </script>

{% end %}