{% 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/ionicons.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/square/blue.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/bootstrap.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select2-bootstrap.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/AdminLTE.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.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/checkbox.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/profile.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/nestable.modified.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/select.dataTables.min.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/dataTables.bootstrap.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/dropzone.css') }}" />
    <link rel="stylesheet" type="text/css" href="{{ asset('css/tipped.css') }}" />
    <style media="screen"> </style>
{% endblock %}

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

    <!-- JSON-LD will be used for SEO and OIH -->
    <script type="application/ld+json">
        {{ data.OIHData | raw }}
    </script>
    <div class="container-fluid">
        <section class="content">
            <div class="row">
                <div class="col-md-3">
                    <!-- Profile Image -->
                    <div class="box box-primary">
                        <div class="box-body box-profile">
                            <div class="text-center">
                                <i class="fa fa-calendar fa-4x" aria-hidden="true"></i>
                                <h2 class="event-title">
                                    {% if data.event.details.title is defined %}
                                        {{ data.event.details.title }}
                                    {% endif %}
                                    {% if data.event.details.shorttitle is defined %}
                                        <br />
                                        <small>{{ data.event.details.shorttitle }}</small>
                                    {% endif %}
                                </h2>
                                {% if data.event.type.eventtypeName is defined  %}
                                    <h4><span class="label label-primary">{{ data.event.type.eventtypeName }}</span></h4>
                                {% endif %}
                                {% if data.event.details.startOn is defined and data.event.details.endOn is defined %}
                                    <h3 class="profile-username">
                                        {% if data.event.details.startOn|date("m") != data.event.details.endOn|date("m") %}
                                            {% if data.event.details.startOn|date("Y") != data.event.details.endOn|date("Y")  %}
                                                {{ data.event.details.startOn|date("d F Y") ~ ' - ' ~ data.event.details.endOn|date("d F Y") }}
                                            {% else %}
                                                {{ data.event.details.startOn|date("d F") ~ ' - ' ~ data.event.details.endOn|date("d F Y") }}
                                            {% endif %}
                                        {% elseif data.event.details.startOn == data.event.details.endOn %}
                                            {{ data.event.details.startOn | date("d F Y") }}
                                        {% else %}
                                            {{ data.event.details.startOn | date("d") ~ ' - ' ~ data.event.details.endOn | date("d F Y") }}
                                        {% endif %}

                                    </h3>
                                {% endif %}
                                {% if data.user is defined and data.user.canEditEvent == 1 %}
                                    <p class="lead text-center print">
                                        {% if app.user is defined and is_granted('ROLE_GLOBAL_EDITOR') %}
                                            {% if data.event.details.status == 0 %}
                                                <button
                                                        class="btn btn-success eventAction"
                                                        data-status="1">
                                                    <i class="fa fa-check fa-fw" aria-hidden="true"></i>
                                                    Activate
                                                </button>
                                            {% elseif data.event.details.status == 1 %}
                                                <button
                                                        class="btn btn-danger eventAction"
                                                        data-status="0">
                                                    <i class="fa fa-ban fa-fw" aria-hidden="true"></i>
                                                    Deactivate
                                                </button>
                                            {% elseif data.event.details.status == 2 %}
                                                <button
                                                        class="btn btn-warning eventAction"
                                                        data-status="2">
                                                    <i class="fa fa-times fa-fw" aria-hidden="true"></i>
                                                    Delete
                                                </button>
                                            {% elseif data.event.details.status == 3 %}
                                                <button
                                                        class="btn btn-success eventAction"
                                                        data-status="0">
                                                    <i class="fa fa-check fa-fw" aria-hidden="true"></i>
                                                    Undelete
                                                </button>
                                            {% endif %}
                                        {% endif %}
                                        <a
                                                href="{{ path('edit_event',{'idEvent': data.event.details.idEvent}) }}"
                                                class="btn btn-primary">
                                            <i class="fa fa-pencil fa-fw" aria-hidden="true"></i>
                                            Edit Event
                                        </a>
                                    </p>
                                {% endif %}
                                {% if data.error is defined and data.error|length > 0 %}
                                <p class="btn-danger text-center ">
                                    <i class="fa fa-warning" aria-hidden="true"></i> {{ data.error }}
                                </p>
                                {% endif %}
                            </div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->

                    <!-- About Me Box -->
                    <div class="box box-primary">
                        <div class="box-body">
                            <strong><i class="fa fa-map-marker fa-fw"></i> Location</strong>
                            <p class="text-muted">
                                <address>
                                {% if data.event.details.idCountry == "0"  and data.event.details.useInstAddr == "0" %}
                                    no location/online event
                                {% elseif data.event.details.address is defined and data.event.details.address | trim | length > 0  %}
                                    {{ data.event.details.address | raw }}<br />
                                {% endif %}
                                </address>
                            <hr />
                            <strong>
                                <i class="fa fa-users fa-fw"></i>
                                Organiser(s) & Staff
                            </strong>
                            <div class="left-text">
                                {% if data.event.people.organisers is defined and data.event.people.organisers | length > 0  %}
                                    <div class="staff-type">Organiser</div>
                                    <ul class="staff-list">
                                        {% for organiser in data.event.people.organisers %}
                                            <li>
                                                <a
                                                        href="{{ path('view_profile', {'user': organiser.id}) }}">
                                                    {{ organiser.title ~ ' ' ~ organiser.fname ~ ' ' ~ organiser.sname | upper }}
                                                </a>
                                            </li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                                {% if data.event.people.staff is defined and data.event.people.staff | length > 0  %}
                                    <div class="staff-type">Staff</div>
                                    <ul class="staff-list">
                                        {% for staff in data.event.people.staff %}
                                            <li><a href="{{ path('view_profile', {'user': staff.id}) }}">{{ staff.title ~ ' ' ~ staff.fname ~ ' ' ~ staff.sname | upper }}</a></li>
                                        {% endfor %}
                                    </ul>
                                {% endif %}
                            </div>
                            <hr>
                            <strong><i class="fa fa-hand-o-up fa-fw" aria-hidden="true"></i> Participation</strong>
                            {% if data.event.details.isOpen == 0 %}
                            {% elseif data.event.details.isOpen == 1 %}
                                <p class="left-text">Open attendance.</p>
                            {% elseif data.event.details.isOpen == 2 %}
                                <p class="left-text">By invitation only.</p>
                            {% elseif data.event.details.isOpen == 3 %}
                                <p class="left-text">Attendance by application.</p>
                            {% endif %}

                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->

                <div class="col-md-9">
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li
                                    class="active">
                                <a
                                        href="#overview"
                                        data-toggle="tab"
                                        aria-expanded="false">
                                    Overview
                                </a>
                            </li>
                            {% if data.event.agenda is defined and data.event.agenda is not null %}
                                <li class="">
                                    <a
                                            href="#agenda"
                                            data-toggle="tab"
                                            aria-expanded="true">
                                        Agenda
                                    </a>
                                </li>
                            {% endif %}
                            {% if data.event.report | length + data.event.eventPresentations | length + data.event.agendaDocuments | length + data.event.backgroundDocs | length + data.event.otherDocs | length >0  %}
                                <li class="">
                                    <a
                                            href="#documents"
                                            data-toggle="tab"
                                            aria-expanded="false">
                                        Documents
                                    </a>
                                </li>
                            {% endif %}
                            {% if data.event.people.participants | length > 0 %}
                                <li class="">
                                    <a
                                            href="#participants"
                                            data-toggle="tab"
                                            aria-expanded="false">
                                        Participants
                                    </a>
                                </li>
                            {% endif %}
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="overview">
                                <div class="box-header with-border">
                                    <span class="event-heading">
                                        {% if data.event.details.title is defined %}
                                            {{ data.event.details.title }}
                                        {% endif %}
                                    </span>
                                    {% if data.event.details.regOnline == 1 %}
                                        {#
                                            see : #561
                                            % if "now"|date('Y-m-d') < data.event.details.startOn|date('Y-m-d') %
                                        #}
                                        {% if "now"|date('Y-m-d') < data.event.details.endOn|date('Y-m-d') %}
                                            <div class="register-event">
                                                <a
                                                        href="{{ path('register_event',{idEvent:data.event.details.idEvent }) }}" >
                                                    Register to participate in this event
                                                </a>
                                                {% if not is_granted('ROLE_USER') %}
                                                    (you must <a
                                                            href="/login">
                                                        log in
                                                    </a>, with an activated account, first!)
                                                {% endif %}
                                            </div>
                                        {% endif %}
                                    {% endif %}
                                </div>
                                {% if data.event.eventImage != null %}
                                    <div class="box-header with-border">
                                        <img src="{{ asset(data.event.eventImage.path ~ data.event.eventImage.filename) }}" class="img-responsive" alt="Image">
                                    </div>
                                {% endif %}
                                {% if data.event.details.summary is defined and data.event.details.summary != "" %}
                                    <div class="box-header with-border">
                                        <strong>Summary</strong>
                                        <p class="justify">
                                            {{ data.event.details.summary | raw}}
                                        </p>
                                    </div>

                                {% endif %}

                                {% if data.event.details.notes is defined and data.event.details.notes|trim  != "" %}
                                    <div class="box-header with-border">
                                        <strong>Notes</strong>
                                        <p class="justify">
                                            {{ data.event.details.notes| raw }}
                                        </p>
                                    </div>
                                {% endif %}

                                {% if data.event.details.website is defined and data.event.details.website != "" %}
                                    <div class="box-header with-border">
                                        <strong>Website: </strong><span class="event-website">
                                        {% if data.event.details.website starts with 'http'  %}
                                            <a
                                                    href="{{ data.event.details.website }}"
                                                    target="_blank">
                                                {{ data.event.details.website }}
                                            </a>
                                        {% else %}
                                            <a
                                                    href="http://{{ data.event.details.website }}"
                                                    target="_blank">
                                                http://{{ data.event.details.website }}
                                            </a>
                                        {% endif %}
                                        </span>
                                    </div>
                                {% endif %}

                                {% if data.event.people.participants
                                    | length > 0 or data.event.report
                                    | length + data.event.eventPresentations
                                    | length + data.event.agendaDocuments
                                    | length + data.event.backgroundDocs
                                    | length + data.event.otherDocs
                                    | length >0 %}
                                    <div class="box-header with-border">
                                        <div class="row">
                                            {% if data.event.people.participants | length > 0 %}
                                                <div class="col-sm-4 col-xs-12">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <img alt="user icon" src="{{ asset('assets/uploads/user.png') }}" class="icons">
                                                        </div>
                                                        <div class="media-body">
                                                            {% if data.event.people.numberOfParticipants > 0  %}
                                                                <div class="participants"><a href="javascript:void(0)" data-id="participants" class="navigate">{{ data.event.people.numberOfParticipants }} Participants</a></div>
                                                            {% endif %}
                                                            {% if (data.event.people.numberOfProvisional + data.event.people.numberOfUnapproved) > 0  %}
                                                                <div class="participants"><a href="javascript:void(0)" data-id="participants" class="navigate">{{ data.event.people.numberOfProvisional + data.event.people.numberOfUnapproved }} Provisional</a></div>
                                                            {% endif %}
                                                            <div class="pull-right"><a href="javascript:void(0)" data-id="participants" class="navigate">More...</a></div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}

                                            {% if data.event.people.participants | length > 0 %}
                                                <div class="col-sm-4 col-xs-12">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <img
                                                                    alt="report icon"
                                                                    src="{{ asset('assets/uploads/report.png') }}"
                                                                    class="icons" />
                                                        </div>
                                                        <div class="media-body">
                                                            <a
                                                                    href="javascript:void(0)"
                                                                    data-id="participants"
                                                                    class="navigate">
                                                                View detailed participants list
                                                            </a><br />
                                                            <a
                                                                    href="{{ path('view_printable_participants',{idEvent: data.event.details.idEvent}) }}">
                                                                View a printable participants list
                                                            </a><br />
                                                            <div class="pull-right">
                                                                <a
                                                                        href="javascript:void(0)"
                                                                        data-id="participants"
                                                                        class="navigate">
                                                                    More...
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}

                                            {% if data.event.report
                                                | length + data.event.eventPresentations
                                                | length + data.event.agendaDocuments
                                                | length + data.event.backgroundDocs
                                                | length + data.event.otherDocs
                                                | length >0  %}
                                                <div class="col-sm-4 col-xs-12">
                                                    <div class="media">
                                                        <div class="media-left">
                                                            <img
                                                                    alt="document icon"
                                                                    src="{{ asset('assets/uploads/documents.png') }}"
                                                                    class="icons" />
                                                        </div>

                                                        <div class="media-body">
                                                            {% if data.event.report is not null and data.event.report | length > 0 %}
                                                                <a
                                                                        href="javascript:void(0)"
                                                                        data-id="documents"
                                                                        class="navigate">
                                                                    Final R
                                                                    eport</a><br />
                                                            {% endif %}
                                                            {% if data.event.eventPresentations is not null and data.event.eventPresentations | length >0 %}
                                                                Presentations: <a
                                                                    href="javascript:void(0)"
                                                                    data-id="documents"
                                                                    class="navigate">
                                                                {{ data.event.eventPresentations | length }}
                                                                </a><br />
                                                            {% endif %}
                                                            {% if data.event.agendaDocuments is not null and data.event.agendaDocuments | length >0 %}
                                                                Agenda Documents: <a
                                                                    href="javascript:void(0)"
                                                                    data-id="documents"
                                                                    class="navigate">
                                                                {{ data.event.agendaDocuments | length }}
                                                                </a><br />
                                                            {% endif %}
                                                            {% if data.event.backgroundDocs is not null and data.event.backgroundDocs | length >0 %}
                                                                Background Documents: <a
                                                                    href="javascript:void(0)"
                                                                    data-id="documents"
                                                                    class="navigate">
                                                                {{ data.event.backgroundDocs | length }}
                                                                </a><br />
                                                            {% endif %}
                                                            {% if data.event.otherDocs is not null and data.event.otherDocs | length >0 %}
                                                                Other Documents: <a
                                                                    href="javascript:void(0)"
                                                                    data-id="documents"
                                                                    class="navigate">
                                                                {{ data.event.otherDocs | length }}
                                                                </a><br />
                                                            {% endif %}
                                                            <div class="pull-right">
                                                                <a
                                                                        href="javascript:void(0)"
                                                                        data-id="documents"
                                                                        class="navigate">
                                                                    More...
                                                                </a>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            {% endif %}
                                        </div>
                                        {% if data.user is defined and data.user.canSendEmail == 1 and data.event.people.participants | length > 0 %}
                                            <div
                                                    class="mail-btn">
                                                <button
                                                        href="#compose-mail"
                                                        data-toggle="modal"
                                                        {% if data.event.details.status == 1 %}
                                                        class="btn btn-primary"
                                                        {% else %}
                                                        class="btn btn-red"
                                                        {% endif %}
                                                        id="compose"
                                                        style="">
                                                    <i class="fa fa-envelope-o fa-fw"></i>
                                                    Send an email to all confirmed participants of this event.
                                                </button>
                                            </div>
                                        {% endif %}
                                        <br/>
                                        {% if is_granted('ROLE_USER') %}
                                        <a
                                                href="{{ path('download_event_participants_info',{idEvent: data.event.details.idEvent}) }}"
                                                target="_blank">
                                            <button
                                                    class="btn btn-primary"
                                                    id="export"
                                                    style="display: block;">
                                                <i class="fa fa-download fa-fw"></i>
                                                Export participants info as CSV
                                            </button>
                                        </a>
                                        {% endif %}
                                    </div>
                                {% endif %}
                            </div>
                            <!-- /.tab-pane -->
                            <div class="tab-pane" id="agenda">
                                <div class="printable-links">
                                    <a
                                            href="{{ path('view_agenda_printable',{idEvent: data.event.details.idEvent}) }}">
                                        [View a simple printable version of this agenda]
                                    </a><br />
                                    <a
                                            href="{{ path('view_annonated_agenda_printable',{idEvent: data.event.details.idEvent}) }}">
                                        [View an annotated printable version of this agenda]
                                    </a>
                                </div>

                                <div
                                        class="btn-group"
                                        role="group"
                                        id="nestable-menu">
                                    <button
                                            type="button"
                                            class="btn btn-default"
                                            data-action="expand-all">
                                        Expand All
                                    </button>
                                    <button
                                            type="button"
                                            class="btn btn-default"
                                            data-action="collapse-all">
                                        Collapse All
                                    </button>
                                </div>
                                <div class="dd dd-nodrag" id="nestable">
                                    <ul class="dd-list dd-nodrag"></ul>
                                </div>
                            </div>
                            <!-- /.tab-pane -->

                            <div class="tab-pane" id="documents">
                                {% if data.event.report|length >0 %}
                                    <div class="box-header with-border">
                                        <span class="event-heading">
                                            Report
                                        </span>
                                        <div class="box-body">
                                            <div class="box-body">
                                                <table
                                                        class="table table-striped table-bordered dataTable dt-responsive wrap"
                                                        style="width: 100%;">
                                                    <thead>
                                                    <tr>
                                                        <th class="all">Code</th>
                                                        <th>Name</th>
                                                        <th>Updated on</th>
                                                        <th class="all text-right">Action</th>
                                                    </tr>
                                                    </thead>
                                                    <tbody>
                                                    {% for document in data.event.report %}
                                                        <tr>
                                                            <td>{{ document.docCode }}</td>
                                                            <td>
                                                                <a
                                                                        href="/document/{{ document.idDoc }}"
                                                                        class="view-document"
                                                                        data-docid="{{ document.idDoc }}">
                                                                    {{ document.title }}
                                                                </a>
                                                            </td>
                                                            <td>{{ document.updatedAt|date("d/m/Y") }}</td>
                                                            <td>
                                                                <div class="btn-group pull-right">
                                                                    <i
                                                                            class="fa fa-download fa-2x download-document"
                                                                            aria-hidden="true"
                                                                            data-idDoc="{{ document.idDoc }}" >
                                                                    </i>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}

                                {% if data.event.eventPresentations|length >0 %}
                                    <div class="box-header with-border">
                                        <span class="event-heading">Presentation</span>
                                        <div class="box-body">

                                            <div class="box-body">
                                                <table
                                                        class="table table-striped table-bordered dataTable dt-responsive wrap col5"
                                                        style="width: 100%;">
                                                    {% for i in ['thead', 'tfoot'] %}
                                                    <{{ i }}>
                                                        <tr>
                                                            {#<th class="all">Select</th>#}
                                                            <th>Agenda</th>
                                                            <th class="all">Code</th>
                                                            <th>Name</th>
                                                            <th>Updated on</th>
                                                            <th class="all text-right">Action</th>
                                                        </tr>
                                                    </{{ i }}>
                                                    {% endfor %}
                                                    <tbody>
                                                    {% for document in data.event.eventPresentations %}
                                                        <tr>
                                                            <td>{{ document.idAgendaitem }}</td>
                                                            <td>{{ document.docCode }}</td>
                                                            <td>
                                                                <a
                                                                        href="/document/{{ document.idDoc }}"
                                                                        class="view-document"
                                                                        data-docid="{{ document.idDoc }}">
                                                                    {{ document.title }}
                                                                </a>
                                                            </td>
                                                            <td>{{ document.updatedAt|date("d/m/Y") }}</td>
                                                            <td>
                                                                <div class="btn-group pull-right">
                                                                    <i
                                                                            class="fa fa-download fa-2x download-document"
                                                                            aria-hidden="true"
                                                                            data-idDoc="{{ document.idDoc }}" >
                                                                    </i>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}

                                {% if data.event.agendaDocuments|length >0 %}
                                    <div class="box-header with-border">
                                        <span class="event-heading">Agenda Documents</span>
                                        <div class="box-body">
                                            <table
                                                    class="table table-striped table-bordered dataTable dt-responsive wrap col5"
                                                    style="width: 100%;" >
                                                {% for i in ['thead', 'tfoot'] %}
                                                <{{ i }}>
                                                <tr>
                                                    {#<th class="all">Select</th>#}
                                                    <th>Agenda</th>
                                                    <th class="all">Code</th>
                                                    <th>Name</th>
                                                    <th>Updated on</th>
                                                    <th class="all text-right">Action</th>
                                                </tr>
                                                </{{ i }}>
                                                {% endfor %}
                                                <tbody>
                                                {% for document in data.event.agendaDocuments %}
                                                    <tr>
                                                        <td>{{ document.idAgendaitem }}</td>
                                                        <td>{{ document.docCode }}</td>
                                                        <td>
                                                            <a
                                                                    href="/document/{{ document.idDoc }}"
                                                                    class="view-document"
                                                                    data-docid="{{ document.idDoc }}">
                                                                {{ document.title }}
                                                            </a>
                                                        </td>
                                                        <td>{{ document.updatedAt|date("d/m/y") }}</td>
                                                        <td>
                                                            <div class="btn-group pull-right">
                                                                <i
                                                                        class="fa fa-download fa-2x download-document"
                                                                        aria-hidden="true"
                                                                        data-idDoc="{{ document.idDoc }}" >
                                                                </i>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                {% endif %}

                                {% if data.event.backgroundDocs|length >0 %}
                                    <div class="box-header with-border">
                                        <span class="event-heading">Background Documents</span>
                                        <div class="box-body">
                                            <div class="box-body">
                                                <table
                                                        class="table table-striped table-bordered dataTable dt-responsive wrap col5"
                                                        style="width: 100%;">
                                                    {% for i in ['thead', 'tfoot'] %}
                                                    <{{ i }}>
                                                    <tr>
                                                        {#<th class="all">Select</th>#}
                                                        <th>Agenda</th>
                                                        <th class="all">Code</th>
                                                        <th>Name</th>
                                                        <th>Updated on</th>
                                                        <th class="all text-right">Action</th>
                                                    </tr>
                                                </{{ i }}>
                                                {% endfor %}
                                                <tbody>
                                                {% for document in data.event.backgroundDocs %}
                                                    <tr>
                                                        <td>{{ document.idAgendaitem }}</td>
                                                        <td>{{ document.docCode }}</td>
                                                        <td><a
                                                                    href="/document/{{ document.idDoc }}"
                                                                    class="view-document"
                                                                    data-docid="{{ document.idDoc }}">
                                                                {{ document.title }}
                                                            </a>
                                                        </td>
                                                        <td>{{ document.updatedAt|date("d/m/Y") }}</td>
                                                        <td>
                                                            <div class="btn-group pull-right">
                                                                <i
                                                                        class="fa fa-download fa-2x download-document"
                                                                        aria-hidden="true"
                                                                        data-idDoc="{{ document.idDoc }}" >
                                                                </i>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}

                                {% if data.event.otherDocs|length >0 %}
                                    <div class="box-header with-border">
                                        <span class="event-heading">Other Documents</span>
                                        <div class="box-body">
                                            <div class="box-body">
                                                <table
                                                        class="table table-striped table-bordered dataTable dt-responsive wrap col4"
                                                        style="width: 100%;">
                                                    {% for i in ['thead', 'tfoot'] %}
                                                    <{{ i }}>
                                                    <tr>
                                                        {#<th class="all">Select</th>#}
                                                        <th class="all">Code</th>
                                                        <th>Name</th>
                                                        <th>Updated on</th>
                                                        <th class="all text-right">Action</th>
                                                    </tr>
                                                </{{ i }}>
                                                {% endfor %}
                                                <tbody>
                                                {% for document in data.event.otherDocs %}
                                                    <tr>
                                                        <td>{{ document.docCode }}</td>
                                                        <td>
                                                            <a
                                                                    href="/document/{{ document.idDoc }}"
                                                                    class="view-document"
                                                                    data-docid="{{ document.idDoc }}">
                                                                {{ document.title }}
                                                            </a>
                                                        </td>
                                                        <td>{{ document.updatedAt|date("d/m/Y") }}</td>
                                                        <td>
                                                            <div class="btn-group pull-right">
                                                                <i
                                                                        class="fa fa-download fa-2x download-document"
                                                                        aria-hidden="true"
                                                                        data-idDoc="{{ document.idDoc }}" >
                                                                </i>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                {% endfor %}
                                                </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                {% endif %}
                            </div>
                            <!-- /.tab-pane -->

                            <div class="tab-pane" id="participants">
                                <p>
                                    {% set totalParticipants = data.event.people.numberOfParticipants %}
                                    {% set totalParticipants = totalParticipants + data.event.people.numberOfProvisional %}
                                    {% set totalParticipants =totalParticipants + data.event.people.numberOfUnapproved %}
                                    There
                                    {% if totalParticipants != 1 %}
                                        are
                                    {% else %}
                                        is
                                    {% endif %}
                                    {{ totalParticipants }}
                                        participant{% if totalParticipants != 1 %}s{% endif%}
                                    associated with <a
                                            href="{{ path('view_event',{ 'event': data.event.details.idEvent} )}}">
                                        {{ data.event.details.title }}
                                    </a>
                                    {% if data.event.people.numberOfProvisional > 0 %},
                                        {{ data.event.people.numberOfProvisional }} of whom
                                        {% if data.event.people.numberOfProvisional != 1 %}
                                            are
                                        {% else %}
                                            is
                                        {% endif %}
                                        provisional
                                    {% endif %}.
                                </p>
                                {% if is_granted('ROLE_USER') %}
                                <p>
                                    <a
                                            href="{{ path('view_printable_participants',{idEvent: data.event.details.idEvent}) }}">
                                        <button
                                                class="btn btn-primary"
                                                id="viewPrintableParticipants"
                                                style="display: block;">
                                            <i class="fa fa-eye fa-fw"></i>
                                            View a printable participants list
                                        </button>
                                    </a>
                                </p>
                                <p>
                                    <a
                                            href="{{ path('download_event_participants_info',{idEvent: data.event.details.idEvent}) }}"
                                            target="_blank">
                                        <button
                                                class="btn btn-primary"
                                                id="export"
                                                style="display: block;">
                                            <i class="fa fa-download fa-fw"></i>
                                            Export participants info as CSV
                                        </button>
                                    </a>
                                </p>
                                {% endif %}

                                {% if data.event.people.participantsByRole | length > 0 %}
                                    {% for role, participants in data.event.people.participantsByRole %}
                                        {% if participants | length > 0 %}
                                            <div class="box-header with-border">
                                                <span class="event-heading">{{ role }}</span>
                                                <div class="box-body">
                                                    <table
                                                            class="table table-striped table-bordered dataTable dt-responsive wrap
                                                         {% if app.user %}
                                                            col3
                                                         {% else %}
                                                            col2
                                                         {% endif %}"
                                                            style="width: 100%;" >
                                                    {% for i in ['thead'] %}
                                                        <{{ i }}>
                                                            <tr>
                                                                <th
                                                                        class="all"
                                                                        style="width:100%;">
                                                                    Name
                                                                </th>
                                                                <th>
                                                                    Country
                                                                </th>
                                                                {% if app.user %}
                                                                    <th>
                                                                        Comments
                                                                    </th>
                                                                {% endif %}
                                                            </tr>
                                                        </{{ i }}>
                                                    {% endfor %}
                                                    <tbody>
                                                    {% for participant in participants %}
                                                        {% set textClass = "" %}
                                                        {% if participant.status == 0 %}
                                                            {% set textClass = "text-green" %}
                                                            {% set title = "Confirmed & Approved" %}
                                                        {% elseif participant.status == 1 %}
                                                            {% set textClass = "text-yellow" %}
                                                            {% set title = "Need Confirmation" %}
                                                        {% elseif participant.status == 2 %}
                                                            {% set textClass = "text-grey" %}
                                                            {% set title = "Need Approval" %}
                                                        {% elseif participant.status == 3 %}
                                                            {% set textClass = "text-red" %}
                                                            {% set title = "Declined" %}
                                                        {% elseif participant.status == 4 %}
                                                            {% set textClass = "text-darkred" %}
                                                            {% set title = "Rejected" %}
                                                        {% endif %}
                                                        <tr>
                                                            <td>
                                                                <i
                                                                        class="fa fa-user fa-2x fa-fw {{ textClass }} tipso"
                                                                        aria-hidden="true"
                                                                        title="{{ title }}">

                                                                </i>
                                                                <a
                                                                        href="{{ path('view_profile', {'user': participant.idInd}) }}"
                                                                        target="_blank">
                                                                    {{ participant.sname | upper ~ ' ' ~ participant.fname }}
                                                                </a>
                                                            </td>
                                                            <td>
                                                                {{ participant.country }}
                                                            </td>
                                                            {% if app.user %}
                                                                <td>
                                                                    {{ participant.accommodation }}
                                                                </td>
                                                            {% endif %}
                                                        </tr>
                                                    {% endfor %}
                                                    </tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        {% endif %}
                                    {% endfor %}
                                {% endif %}

                                <div class="stats">
                                    {% if data.event.people.numberOfParticipants > 0  %}
                                        <i class="fa fa-user fa-2x fa-fw text-green" aria-hidden="true"></i>
                                        = Person has confirmed their participation and been approved to participate.<br />
                                    {% endif %}
                                    {% if data.event.people.numberOfProvisional > 0 %}
                                        <i class="fa fa-user fa-2x fa-fw text-yellow" aria-hidden="true"></i>
                                        = Person has not yet confirmed their participation.<br />
                                    {% endif %}
                                    {% if data.event.people.numberOfUnapproved  > 0 %}
                                        <i class="fa fa-user fa-2x fa-fw text-grey" aria-hidden="true"></i>
                                        = Person has applied to participate but has not yet been approved.<br />
                                    {% endif %}
                                    {% if data.event.people.numberOfDeclined > 0 %}
                                        <i class="fa fa-user fa-2x fa-fw text-red" aria-hidden="true"></i>
                                        = Person has declined to participate or had their request to participate declined.<br />
                                    {% endif %}
                                    {% if data.event.people.numberOfRejected > 0 %}
                                        <i class="fa fa-user fa-2x fa-fw text-darkred" aria-hidden="true"></i>
                                        = Person had their request to participate declined.<br />
                                    {% endif %}

                                    Participant Stats:<br />
                                    Total Invited: {{  data.event.people.participants|length }}<br />
                                    {% if data.event.people.numberOfParticipants is defined %}
                                        Confirmed: {{ data.event.people.numberOfParticipants }}<br />
                                    {% endif %}
                                    {% if data.event.people.numberOfProvisional is defined %}
                                        Not confirmed: {{ data.event.people.numberOfProvisional }}<br />
                                    {% endif %}
                                    {% if data.event.people.numberOfUnapproved is defined %}
                                        Unapproved: {{ data.event.people.numberOfUnapproved }}<br />
                                    {% endif %}
                                    {% if data.event.people.numberOfDeclined is defined %}
                                        Not-participating: {{ data.event.people.numberOfDeclined }}<br />
                                    {% endif %}
                                    {% if data.event.people.numberOfRejected is defined %}
                                        Rejected: {{ data.event.people.numberOfRejected }}<br />
                                    {% endif %}
                                </div>
                            </div>
                            <!-- /.tab-pane -->
                        </div>
                        <!-- /.tab-content -->
                    </div>
                    <!-- /.nav-tabs-custom -->
                    <div id='edited-by' class="pull-right italics text-right">
                        Group(s):
                        {% if data.event.eventGroups|length > 0 %}
                            {% for group in data.event.eventGroups  %}
                                {% if loop.last %}
                                <a
                                        href="{{ path('view_group',{groupId: group.idGroup}) }}">
                                    {{ group.groupname }}.<br />
                                </a>
                                {% else %}
                                <a
                                        href="{{ path('view_group',{groupId: group.idGroup}) }}">
                                    {{ group.groupname }},
                                </a>
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            no groups<br />
                        {% endif %}
                        Label(s):
                        {% if data.event.eventLabels|length > 0 %}
                            {% for label in data.event.eventLabels %}

                                {{ label.groupname ~ " " ~  label.labelType }}
                                {% if loop.last %}
                                    <br />
                                {% else %}
                                    ,
                                {% endif %}
                            {% endfor %}
                        {% else %}
                            no labels<br />
                        {% endif %}
                        {% if data.event.eventEdits.createdBy is defined %}
                            Created
                            {% if data.event.eventEdits.createdAt is defined %}
                                at {{ data.event.eventEdits.createdAt | date('H:i') ~' on '~ data.event.eventEdits.createdAt | date('d M Y') }}
                            {% endif %}
                            by <a
                                    href="{{ path('view_profile',{user: data.event.eventEdits.createdId}) }}">
                                {{ data.event.eventEdits.createdBy }}
                            </a>
                            <br />
                        {% endif %}
                        {% if data.event.eventEdits.lastEditBy is defined %}
                            Last Updated
                            {% if data.event.eventEdits.lastEditAt is defined %}
                                at {{ data.event.eventEdits.lastEditAt | date('H:i') ~' on '~ data.event.eventEdits.lastEditAt | date('d M Y') }}
                            {% endif %}
                            by <a
                                    href="{{ path('view_profile',{user: data.event.eventEdits.lastEditId}) }}">
                                {{ data.event.eventEdits.lastEditBy }}
                            </a>
                            <br />
                        {% endif %}
                    </div>
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->
        </section>
    </div>
    {% if app.user  %}
        <div
                aria-hidden="true"
                aria-labelledby="compose-mail"
                role="dialog"
                tabindex="-1"
                id="compose-mail"
                class="modal fade"
                style="display: none;">

            <div class="modal-dialog modal-email modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <button
                                aria-hidden="true"
                                data-dismiss="modal"
                                class="close"
                                type="button">
                            ×
                        </button>
                        <h4 class="modal-title">Compose Mail</h4>
                    </div>
                    {% if data.event.details.status == 1 %}
                    <div class="modal-body">
                        <div role="form" class="form-horizontal">
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Sender</label>
                                <div class="col-lg-10">
                                    {% if file_exists(web_path~asset('uploads/profile/profile_'~app.user.id~'.png')) %}
                                        <img
                                                src="{{ asset('uploads/profile/profile_'~app.user.id~'.png') }}"
                                                alt="user profile image"
                                                class="profile-img-sm img-circle"/>
                                    {% endif %}
                                    <label class="control-label">
                                        {{ data.user.fname~' '~data.user.sname }} &lt;{{ app.user.email }}&gt;<br />
                                        <div class="checkbox">
                                            <label class="no-padding" for="selfEmail">
                                                <input
                                                        type="checkbox"
                                                        value=""
                                                        id="selfEmail" />
                                                <span class="cr">
                                                    <i class="cr-icon glyphicon glyphicon-ok"></i>
                                                </span>
                                                Send a copy of this message to me too
                                            </label>
                                        </div>
                                    </label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label">Recipients</label>
                                <div class="col-lg-10">
                                    <label class="">
                                        All people involved in the event: {{ data.event.details.title }}
                                    </label>
                                    <br />({{ data.event.people.total }} recipient)
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label" for="subject">Subject</label>
                                <div class="col-lg-10">
                                    <input
                                            type="text"
                                            placeholder=""
                                            id="subject"
                                            name="subject"
                                            class="form-control" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 control-label" for="message">Message</label>
                                <div class="col-lg-10">
                                    <textarea
                                            rows="10"
                                            cols="30"
                                            class="form-control textarea"
                                            id="message"
                                            name="message">
                                    </textarea>
                                </div>
                            </div>

                            <div class="form-group">
                                <label class="col-lg-2 control-label" for="info"></label>
                                <div class="col-lg-10">
                                    <div style="margin-top:5px">
                                        <div class="infoHidden">
                                            <a
                                                    class="showInfo"
                                                    href="javascript:void(0)">
                                                [Info on inserting names]
                                            </a>
                                        </div>
                                        <div class="infoShown">
                                            <a
                                                    class="hideInfo"
                                                    href="javascript:void(0)"
                                                    style="float:right">
                                                [Hide]
                                            </a>
                                            If you include these special words in your message, they will be replaced:
                                            <br /><br />
                                            <div class="table-responsive">
                                                <table class="table table-condensed">
                                                    <tbody>
                                                        <tr>
                                                            <td>_FULLNAME_</td>
                                                            <td>Recipient name (first name &amp; surname)</td>
                                                        </tr>
                                                        <tr>
                                                            <td>_FNAME_</td>
                                                            <td>Recipient first name</td>
                                                        </tr>
                                                        <tr>
                                                            <td>_SNAME_</td>
                                                            <td>Recipient surname</td>
                                                        </tr>
                                                        <tr>
                                                            <td>_TITLE_</td>
                                                            <td>Recipient title</td>
                                                        </tr>
                                                    </tbody>
                                                </table>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-lg-offset-2 col-lg-10">
                                    <div class="fileUpload">
                                        <form
                                                action="{{ path('upload_email_attachments') }}"
                                                class="dropzone"
                                                id="myAwesomeDropzone">
                                        </form>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-offset-2 col-lg-10">
                                    <div class="btn-toolbar pull-right ">
                                        <button
                                                class="btn btn-send btn-danger"
                                                id="closeModal"
                                                data-dismiss="modal">
                                            <i class="fa fa-times-circle"></i>
                                            Close
                                        </button>
                                        <button
                                                class="btn btn-send btn-primary"
                                                id="sendmail">
                                            Send
                                            <i class="fa fa-envelope-o"></i>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {% else %}
                        <h3 class="col-lg-offset-2">
                            <i class="fa error fa-warning">&nbsp;Event is not activated yet.</i>
                        </h3>
                        <p class="col-lg-offset-2">
                            This event is not yet activated. <br>
                            You can only send emails to participants once the event is activated.<br><br>
                        </p>
                    {% endif %}
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    {% endif %}

    <div
            class="modal fade"
            id="modal-edit"
            tabindex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
            aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h3 class="modal-title">
                        Document Details
                    </h3>
                </div>

                <div class="modal-body">
                </div>

                <div class="modal-footer">
                    <button
                            type="button"
                            class="btn btn-danger"
                            data-dismiss="modal">
                        Close
                    </button>
                </div>
            </div>
        </div>
    </div>

    {% include 'footer.html.twig' %}
    <script src="{{ asset('js/bootstrap-datepicker.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.nestable.js') }}"></script>
    <script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.dataTables.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.bootstrap.min.js') }}"></script>
    <script src="{{ asset('js/dataTables.responsive.min.js') }}"></script>
    <script src="{{ asset('js/moment.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/datetime-moment.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-dialog.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipso.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-tooltip.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-confirmation.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tinymce.min.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        var removeEmailAttachments = '{{ path('remove_email_attachments') }}';
        var getDocumentById = "{{ path('get_document_by_id') }}";
        var eventStatusChange = "{{ path('event_status_change') }}";
        var documentDownloadBlock = "{{ path('document_download_block') }}";
    </script>
    <script src="{{ asset('js/dropzone.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/event-view.js') }}" type="text/javascript"></script>
    <script type="text/javascript">
        {% if data.event.agenda != "" %}

        var obj ='{{ data.event.agenda|raw|escape('js') }}';
        //console.log(obj);
        //console.log(obj.status);

        //we still need a json.parse here, we do not get a json object but json string!!!
        const checkObj = JSON.parse(obj);

        //set the top nav menu style
        $(".event").addClass('navactive');

        Tipped.create('.tipso', {maxWidth: 250});

        function buildItem(items) {
            var html ="";
            $.each(items, function (index, item) {
                html += "<li class='dd-item' data-id='" + item.id + "' id='" + item.id + "'>";
                html += "<div class='dd-handle'><span class='group-name dd-nodrag'>"
                    + item.idAgendaitem + ' - ' + item.title ;

                if(item.notes.length>0){
                    html += "<br /><strong>" +item.notes + "</strong>";
                }
                if(item.requiredActions.length>0){
                    html += " <u>" + item.requiredActions + "</u>";
                }

                if(item.documents.length>0){
                    $.each(item.documents,function (key, documentfile) {
                        html += "<br />" +
                            "<i class='fa fa-file' aria-hidden='true'></i> " +
                            "<a " +
                            "       href='javascript:void(0)' " +
                            "       class='view-document' " +
                            "       data-docid='" + documentfile.idDoc + "'>" +
                                documentfile.docCode + " " + documentfile.doctitle +
                            "</a>";
                    })
                }
                html += "</span>" +
                    "</div>";

                if (item.children) {
                    html += "<ol class='dd-list'>";
                    html += buildItem(item.children);
                    html += "</ol>";
                }
                html += "</li>";
            });
            return html;
        }

        //check if we got an error message (with status = 0)
        if (checkObj["status"] != 0) {
            $.each(JSON.parse(obj), function (index, item) {
                $('#nestable ul').append(buildItem(item));
                Tipped.create('.tipso', {maxWidth: 250});
            });
        }

        $("#nestable").nestable();
        $('.dd').nestable('collapseAll');

        $(".dd-nodrag").on("mousedown", function(event) {
            // mousedown prevent nestable click
            event.preventDefault();
            return false;
        });

        {% endif %}
        //console.log(obj);
        //console.log(JSON.parse(obj).status);

        var participants = $(".col3").DataTable({
            "oLanguage": {
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ Participants",
                "sInfoEmpty": "Showing 0 to 0 of 0 Participant"
            },
            "responsive": {
                details: {
                    type: "column"
                }
            },
            "colReorder": true,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bInfo": true,
            "bAutoWidth": true,
            "hash":true,
            "columns": [
                { "width": "40%" },
                { "width": "20%" },
                { "width": "30%" }
            ],
            "aaSorting": [],
            //aLengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            aLengthMenu: [[50, 75, 100, -1], [50, 75, 100, "All"]],

        });

        var participants2col = $(".col2").DataTable({
            "oLanguage": {
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ Participants",
                "sInfoEmpty": "Showing 0 to 0 of 0 Participant"
            },
            "responsive": {
                details: {
                    type: "column"
                }
            },
            "colReorder": true,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bInfo": true,
            "bAutoWidth": true,
            "hash":true,
            "columns": [
                { "width": "40%" },
                { "width": "20%" }
            ],
            "aaSorting": [],
            //aLengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            aLengthMenu: [[50, 75, 100, -1], [50, 75, 100, "All"]],
        });

        $.fn.dataTable.moment( 'DD/MM/YY' );
        var col4 = $(".col4").DataTable({
            "oLanguage": {
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ Documents",
                "sInfoEmpty": "Showing 0 to 0 of 0 Document"
            },
            "responsive": {
                details: {
                    type: "column"
                }
            },
            "colReorder": true,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bInfo": true,
            "bAutoWidth": true,
            "hash":true,
            "columns": [
                {"width": "20%" },
                { "width": "40%" },
                { "width": "20%" },
                { "width": "10%" }
            ],
            order: [[ 1, "desc" ]],
            //aLengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            aLengthMenu: [[50, 75, 100, -1], [50, 75, 100, "All"]],
        });

        var col5 = $(".col5").DataTable({
            "oLanguage": {
                "sInfo": "Showing _START_ to _END_ of _TOTAL_ Documents",
                "sInfoEmpty": "Showing 0 to 0 of 0 Document"
            },
            "responsive": {
                details: {
                    type: "column"
                }
            },
            "colReorder": true,
            "bPaginate": true,
            "bLengthChange": true,
            "bFilter": true,
            "bInfo": true,
            "bAutoWidth": true,
            "hash":true,
            "columns": [
                {"width": "15%" },
                { "width": "15%" },
                { "width": "40%" },
                { "width": "15%" },
                { "width": "15%" }
            ],
            order: [[ 0, "asc" ]],
            //aLengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
            aLengthMenu: [[50, 75, 100, -1], [50, 75, 100, "All"]],
        });

        tinymce.init(
            {
                selector: 'textarea',
                plugins: [
                    "advlist autolink lists link image charmap print preview anchor",
                    "searchreplace visualblocks code fullscreen",
                    "insertdatetime media table contextmenu paste imagetools powerpaste"
                ],
                toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
                powerpaste_allow_local_images: true,
                powerpaste_word_import: 'prompt',
                powerpaste_html_import: 'prompt',
                branding: false,
                relative_urls: false,
                convert_urls: false,
                forced_root_block : false
            }
        );

        $(document).on(
            'focusin',
            function(e)
            {
                if ($(e.target).closest(".mce-window").length) {
                    e.stopImmediatePropagation();
                }
            }
        );

        // Javascript to enable link to tab
        if (window.location.hash != "") {
            $('a[href="' + window.location.hash + '"]').click()
            $(window).scrollTop(0);
        }

        $('.nav-tabs a').on(
            'shown.bs.tab',
            function (e)
            {
                window.location.hash = e.target.hash;
                $(window).scrollTop(0);
            }
        );

        $("body").on(
            "click",
            ".navigate",
            function (event)
            {
                var id = $(this).data("id");
                $(".nav-tabs a[href='#" + id + "']").tab("show");
            }
        );

        Dropzone.options.myAwesomeDropzone =
        {
            init: function()
                {
                    this.on('success', function(file, response) {
                        $("#message").after($('<input type="hidden" name="file[]" class="file" value="' + response + '">'));
                    });

                    this.on('queuecomplete', function()
                        {
                            // Invoked when all files finished uploading
                            // Now just submit the form. It will send the filenames along since
                            // they are added as hidden input fields.
                        }
                    );

                    this.on('removedfile', function (file, response)
                        {
                            $('.file:input[value="'+file.fid+'"]').remove();
                        }
                    );
                },
            maxFilesize: 10,
            maxFiles: 15,
            accept: function(file, done)
                {
                    var thumbnail = $('.dropzone').find(".dz-preview:last");
                    thumbnail.removeClass('dz-file-preview').addClass('dz-image-preview');
                    switch (file.type) {
                        case 'application/pdf':
                            thumbnail.find('img').attr('src','{{ asset("img/pdf-icon.png") }}');
                            break;
                        case 'application/vnd.openxmlformats-officedocument.wordprocessingml.document':
                            thumbnail.find('img').attr('src','{{ asset("img/word-icon.png") }}');
                            break;
                        case 'application/vnd.ms-excel':
                            thumbnail.find('img').attr('src','{{ asset("img/excel-icon.png") }}');
                            break;
                        case 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet':
                            thumbnail.find('img').attr('src','{{ asset("img/excel-icon.png") }}');
                            break;
                        case 'application/vnd.ms-powerpoint':
                            thumbnail.find('img').attr('src','{{ asset("img/PowerPoint-icon.png") }}');
                            break;
                        case 'application/application/zip, application/octet-stream':
                            thumbnail.find('img').attr('src','{{ asset("img/zip-icon.jpg") }}');
                            break;
                        case 'text/csv':
                            thumbnail.find('img').attr('src','{{ asset("img/csv-icon.jpg") }}');
                            break;
                        case 'text/plain':
                            thumbnail.find('img').attr('src','{{ asset("img/txt-icon.png") }}');
                            break;
                        case 'application/zip':
                            thumbnail.find('img').attr('src','{{ asset("img/zip-icon.jpg") }}');
                            break;
                    }
                    done();
                },
        };

        $("#sendmail").click(
            function ()
            {
                $this = $(this);
                var subject = $("#subject").val();
                var message = tinyMCE.get('message').getContent();
                selfEmail = $("#selfEmail").is(":checked");
                var file = $('input:hidden.file').serialize();
                if ($.trim(subject) === "") {
                    $("#subject").parents('.form-group').addClass('has-error');
                    errorsubject = true;
                } else {
                    $("#subject").parents('.form-group').removeClass('has-error');
                    errorsubject = false;
                }

                if ($.trim(message) === "") {
                    $("#message").parents('.form-group').addClass('has-error');
                    $("#message").siblings(".mce-tinymce").css('border-color','red');
                    errormessage = true;
                } else {
                    $("#message").parents('.form-group').removeClass('has-error');
                    $("#message").siblings(".mce-tinymce").css('border-color','rgb(210, 214, 222)');
                    errormessage = false;
                }

                {% if app.user.id is defined %}
                if (!errormessage && !errorsubject) {
                    $this.prop("disabled",true);
                    $this.html("<i class='fa fa-spin fa-cog'></i> Sending</button>");
                    $.ajax({
                        url: "{{ path('email_queue') }}",
                        data:{
                            userid: "{{ app.user.id }}",
                            eventid: "{{ data.event.details.idEvent }}",
                            email: "{{ app.user.email }}",
                            selfmail: selfEmail,
                            subject: subject,
                            message: message,
                            file: file,
                            searchstring: window.location.href
                        },
                        type: "POST",
                        success:function (response) {
                            $this.html("Send <i class='fa fa-envelope-o'></i>");
                            $(".dz-default.dz-message").css("opacity",1);
                            $("#selfEmail").prop("checked",false);
                            $("#subject").val("");
                            tinymce.get("message").setContent('');
                            $('div.dz-success').remove();
                            $("#message").siblings(".file").remove();
                            $this.prop("disabled",false);
                            $("#compose-mail").modal("hide");
                            if (response.status === 0) {
                                BootstrapDialog.alert({
                                    title: 'Email Received Successfully.',
                                    message: 'Your email is successfully received. It will now be queued and sent out to the recipients shortly.',
                                    type: BootstrapDialog.TYPE_SUCCESS,
                                    closable: false,
                                    draggable: false,
                                    buttonLabel: 'OK',
                                });
                            } else {
                                let message = 'There was an error sending your email. Please try again later.<br />';
                                message += response.error + '<br />';
                                message += response.returnMessage;
                                BootstrapDialog.alert({
                                    title: 'Email Not Sent.',
                                    message: message,
                                    type: BootstrapDialog.TYPE_DANGER,
                                    closable: false,
                                    draggable: false,
                                    buttonLabel: 'OK',
                                });
                            }
                        }
                    });
                }
                {% endif %}
            }
        );

        $("body").on(
            "click",
            ".view-document",
            function ()
            {
                var $this = $(this);
                var $modal = $("#modal-edit")
                var idDoc = $this.data("docid");
                //var doctype = $this.data("doctype");
                $modal.find(".modal-header").html("<h3 class='modal-title'>Document Details</h3>");
                $modal.children("modal-dialog").addClass("modal-lg");
                $modal.find(".modal-footer").html("<button type='button' class='btn btn-danger' data-dismiss='modal'>Close</button>");
                $modal.find(".modal-body").html("");
                $modal.modal("show");
                $.ajax({
                    url: getDocumentById,
                    type: "GET",
                    data: {idDoc: idDoc},
                })
                    .done(function(data) {
                        $modal.find(".modal-body").html(data);
                    });
            }
        );

        $("body").on(
            "click",
            ".eventAction",
            function ()
            {
                $this = $(this);
                $this.html("<i class='fa fa-cog fa-spin fa-fw' aria-hidden='true'></i> Please wait...");
                var eventStatus = $this.data("status");
                $.ajax({
                    url: eventStatusChange,
                    type: "POST",
                    data: {idEvent: {{ data.event.details.idEvent}}, eventStatus: eventStatus},
                }).done(function (response) {
                    console.log(response);
                    if(response.status == 1){
                        switch (response.eStatus){
                            case "0":
                                $this.replaceWith("<button " +
                                    "class='btn btn-success eventAction' " +
                                    "data-status='1'>" +
                                    "<i class='fa fa-check fa-fw' aria-hidden='true'></i> " +
                                    "Activate" +
                                    "</button>");
                                break;
                            case "1":
                                $this.replaceWith("<button " +
                                    "class='btn btn-danger eventAction' " +
                                    "data-status='0'>" +
                                    "<i class='fa fa-ban fa-fw' aria-hidden='true'></i> " +
                                    "Deactivate" +
                                    "</button>");
                                break;
                            case "2":
                                $this.replaceWith("<button " +
                                    "class='btn btn-warning eventAction' " +
                                    "data-status=3'>" +
                                    "<i class='fa fa-times fa-fw' aria-hidden='true'></i> " +
                                    "Delete" +
                                    "</button>");
                                break;
                            case "3":
                                $this.replaceWith("<button " +
                                    "class='btn btn-success eventAction' " +
                                    "data-status='0'>" +
                                    "<i class='fa fa-check fa-fw aria-hidden=true'></i> " +
                                    "Undelete" +
                                    "</button>");
                                break;
                        }
                    }
                });
            }
        );

        $('#nestable-menu').on(
            'click',
            function(e)
            {
                var target = $(e.target),
                    action = target.data('action');
                if (action === 'expand-all') {
                    $('.dd').nestable('expandAll');
                }
                if (action === 'collapse-all') {
                    $('.dd').nestable('collapseAll');
                }
            }
        );

        $(document).ready(
            function()
            {
                $('[class=showInfo]').on('click', function(){
                    $(document).find('[class=infoHidden]').hide();
                    $(document).find('[class=infoShown]').show();
                    return false;
                });
                $('[class=hideInfo]').on('click', function(){
                    $(document).find('[class=infoHidden]').show();
                    $(document).find('[class=infoShown]').hide();
                    return false;
                });
            }
        );
    </script>
{% endblock %}