<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="{{url_for('crispr_app.static', filename='css/bootstrap.min.css')}}">
<link rel="stylesheet" type="text/css" href="{{url_for('crispr_app.static', filename='css/crispr_app.css')}}">
</head>
<body>
<h1 class="text-center">Crispr App Main Page</h1>
<hr>
<div class="row">
    <div class="col-md-3">
        <label for="columnSelect">Select column to filter</label>
        <select name="columnSelect" id="columnSelect" class="form-control">
            <option value="">None</option>
            <option value="pos_bef_PAM">pos_bef_PAM</option>
            <option value="41_bef17">41_bef17</option>
            <option value="41_aft">41_aft</option>
            <option value="total41">total41</option>
            <option value="7_bef17">7_bef17</option>
            <option value="7_aft17">7_aft17</option>
            <option value="total7">total7</option>
            <option value="total">total</option>
        </select>
    </div>
    <div class="col-md-3">
        <label for="minValue">Minimum value</label>
        <input class="form-control" id="minInput" name="minValue" type="text" value="{{inputs.min}}"></input>
    </div>
    <div class="col-md-3">
        <label for="maxValue">Maximum value</label>
        <input class="form-control" id="maxInput" name="maxValue" type="text" value="{{inputs.max}}"></input>
    </div>
    <div class="col-md-3">
        <label>Filter/Clear</label><br/>
        <button class="btn btn-default" type="button" onclick="updateFilter();">Filter</button>
        <button class="btn btn-default" type="button" onclick="clearFilter();">Clear</button>
    </div>
</div>
<hr>
<div id="crispr_table_div">
    <!-- <input class="search form&#45;control" placeholder="Search (subsequence/gene)" /></input><br /> -->
    <button type="button" class="btn btn-info" onclick="downloadTable();">Download Filtered Table</button>
    <a id="download_link" download="table.csv" style="visibility: hidden;"></a>
<hr>

<!-- Page controls -->
{% include 'page_controls.html' %}
<!-- / Page controls -->

<br/>
<center><i>Click on a column name to order the table by this column</i></center>
<br/>
<div id="dvData">
{% include "table.html" %}
</div>
</div>
<hr>
<!-- Page controls -->
{% include 'page_controls.html' %}
<!-- / Page controls -->
<script src="{{url_for('crispr_app.static', filename='js/jquery-1.11.3.min.js')}}"></script>
<script src="{{url_for('crispr_app.static', filename='js/jquery.cookie.js')}}"></script>
<script>


var columnSelect = document.getElementById("columnSelect");
var minInput = document.getElementById("minInput");
var maxInput = document.getElementById("maxInput");

var orderby = "{{inputs.orderby}}";
var filterby = "{{inputs.filterby}}";
var min = "{{inputs.min}}";
var max = "{{inputs.max}}";
var page = {{inputs.page}};

var updateTable = function() {
    url = "/crispr?filterby=" + filterby + "&min=" + min + "&max=" + max + "&orderby=" + orderby + "&asc=" + $.cookie(orderby) + "&page=" + page;
    window.location = url;
}

// set selected value
if ("{{inputs.filterby}}") {
    for(var i = 0, j = columnSelect.options.length; i < j; ++i) {
        if(columnSelect.options[i].innerHTML === "{{inputs.filterby}}") {
           columnSelect.selectedIndex = i;
           break;
        }
    }
}

var updateFilter = function() {
    filterby = columnSelect.options[columnSelect.selectedIndex].value;
    if (!filterby || !minInput.value || !maxInput.value) {
        // don't filter anything
        window.location = "/crispr";
    } else {
        // update filter
        min = minInput.value;
        max = maxInput.value;
        updateTable();
    }
};

// Asign listeners to each of the cells in table header
$(".theader").each(function(index) {
        // on click, sort the table...
        this.onclick = function() {
            orderby = this.innerHTML;
            cookie = $.cookie(orderby);
            if (!cookie) {
                // set ascending order = false if no cookie
                $.cookie(orderby, 'False');
                asc= 'False';
            } else {
                // revert the value of the cookie
                var asc = cookie === "False" ? "True" : "False";
                $.cookie(orderby, asc);
            }
            updateTable();
        }
});

var clearFilter = function () {
    $("#minInput").val('');
    $("#maxInput").val('');
    updateFilter();
};

var nextPage = function () {
    page += 1;
    updateTable();
}

var previousPage = function () {
    page -= 1;
    updateTable();
}

var firstPage = function () {
    page = 0;
    updateTable();
}

var lastPage = function () {
    page = parseInt({{inputs.table_size}} / {{inputs.rows_per_page}});
    updateTable();
}

var downloadTable = function () {
    link = $("#download_link");
    url = "/crispr/download?filterby=" + filterby + "&min=" + min + "&max=" + max + "&orderby=" + orderby + "&asc=" + asc
    link.attr('href', url);
    link[0].click();
}
</script>
{% include 'google-analytics.html' %}
</body>
</html>
