{% 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>
          {% if data['user_data']['hints'] %}
          <span class="too_small" title="{{ translate('dashboard', 'cannotSeeOnMobile', data['lang']) }}" ,
            data-content="{{ translate('dashboard', 'cannotSeeOnMobile2', data['lang']) }}" ,
            data-placement="top"></span>
          {% end %}
        </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 %}