{% extends 'base.html' %}
{% block content %}

{% if user.is_authenticated %}



   <form id="searchform" method="POST" action="">
       {% csrf_token %}

        <select name="prefilter" id="prefilter">
        <option value="everywhere">Everywhere</option>
        <option value="name">Name</option>
        </select>

        <input type="text"  id="txtSearch" name="txtSearch" autocomplete="off" onKeyUp="load_main_grid ()">
        <button type="submit" >Submit</button>
    </form>

    <script> function load_main_grid (){

        $.ajaxSetup({
        data: {txtSearch: $('#txtSearch').val(), prefilter: $('#prefilter').val(),csrfmiddlewaretoken: '{{ csrf_token }}' },});
        $.ajax({
            type: "POST",
            url: "article-filter2/",
            //dataType: 'json',
            //beforeSend: function () {
                //$('#myTable').remove(); // delete myTable on home.html
                //$('#myTable tbody').empty(); ou thead
            //},
            success: function (data) {
            $("#myTableContainer").html(data.html_table); // copy grid.html inside div oh home.html
            //sorttable.makeSortable(document.getElementById("myTable2")); // rend table dans filter.html sortable sans mettre sortable dans class
            }
        });
        }</script>

    <script>
        $("#searchform").submit(function(e){
        e.preventDefault(); // bloque le action du form pour executer ajax a la place
        $.ajaxSetup({
        data: {txtSearch: $('#txtSearch').val(), prefilter: $('#prefilter').val(),csrfmiddlewaretoken: '{{ csrf_token }}' },});
        $.ajax({
            type: "POST",
            url: "article-filter2/",
            //dataType: 'json',
            //beforeSend: function () {
                //$('#myTable').remove(); // delete myTable on home.html
                //$('#myTable tbody').empty(); ou thead
            //},

            success: function (data) {
            $("#myTableContainer").html(data.html_table); // copy grid.html inside div oh home.html
            //sorttable.makeSortable(document.getElementById("myTable2")); // rend table dans filter.html sortable sans mettre sortable dans class
            }
        });
        })

        //$(document).ready(function() {$('#myTable tr').dblclick(function() {
        //var href = $(this).find("a").attr("href");
        //if(href) {
            //window.location = href;}});});
</script>




<div id="myTableContainer" style=" border:2px solid yellow; width: 1000px; height: 500px; ">
</div>
    <input type="button" value="Get Selected Rows" onclick="getSelectedRows()" />
    <script>function getSelectedRows() {
            var grid = $("#jqGrid");
            var rowKey = grid.getGridParam("selrow");

            if (!rowKey)
                alert("No rows are selected");
            else {
                var selectedIDs = grid.getGridParam("selarrrow");
                var result = "";
                for (var i = 0; i < selectedIDs.length; i++) {
                    result += selectedIDs[i] + ",";
                }

                alert(result);
            }
        }</script>

{% else %}

<div class="col-md-6 offset-md-3">
<h1>Login</h1>
<br/>

<form method="POST" action="{% url 'home' %}">
	{% csrf_token %}
  <div class="mb-3">
    <input type="text" class="form-control" name="username", placeholder="Username" required>

  </div>
    <br/>
  <div class="mb-3">
    <input type="password" class="form-control" name="password", placeholder="Password" required>
  </div>
  <br/>
  <button type="submit" class="btn btn-secondary">Login</button>

</form>

</div>

{% endif %}

{% endblock %}