{% extends "base.html" %}

{% block js %}
<script src="{{ url_for('static', path='/js/jquery-3.7.0.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/colReorder.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/dataTables.searchPanes.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/dataTables.colReorder.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/dataTables.stateRestore.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/responsive.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/dataTables.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/fixedHeader.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/searchBuilder.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/dataTables.fixedHeader.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/searchPanes.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/dataTables.responsive.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/stateRestore.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/dataTables.searchBuilder.min.js') }}"></script>
<script src="{{ url_for('static', path='/js/jquery.dataTables.min.js') }}"></script>
{% endblock js %}

{% block css %}
<link href="{{ url_for('static', path='/css/datatables.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/css/colReorder.datatables.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/css/dataTables.datatables.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/css/fixedHeader.datatables.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/css/jquery.datatables.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/css/responsive.datatables.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/css/colReorder.datatables.min.css') }}" rel="stylesheet">
<link href="{{ url_for('static', path='/css/stateRestore.datatables.min.css') }}" rel="stylesheet">
{% endblock css %}

{% block content %}
<div class="columns">
    <div class="column col-12">
        <h1>Browse Ghosts</h1>
    </div>
</div>
<div class="columns">
    <div class="column col-12">
        <table id="ghosts-table">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>First</th>
                    <th>Middle</th>
                    <th>Last</th>
                    <th>Birthdate</th>
                    <th>Owner</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>
{% endblock content %}

{% block bottomjs %}
<script>
    $(document).ready(function () {
        $('#ghosts-table').DataTable({
            "processing": true,
            "serverSide": true,
            "ajax": {
                "url": "/ghosts",
                "type": "POST",
                "dataType": "json"
            },
            "columns": [
                {
                    "data": "Ghost.id",
                    "render": function (data, type, row, meta) {
                        return '<a href="/ghosts/' + data + '">' + data + '</a>';
                    }
                },
                { "data": "Ghost.first_name" },
                { "data": "Ghost.middle_name" },
                { "data": "Ghost.last_name" },
                {
                    "data": "Ghost.birthdate",
                    "render": function (data, type, row, meta) {
                        var date = new Date(data);
                        var day = date.getDate().toString().padStart(2, '0');
                        var month = (date.getMonth() + 1).toString().padStart(2, '0');
                        var year = date.getFullYear().toString();
                        return month + '/' + day + '/' + year;
                    }
                },
                { "data": "owner_email" },
            ]
        });
    });
</script>
{% endblock bottomjs %}