{% extends "eztables/server-side.html" %}
{% load js %}

{% block server-side-custom %}active{% endblock %}

{% block server-side-container %}

<div class="row">
    <p>
        This page demonstrates the server-side search and sort behavior:
        <ul>
            <li>Sorting on name column will perform a sort on version instead</li>
            <li>Sorting on platform column will perform a sort name and platform instead</li>
            <li>Searching on name column will perform a search on version instead</li>
        </ul>
    </p>
</div>

<div class="row">
    <table id="browser-table" class="span12 display table table-bordered table-condensed table-striped">
        <thead>
            <tr>
                <th>Rendering Engine</th>
                <th>Browser</th>
                <th>Version</th>
                <th>Platform(s)</th>
                <th>Engine version</th>
                <th>CSS Grade</th>
            </tr>
        </thead>
        <tbody></tbody>
        <tfoot>
            <tr>
                <td>
                    <input id="filter-0" type="text" class="fill"
                        placeholder=" Rendering engine search">
                </td>
                <td>
                    <input id="filter-1" type="text" class="fill"
                        placeholder=" Browser search">
                </td>
                <td>
                    <input id="filter-2" type="text" class="fill"
                        placeholder=" Version search">
                </td>
                <td>
                    <input id="filter-3" type="text" class="fill"
                        placeholder=" Platform search">
                </td>
                <td>
                    <input id="filter-4" type="text" class="fill"
                        placeholder=" Engine version search">
                </td>
                <td>
                    <input id="filter-5" type="text" class="fill"
                        placeholder=" CSS grade search">
                </td>
            </tr>
        </tfoot>
    </table>
</div>

{% endblock %}

{% block server-side-extra-script %}
    {% js "js/eztables.server.custom.js" %}
{% endblock %}
