{# template to be used to view the events planning wheel #}

{% extends 'base.html.twig' %}

{% block title %}
    OceanExpert - A Directory of Marine and Freshwater Professionals
{% endblock %}

{% block stylesheets %}
    <link
            rel="stylesheet"
            type="text/css"
            href="{{ asset('css/font-awesome.min.css') }}"
            xmlns="http://www.w3.org/1999/html" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/navbar-login.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap3-wysihtml5.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/jquery-ui.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/style.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-datepicker.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/events.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap-dialog.min.css') }}"/>
    <link rel="stylesheet" type="text/css" href="{{ asset('css/planningWheel.css') }}" />
    <style media="screen"> </style>
{% endblock %}

{% block body %}
    {% include 'navbarlogin.html.twig' %}

    <div
            class="container-fluid"
            style="height: 100vh; display: flex; flex-direction: column;">
        <div class="row flex-grow-1">
            <canvas
                    id="planningWheel"
                    style="flex-grow: 1;">

            </canvas>
            <div id="tooltip">
            </div>
            <div id="modal">
                <button
                        id="modalClose"
                        type="button"
                        class="close btn">
                    Close
                </button><br />
                <ul id="modalContent"></ul>
            </div>
        </div>
    </div>

    {% include 'footer.html.twig' %}
    <script
            src="{{ asset('js/planningWheel.js') }}"
            type="text/javascript">
    </script>
    <script type="text/javascript">
        $(document).ready(function() {
            new PlanningWheel('planningWheel', '{{ events|raw }}');
        });
    </script>
{% endblock %}