{% extends "base_manage.html" %}
{% set active_page = 'select' %}


{% block head %}
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='DataTables-1.10.7/media/css/jquery.dataTables.css') }}?ver={{version}}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='DataTables-1.10.7/extensions/TableTools/css/dataTables.tableTools.css') }}?ver={{version}}">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='DataTables-1.10.7/extensions/FixedColumns/css/dataTables.fixedColumns.css') }}?ver={{version}}">

<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="{{ url_for('static', filename='DataTables-1.10.7/media/js/jquery.dataTables.min.js') }}?ver={{version}}"></script>
<script type="text/javascript" charset="utf8" src="{{ url_for('static', filename='DataTables-1.10.7/extensions/TableTools/js/dataTables.tableTools.min.js') }}?ver={{version}}"></script>
<script type="text/javascript" charset="utf8" src="{{ url_for('static', filename='DataTables-1.10.7/natural.js') }}?ver={{version}}"></script>
<script type="text/javascript" charset="utf8" src="{{ url_for('static', filename='DataTables-1.10.7/extensions/FixedColumns/js/dataTables.fixedColumns.min.js') }}?ver={{version}}"></script>
<script type="text/javascript" src="{{ url_for('static', filename='js/jquery.ui-contextmenu.min.js') }}?ver={{version}}"></script>

<!-- Underscore.js -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

<!-- Lexos Scripts -->
<script type="text/javascript" src="{{ url_for('static', filename='js/scripts_select.js') }}?ver={{version}}"></script>

<!-- Create the initial array of enabled documents -->
<script>
var enabled = [];
{% for row in rows %}
    var state = "{{ row['state']|safe }}";
    var id = "{{ row['id']|safe }}";
    if ( state == 'ui-selected' ) {
        enabled.push(id);
    }
{% endfor %}
console.log(enabled);
</script>
<!-- Collapse the unused previews and options divs -->
<style type="text/css">
#content-wrapper {
    padding-bottom: 20px;
}
#prepare-previews-context {
    height: 1px;
}
#manage-previews, #manage-options {
    margin-bottom: 1px;
}
</style>
{% endblock %}


{% block title %}selecter{% endblock %}


{% block options %}
<legend class="has-tooltip">Select Documents to Alter/Analyze 
    <i class="fa fa-question-circle hasTooltip" style="margin-left:8px;cursor:pointer;color:#A8A8A8;font-size: 18px;"></i><span class="hidden">Click to select and deselect documents, shift-click, control-click, or drag to select and deselect multiple documents. Right-click to view the context menu for further options.</span>
</legend>

<div class="select-bttn">
    <div class="bttn bttn-minor" id="delete">Delete Selected</div>
    <div class="bttn bttn-minor" id="disableall">Deselect All</div>
    <div class="bttn bttn-minor" id="selectall">Select All</div>
</div>

<!-- Additional material can be added inside <legend> -->
<div id="delete-confirm-wrapper">
    <div id="delete-explanation">Are you sure you want to delete the selected documents?</div>
    <div id="confirmation-bttn-wrapper">
        <button type="button" class="bttn bttn-minor confirmation-bttn" id="confirm-delete-bttn">Confirm</button>
        <button type="button" class="bttn bttn-minor confirmation-bttn" id="cancel-bttn">Cancel</button>
    </div>
</div>

<!-- experimental document manager -->
<div class="dataTableContainer">
<table id="demo" class="display">
    <thead>
        <tr>
            <th width="4%" align="right"></th>
            <th width="15%" class="label">Document Name</th>
            <th width="15%" class="class">Class Label</th>
            <th width="20%">Original Source</th>
            <th width="46%">Excerpt</th>
        </tr>
    </thead>
    <tbody>
        {% for row in rows %}
        <tr id="{{ row['id'] }}" class="{{ row['state'] }}">
            <td></td>
            <td><span>{{ row["label"] }}</span></td>
            <td>{{ row["class"] }}</td>
            <td>{{ row["source"] }}</td>
            <td>{{ row["preview"]|truncate(155,True,'...') }}</td>
        </tr>
        {% endfor %}
    </tbody>
    </table>
    </div>
{% endblock %}