<script>
    jQuery(document).ready(function($){
        //open popup
        $('.cd-popup-trigger').on('click', function(event){
            event.preventDefault();
            $('.cd-popup').addClass('is-visible');
            console.log( "popup load" );
        });

        //close popup
        $('.cd-popup').on('click', function(event){
            if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
                event.preventDefault();
                $(this).removeClass('is-visible');
            }

            if( $(event.target).is('.cd-popup-cancel') || $(event.target).is('.cd-popup') ) {
                event.preventDefault();
                $(this).removeClass('is-visible');
            }
        });

        //close popup when clicking the esc keyboard button
        $(document).keyup(function(event){
            if(event.which=='27'){
                $('.cd-popup').removeClass('is-visible');
            }
        });

        // init paging
        limit = document.getElementById('display-limit');
        total = {{ totalPage }};
        currentPage  = {{ page }};
        content = {{ size }};

        if (currentPage == null) {
            currentPage = 1;
        }

        // showing data
        var from = ((currentPage-1) * 3)+1;
        var to   = (content-1)+from;

        document.getElementById("page-from").innerHTML = from;
        document.getElementById("page-to").innerHTML = to;

        //paging
        if (total > 0) {
            $('#pagination').twbsPagination({
                totalPages: {{ totalPage }},
                visiblePages: 7,
                href: '?page={number}'
            });

            limit.style.display = '';
        }

    });
</script>

<div class="table-responsive">
    <table class="table table-striped">
        <thead>
        <tr>
            <th style="width: 80%">Jenis Biofisik</th>
            <th style="width: 20%">&nbsp;</th>
        </tr>
        </thead>
        <tbody>
        {% for data in list %}
            <tr>
                <td>{{ data.mst_biofisik_name }}</td>
                <td>
                    <div class="btn-group btn-group-justified" role="group" aria-label="Justified button group">
                        <a href="{{ site_url('ms/jenis_biofisik/form') }}/{{ data.mst_jenis_biofisik_id }}" class="btn-sm ink-reaction btn-primary" role="button">Ubah</a>
                        <a href="javascript:void(0);" onclick="set_value('{{ data.mst_jenis_biofisik_id }}')" class="btn-sm ink-reaction btn-danger cd-popup-trigger" role="button">Hapus</a>
                    </div>
                </td>
            </tr>
        {% endfor %}
        </tbody>
    </table>
</div>

<!--pagination and limit-->
<div id="display-limit" class="row" style="display: none;">
    <div class="col-lg-4 text-left">
        <ul class="pagination pagination-sx">
            <li class="disabled"><a>Showing <span id="page-from"></span> to <span id="page-to"></span> of {{ total }} entries</a></li>
        </ul>
    </div>
    <div class="col-lg-8 text-right">
        <input type="hidden" id="content-size" value="{{ size }}" />
        <ul id="pagination" class="pagination pagination-sx"></ul>
    </div>
</div>
<!--end pagination and limit-->

<input type="hidden" id="deleted" value="" />