{% extends "main/layout.html" %}
{% load static %}
{% block content %}
<div class="breadcrumb-holder">
	<div class="container-fluid">
		<ul class="breadcrumb">
			<li class="breadcrumb-item active">{{ legend|upper }}</li>
		</ul>
	</div>
</div>
<div class="container-fluid"><br/>
	<div class="row">
		<div class="col-sm-12">
			<div class="card shadow-lg border-info rounded">
				<div class="card-header border-primary">
					<center>
						<h2>{{ legend|upper }}
                            {% if page == 'filter' %}
                              <i class="fa fa-arrow-right"></i>
                              Fulan <span class="text-danger" >{{monthname}}</span>, Tinan <span class="text-danger">{{year}}</span>
                            {% endif %}
                        </h2>
					</center>
                    <div class="row mt-1">
                        <div class="col-md-12 d-flex justify-content-center">
                            <form method="POST">
                                {% csrf_token %}
                                <div class="form-row">
                                        <div class="form-group col-md-4">
                                            <select id="tinan" name="tinan" class="form-control" required>
                                                <option selected value="0">Tinan</option>
                                                {% for y in years %}
                                                <option value="{{ y }}">{{ y }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <select id="fulan" name="fulan" class="form-control" required>
                                                <option selected value="0">Fulan</option>
                                                {% for m in months %}
                                                <option value="{{ m.id }}">{{ m.name }}</option>
                                                {% endfor %}
                                            </select>
                                        </div>
                                        <div class="form-group col-md-4">
                                            <button class="btn btn-info" type="submit" value="View">Hare <i class="fa fa-eye"></i></button>
                                        </div>
                                  </div>
                            </form>
                        </div>
                    </div>
				</div>
				<div class="card-body">
					<table id="example" class="table table-sm responsive" style="width:100%">
						<thead>
							<tr align="center">
								<th>Nu.</th>
								<th>Public IP Address</th>
								<th>Username</th>
								<th>Model/Table</th>
								<th>Action</th>
								<th>Lat</th>
								<th>Lon</th>
								<th>Datetime</th>
								<th>#</th>
							</tr>
						</thead>
						<tbody>
                            {% for obj in objects %}
                              <tr align="center">
                                <td>{{forloop.counter}}</td>
                                <td>{{obj.ip_address}}</td>
                                <td>{{obj.username}}</td>
                                <td>{{obj.model}}</td>
                                <td>{{obj.action}}</td>
                                <td>{{obj.latitude}}</td>
                                <td>{{obj.longitude}}</td>
                                <td>{{obj.timestamp}}</td>
                                <td>
                                    <a href="{% url 'log-detail' obj.hashed %}" class="btn btn-sm btn-info">Detalha <i class="fa fa-eye"></i></a>
                                </td>
                              </tr>
                            {% endfor %}
						</tbody>
					</table>
				</div> <!--end card-body-->
			</div> <!--end card-->
		</div> <!--end col-->
	</div> <!--end row-->
</div>
{% endblock %}
{% block scripts %}
<link href="{% static 'main/vendor/datatables/css/searchBuilder.dataTables.min.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/datatables/css/searchBuilder.bootstrap4.min.css' %}" rel="stylesheet">
<link href="{% static 'main/vendor/datatables/css/buttons.dataTables.min.css' %}" rel="stylesheet">
<style type="text/css">
    .dtsb-searchBuilder{
        background: #b9c7e6 !important;
        padding: 5px
    }
    .dt-button, .dtsb-add {
        background: white !important;
    }
</style>
<script src="{% static 'main/vendor/datatables/js/dataTables.searchBuilder.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/searchBuilder.bootstrap4.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/jszip.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/pdfmake.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/vfs_fonts.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/buttons.print.min.js' %}"></script>
<script src="{% static 'main/vendor/datatables/js/buttons.colVis.min.js' %}"></script>
<script type="text/javascript">
    $(document).ready( function () {
        var table = $('#example').removeAttr('width').DataTable( {
            "scrollY": "50vh",
            "scrollX": true,
            "scrollCollapse": true,
            "paging": true,
            searchBuilder: true,
            buttons:[
                {
                    extend: 'excelHtml5', autoFilter: true, sheetName: 'Exported data',exportOptions: { columns: ':visible' },
                },
                {
                    extend: 'pdfHtml5', orientation: 'landscape', pageSize: 'LEGAL', messageTop: '',
                },
                {
                    extend: 'print',
                    exportOptions: { columns: ':visible' },
                },
                'colvis',
            ],
            dom: 'Bfrtip',
            "deferRender": true
        });
        table.searchBuilder.container().prependTo(table.table().container());
    } );
</script>
{% endblock %}