{% extends "base.html" %}
{% block content %}
<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</th>
                    <th>IDENTIFIKATOR</th>
                    <th>TIP UREĐAJA</th>
                    <th>GEO. ŠIRINA</th>
                    <th>GEO. DUŽINA</th>
                    {% else %}
                    <th>ID</th>
                    <th>IDENTIFIER</th>
                    <th>DEVICE TYPE</th>
                    <th>LATITUDE</th>
                    <th>LONGITUDE</th>
                    {% endif %}
                </tr>
            </thead>
            <tfoot>
                <tr>
                    {% if lang == 'hr'%}
                    <th>ID</th>
                    <th>IDENTIFIKATOR</th>
                    <th>TIP UREĐAJA</th>
                    <th>GEO. ŠIRINA</th>
                    <th>GEO. DUŽINA</th>
                    {% else %}
                    <th>ID</th>
                    <th>IDENTIFIER</th>
                    <th>DEVICE TYPE</th>
                    <th>LATITUDE</th>
                    <th>LONGITUDE</th>
                    {% endif %}
                </tr>
            </tfoot>
            <tbody>
            {% for device in device_list %}
                <tr>
                    <td>{{device.id}}</td>
                    <td>{{device.rem_identifier}}</td>
                    <td>{{device.loc_type}}</td>
                    <td>{{device.loc_lat}}</td>
                    <td>{{device.loc_long}}</td>
                </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 %}