{% extends "base.html" %}
{% load render_table from django_tables2 %}
{% load static %}

{% block title %}
List patients
{% endblock %}



{% block head %}

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>

<!-- Load js for initializing tables via their server-side options -->
<script type="text/javascript" charset="utf8" src="{% static 'js/datatableview.js' %}"></script>
<script type="text/javascript">
    datatableview.auto_initialize = false;
    $(function(){

        var xeditable_options = {};
        datatableview.initialize($('.datatable'), {
            fnRowCallback: datatableview.make_xeditable(xeditable_options),
        });

        // $('#patients').DataTable({
        //     "columnDefs": [
        //         {
        //             // The `data` parameter refers to the data for the cell.
        //             // The `rows`argument is an object representing all the data for the current row.
        //             "render": function ( data, type, row ) {
        //                 // return "<button class='btn btn-danger btn-delete' data-pk='" + data + "'>" + row.name + "</button>";
        //                 return '<a href="/patient/update/'+ row.id +'/"><i class="fa fa-edit"></i></a>';
        //             },
        //             "targets": -1,  // -1 is the last column, 0 the first, 1 the second, etc.
        //             "searchable": false
        //         }
        //     ]            
        // });

    });
</script>
{% endblock %}


{% block content %}
<h2>List patients</h2>


{#% render_table table %#}

<div>
    <a href=/patient/search/ ><button type="button" class="btn btn-primary">Add/Search patients</button></a>
</div>

{{ datatable }}


<!-- <table id="patients" class="table table-striped table-bordered" style="width:100%" data-server-side="true" data-ajax="/api/patients/?format=datatables">
    <thead>
      <tr>
        <th data-data="id">ID</th>
        <th data-data="name">姓名</th>
        <th data-data="medical_records">病歷號</th>
        <th data-data="gender">Gender</th>
        <th>Edit</th>
      </tr>
    </thead>
  </table> -->


<div>   
    <a href=/patient/search/ ><button type="button" class="btn btn-primary">Add/Search patients</button></a>
</div>

{% endblock %}