{% extends "base.html" %}
{% load i18n %}
{% load compress %}
{% load avatar_tags %}

{% block title %}{% trans "Book Overview" %}{% endblock %}
{% block extraheaders %}
    {% compress css %}
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/fw-modules/add-remove-dialog.css" />
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/access-rights-dialog.css" />
        <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/book.css" />


    {% endcompress %}

    <!-- jQuery tablesorter -->
    <script type="text/javascript" src="{{ DATATABLES_URL }}"></script>
    <!-- Dropkick JS -->
    <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/libs/dropkick.css" />
    <link type="text/css" rel="stylesheet" href="{{ STATIC_URL }}css/fw-modules/dropkick.css" />
    <script type="text/javascript" src="{{ STATIC_URL }}js/libs/dropkick.min.js"></script>

    {% compress js %}
        <script type="text/javascript">
            var staticUrl = '{{ STATIC_URL }}';
        </script>
    {% endcompress %}

    <!-- File export functions -->
    <script type="text/javascript" src="{{ STATIC_URL }}js/booklist.es5.js"></script>

{% endblock %}

{% block contents %}
    <ul class="fw-book-menu">
        <li class="fw-document-menu-item">
            <div id="action-selection" class="fw-button fw-light fw-large">
                <input type="checkbox" id="select-all-entry" />
                <span id="select-action-dropdown-books" class="icon-down-dir"></span>
            </div>
            <div id="action-selection-pulldown-books" class="fw-pulldown fw-left">
                <ul>
                    <li>
                        <span class="fw-pulldown-item" data-action="delete">
                            {% trans "Delete selected" %}
                        </span>
                    </li>
                    <li>
                        <span class="fw-pulldown-item" data-action="share">
                            {% trans "Share selected" %}
                        </span>
                    </li>
                    <li>
                        <span class="fw-pulldown-item" data-action="copy">
                            {% trans "Copy selected" %}
                        </span>
                    </li>
                    <li>
                        <span class="fw-pulldown-item" data-action="epub">
                            {% trans "Export selected as Epub" %}
                        </span>
                    </li>
                    <li>
                        <span class="fw-pulldown-item" data-action="html">
                            {% trans "Export selected as HTML" %}
                        </span>
                    </li>
                    <li>
                        <span class="fw-pulldown-item" data-action="latex">
                            {% trans "Export selected as LaTeX" %}
                        </span>
                    </li>
                    <li>
                        <span class="fw-pulldown-item" data-action="print">
                            {% trans "Export selected for Print/PDF" %}
                        </span>
                    </li>
                </ul>
            </div>
        </li>
        <li class="fw-document-menu-item">
            <button class="create-new-book fw-button fw-light fw-large">
                {% trans "Create New Book" %}
                <span class="icon-plus-circle"></span>
            </button>
        </li>
    <!--  <li class="fw-document-menu-item">
            <button class="import-fidus fw-button fw-light fw-large">
                {% trans "Upload Fidus Book" %}
                <span class="icon-download"></span>
            </button>
        </li> -->
    </ul>
    <div class="fw-table-wrapper">
        <table id="book-table" class="tablesorter fw-document-table">
            <thead class="fw-document-table-header">
                <tr>
                    <td width="20"></td>
                    <th width="225">{% trans "Title" %}</th>
                    <th width="115">{% trans "Created" %}</th>
                    <th width="115">{% trans "Last changed" %}</th>
                    <th width="170">{% trans "Owner" %}</th>
                    <td width="60" align="center">{% trans "Rights" %}</td>
                    <td width="40" align="center">{% trans "Delete" %}</td>
                </tr>
            </thead>
            <tbody class="fw-document-table-body fw-large">
            </tbody>
        </table>
    </div>
{% endblock %}