{% extends '_main.html' %}

{% block title %}History (Series) - Bazarr{% endblock %}

{% block bcleft %}
    <div class="d-flex">
        <button class="btn btn-outline">
            <i class="fas fa-sync align-top text-themecolor text-center" aria-hidden="true"></i>
            <span class="align-bottom">Update</span>
        </button>
    </div>
{% endblock bcleft %}

{% block bcright %}
    <div class="d-flex m-t-5 justify-content-end">
        <h5 class="m-t-0 text-themecolor">Some page settings</h5>
    </div>
{% endblock bcright %}

{% block body %}
    <table id="history_movies" class="table table-striped" style="width:100%">
        <thead>
        <tr>
            <th>action</th>
            <th>title</th>
            <th>timestamp</th>
            <th>description</th>
        </tr>
        </thead>
    </table>
{% endblock body %}

{% block tail %}
    <script>
        $(document).ready(function () {
            var table = $('#history_movies').DataTable({
                "dom":"<'row'<'col-sm-12'tr>>" +
                    "<'row'<'col-sm-5'i><'col-sm-7'p>>",
                "processing": false,
                "serverSide": true,
                "searching": false,
                "ordering": false,
                "responsive": true,
                "lengthChange": true,
                "pageLength": {{ settings.general.page_size }},
                "ajax": "{{ url_for('api.historymovies') }}",
                "columns": [
                    {"data": "action"},
                    {"data": "title"},
                    {"data": "timestamp"},
                    {"data": "description"}
                ]
            });
        });
    </script>
{% endblock tail %}