<!doctype html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>EMHUB Alpha version (dev)</title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap/css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/fonts/circular-std/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='libs/css/style.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='libs/css/emhub.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/fonts/fontawesome/css/fontawesome-all.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/vector-map/jqvmap.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/jvectormap/jquery-jvectormap-2.0.2.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/charts/chartist-bundle/chartist.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/charts/c3charts/c3.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/charts/morris-bundle/morris.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/daterangepicker/daterangepicker.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/datatables/css/dataTables.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/datatables/css/buttons.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/datatables/css/select.bootstrap4.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/datatables/css/fixedHeader.bootstrap4.css') }}">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='vendor/daterangepicker/daterangepicker.css') }}">

    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/full-calendar/packages/core/main.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/full-calendar/packages/daygrid/main.min.css') }}">
    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/full-calendar/packages/timegrid/main.min.css') }}">

    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/bootstrap-select/css/bootstrap-select.css') }}">

    <link rel="stylesheet" href="{{ url_for('static', filename='vendor/datepicker/tempusdominus-bootstrap-4.css') }}">

    <link rel="shortcut icon" href="{{ url_for('static', filename='images/emhub.ico') }}">

</head>

<body>
<!-- main wrapper -->
<div class="dashboard-main-wrapper">

    {% include 'main_topbar.html' %}

    {% include 'main_left_sidebar.html' %}

    <div class="dashboard-wrapper">
        <div class="container-fluid dashboard-content" id="main-content">
        </div>
        <!-- footer -->
        <div class="footer">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                        Copyright © 2018 Concept. All rights reserved. Dashboard by <a href="https://colorlib.com/wp/">Colorlib</a>.
                    </div>
                    <div class="col-xl-6 col-lg-6 col-md-12 col-sm-12 col-12">
                        <div class="text-md-right footer-links d-none d-sm-block">
                            <a href="javascript: void(0);">About</a>
                            <a href="javascript: void(0);">Support</a>
                            <a href="javascript: void(0);">Contact Us</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- end footer -->
    </div>

    <!-- ============================================================== -->
    <!-- User Modal -->
    <!-- ============================================================== -->
    <div class="modal fade" id="user-modal" tabindex="-1" role="dialog" aria-labelledby="userModal" aria-hidden="true">
    </div>

</div>
<!-- end main wrapper -->

<!-- JavaScript libraries -->
<script src="{{ url_for('static', filename='vendor/jquery/jquery-3.3.1.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/bootstrap/js/bootstrap.bundle.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/slimscroll/jquery.slimscroll.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/bootstrap-select/js/bootstrap-select.js') }}"></script>

<script src="{{ url_for('static', filename='vendor/full-calendar/packages/core/main.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/full-calendar/packages/daygrid/main.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/full-calendar/packages/timegrid/main.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/full-calendar/packages/interaction/main.min.js') }}"></script>


<script src="{{ url_for('static', filename='libs/js/main-js.js') }}"></script>

<!-- chart chartist js -->
<script src="{{ url_for('static', filename='vendor/charts/chartist-bundle/chartist.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/charts/chartist-bundle/chartist-plugin-threshold.js') }}"></script>
<!-- chart C3 js -->
<script src="{{ url_for('static', filename='vendor/charts/c3charts/c3.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/charts/c3charts/d3-5.4.0.min.js') }}"></script>
<!-- chartjs js -->
<script src="{{ url_for('static', filename='vendor/charts/charts-bundle/Chart.bundle.js') }}"></script>
<!-- sparkline js -->
<script src="{{ url_for('static', filename='vendor/charts/sparkline/jquery.sparkline.js') }}"></script>
<!-- gauge js -->
<script src="{{ url_for('static', filename='vendor/gauge/gauge.min.js') }}"></script>
<!-- morris js -->
<script src="{{ url_for('static', filename='vendor/charts/morris-bundle/raphael.min.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/charts/morris-bundle/morris.js') }}"></script>

<!-- parsley -->
<script src="{{ url_for('static', filename='vendor/parsley/parsley.js') }}"></script>

<!-- datepicker -->
<script src="{{ url_for('static', filename='vendor/datepicker/datepicker.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/datepicker/moment.js') }}"></script>
<script src="{{ url_for('static', filename='vendor/datepicker/tempusdominus-bootstrap-4.js') }}"></script>

<!-- emhub -->
<script src="{{ url_for('static', filename='libs/js/emhub.js') }}"></script>


<script type="text/javascript">
    /**
     * Make an AJAX request to the server and render the html result in a container.
     * @param container_id The HTML container id where the result content will be placed.
     * @param content_id contend id that will be requested to the server
     * @param params dictionary with extra parameters to retrieve the content.
     */
    function get_ajax_content(content_id, params) {
        console.log("requesting content: " + content_id);

        if (params == null)
            params = {content_id: content_id};
        else
            params.content_id = content_id;

        var ajaxContent = $.ajax({
            url: "{{ url_for('get_content') }}",
            type: "POST",
            data: params,
            dataType: "html"
        });

        return ajaxContent;
    }

    function load_main_content(content_id, params) {
        ajaxContent = get_ajax_content(content_id, params);

        ajaxContent.done(function(html) {
            $("#main-content").html(html);
        });

        ajaxContent.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    }

    function load_content_fromlink(e) {
        var content_id = e.currentTarget.dataset.contentId;
        load_main_content(content_id);
        e.preventDefault();
    }

    $(document).ready(function(){
        $('.nav-link-ajax').each(function(){
            console.log('data-content-id: ', $(this).data('content-id'));
            $(this).click(load_content_fromlink);
        });

        load_main_content("{{ content_id }}");
    });

    /* Show the User Form */
    function showUser(userId) {
        ajaxContent = get_ajax_content("user_form", {user_id: userId});

        ajaxContent.done(function(html) {
            $("#user-modal").html(html);
            // Show the form after setting html content
            $('#user-modal').modal('show');
        });

        ajaxContent.fail(function(jqXHR, textStatus) {
            alert( "Request failed: " + textStatus );
        });
    }  // function showUser


</script>
<script src="{{ url_for('static', filename='vendor/multi-select/js/jquery.multi-select.js') }}"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="{{ url_for('static', filename='vendor/datatables/js/dataTables.bootstrap4.min.js') }}"></script>

<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="{{ url_for('static', filename='vendor/datatables/js/buttons.bootstrap4.min.js') }}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script src="https://cdn.datatables.net/rowgroup/1.0.4/js/dataTables.rowGroup.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/fixedheader/3.1.5/js/dataTables.fixedHeader.min.js"></script>
<script src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>


</body>
</html>