{% extends "base.html" %}		    
{% block content %}
{% load staticfiles %}
<br></br>
<style>
    .table {
        border: 1px solid #cccccc;
    }
    .table-bordered > thead > tr > th,
    .table-bordered > tbody > tr > th,
    .table-bordered > tfoot > tr > th,
    .table-bordered > thead > tr > td,
    .table-bordered > tbody > tr > td,
    .table-bordered > tfoot > tr > td 
    {
        border: 0.5px solid #cccccc;
    }
    body {
        font-family: Verdana, Arial, sans-serif; font-size: 12px; 
        background-color: #DDDDDD;
        padding-bottom: 70px;
    }
</style>
<div style="margin-top: 15px; margin-right: 20px; margin-left: 20px">
    <table id="example" style="font-size: 14" class="table table-striped table-bordered" cellspacing="0" width="100%" align="center">
        <thead>
            <tr>
                {% if lang == 'hr'%}
                <th>ID UREĐAJA</th>
                <th>VREMENSKI TRENUTAK</th>
                <th>ALARM</th>
                {% else %}
                <th>DEVICE ID</th>
                <th>TIME STAMP</th>
                <th>ALARM</th>
                {% endif %}
            </tr>
        </thead>
        <tfoot>
            <tr>
                {% if lang == 'hr'%}
                <th>ID UREĐAJA</th>
                <th>VREMENSKI TRENUTAK</th>
                <th>ALARM</th>
                {% else %}
                <th>DEVICE ID</th>
                <th>TIME STAMP</th>
                <th>ALARM</th>
                {% endif %}
            </tr>
        </tfoot>
        <tbody>
            {% for alarm1 in alarms %}
            <tr>
                {%if alarm1.checked == 1%}
                <td>{{alarm1.lldevicelist}}</td>
                <td>{{alarm1.timestamp}}</td>
                <td>{{alarm1.alarm}}</td>
                {% else %}
                <td>{{alarm1.lldevicelist}}</td>
                <td>{{alarm1.timestamp}}</td>
                <td>{{alarm1.alarm}}</td>
                {% endif %}
            </tr>
            {% endfor %}
        </tbody>
    </table>
</div>
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        if ("{{lang}}" == 'hr'){
            $('#example').DataTable({
                "language":{
                    "decimal":        "",
                    "emptyTable":     "Nema dostupnih podataka u tablici",
                    "info":           "Prikaz _START_ do _END_ od _TOTAL_ zapisa",
                    "infoEmpty":      "Prikaz 0 do 0 od 0 zapisa",
                    "infoFiltered":   "(filtrirano od ukupno _MAX_ zapisa)",
                    "infoPostFix":    "",
                    "thousands":      ",",
                    "lengthMenu":     "Prikaz _MENU_ zapisa",
                    "loadingRecords": "Prikupljanje...",
                    "processing":     "Obrada...",
                    "search":         "Pretraga:",
                    "zeroRecords":    "Nema odgovarajućih zapisa",
                    "paginate": {
                        "first":      "Prva",
                        "last":       "Posljednja",
                        "next":       "Sljedeća",
                        "previous":   "Prethodna"
                    },
                    "aria": {
                        "sortAscending":  ": Uzlazno sortiranje",
                        "sortDescending": ": Silazno sortiranje"
                    }
                }
            });
        }else{
            $('#example').DataTable({
                "language":{
                    "decimal":        "",
                    "emptyTable":     "No data available in table",
                    "info":           "Showing _START_ to _END_ of _TOTAL_ entries",
                    "infoEmpty":      "Showing 0 to 0 of 0 entries",
                    "infoFiltered":   "(filtered from _MAX_ total entries)",
                    "infoPostFix":    "",
                    "thousands":      ",",
                    "lengthMenu":     "Show _MENU_ entries",
                    "loadingRecords": "Loading...",
                    "processing":     "Processing...",
                    "search":         "Search:",
                    "zeroRecords":    "No matching records found",
                    "paginate": {
                        "first":      "First",
                        "last":       "Last",
                        "next":       "Next",
                        "previous":   "Previous"
                    },
                    "aria": {
                        "sortAscending":  ": activate to sort column ascending",
                        "sortDescending": ": activate to sort column descending"
                    }          
                }
            });
        }
    });
</script>
{% endblock %}