{% extends "core/base.html"%}
{% load static %}

{% block styles %}
<link href="{% static 'ajax_datatable/css/style.css' %}" rel="stylesheet" />
<link rel='stylesheet' href="{% static 'core/dist/css/dataTables.bootstrap4.min.css' %}">
<link rel='stylesheet' href="{% static 'core/dist/css/buttons.bootstrap.min.css' %}">
<link rel='stylesheet' href="{% static 'core/dist/css/leaflet.css' %}">
{% endblock %}

{% block content %}
<div class="card">
    <div class="card-header">
        <h3 class="card-title">List of Vessels</h3>
        <div class="card-tools">
            <ul class="pagination pagination-sm float-right">
                <a href="{% url "core:admin_vessels_create" %}" class="btn btn-success"><i class="fas fa-plus"></i> New
                    Vessel</a>
            </ul>
        </div>
    </div>
    <div class="card-body">
        <div class="table-responsive">
            <table id="datatable_vessels" width="100%"
                class="table table-striped table-bordered dt-responsive compact nowrap">
            </table>
        </div>
    </div>
</div>

<div class="modal fade" id="locationModal" tabindex="-1" role="dialog" aria-labelledby="locationModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="locationModalLabel"></h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="{% static 'ajax_datatable/js/utils.js' %}"></script>

<script src="{% static 'core/dist/js/jquery.dataTables.min.js' %}"></script>
<script src="{% static 'core/dist/js/dataTables.bootstrap4.min.js' %}"></script>
<script src="{% static 'core/dist/js/dataTables.buttons.min.js' %}"></script>
<script src="{% static 'core/dist/js/buttons.print.min.js' %}"></script>
<script src="{% static 'core/dist/js/buttons.html5.min.js' %}"></script>
<script src="{% static 'core/dist/js/buttons.bootstrap.min.js' %}"></script>
<script src="{% static 'core/dist/js/jszip.min.js' %}"></script>
<script src="{% static 'core/dist/js/pdfmake.min.js' %}"></script>
<script src="{% static 'core/dist/js/vfs_fonts.js' %}"></script>

<script src="{% static 'core/dist/js/leaflet.js' %}"></script>

<script type="text/javascript" src="{% static 'core/js/admin/vessels_datatable.js' %}"></script>
{% endblock %}