{% extends 'bootstrap/base.html' %}

{% block title %}
    {% if title %}{{ title }} - {{ application }}{% else %}{{ application }}{% endif %}
{% endblock %}

{% block styles %}
{{super()}}
<link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.datatables.net/responsive/2.2.7/css/responsive.bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="{{ url_for('static', filename='app.css') }}" rel=stylesheet type=text/css />
{% endblock %}

{% block navbar %}
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="{{ url_for('app.index') }}">{{ application }}</a>
            </div>
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                {% if current_user.is_anonymous %}
                    <ul class="nav navbar-nav navbar-right">
                        <li><a href="{{ url_for('app.login') }}">Login</a></li>
                    </ul>
                {% else %}
                    <ul class="nav navbar-nav navbar-right">
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                            <span class="glyphicon glyphicon-cog"></span>
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">{{ current_user.name }}</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="{{ url_for('app.users') }}""><span class="glyphicon glyphicon-user submenu"></span> &nbsp; Users</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="/api/docs"><span class="glyphicon glyphicon-book submenu"></span> &nbsp; API Docs</a></li>
                        </ul>
                    </li>
                         <li><a href="{{ url_for('app.logout') }}">Logout</a></li>
                    </ul>
                {% endif %}
            </div>
        </div>
    </nav>

    <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title"><span class="glyphicon glyphicon-trash submenu"></span>&nbsp; &nbsp; Confirm Delete</h4>
                </div>
                <div class="modal-body">
                    <p>Are you sure?</p>
                    <p id="confirm-delete-message"></p>
                    <input id="delete-form-id" type="hidden" value="">
                    <input id="delete-form-action" type="hidden" value="">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                    <button id="confirm-delete-button" type="button" class="btn btn-primary" data-dismiss="modal">Delete</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}


{% block content %}
    <div class="container">
        <br>
        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            <!-- Categories: success (green), info (blue), warning (yellow), danger (red) -->
            {% for category, message in messages %}
            <div align="center">
                <span class="flash-message">
                    <span class="glyphicon glyphicon-flash submenu"></span>
                    {{ message }}
                </span>
                <br>
            </div>
            {% endfor %}
        {% else %}
            <div align="center">
                <span class="flash-message"></span>
                <br>
            </div>
        {% endif %}
        {% endwith %}

        {# application content needs to be provided in the app_content block #}
        {% block app_content %}{% endblock %}
    </div>
{% endblock %}

{% block scripts %}
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.7/js/responsive.bootstrap.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    setTimeout(function() {
        $(".flash-message").fadeOut("slow");
    }, 2000); // <-- time in milliseconds
});

$("#confirm-delete").on("show.bs.modal", function(e) {
    $(this).find("#confirm-delete-message").html($(e.relatedTarget).data("message"));
    $(this).find("#delete-form-id").attr("value", $(e.relatedTarget).data("form-id"));
    $(this).find("#delete-form-action").attr("value", $(e.relatedTarget).data("href"));
});

$("#confirm-delete-button").click(function(e){
    $($("#delete-form-id").attr("value")).find("#delete").attr("type", "submit");
    $($("#delete-form-id").attr("value")).attr("action", $("#delete-form-action").attr("value"));
    $("#delete").click();
});
</script>
{% endblock %}