{#
template to
- show the content of a group
- edit the group
- add members to the group
- send mails to a group

    is used in both Group/editGroup.html.twig
    and Admin/editGroup.html.twig
#}
{% block content %}
<div class="container-fluid">
    <!-- Content Wrapper. Contains page content -->
    <div class="">
        <!-- Main content -->
        <section class="content">
            <p>
                {{ data.group.groupname }}
                {#  % if (data.isGroupAdmin == 1) or (is_granted('ROLE_GLOBAL_EDITOR')) % #}
                {% if (data.isGroupAdmin == 1) or is_granted('ROLE_ADMIN') %}
                    &nbsp;<button class="btn btn-primary btn-xs editGroup">Edit</button>
                {% endif %}
            </p>
            <div class="container-fluid">
                <div class="row">
                    <div class="btn-group btn-breadcrumb">
                        <a
                                href="{{ path('groups') }}"
                                class="btn btn-default">
                            <i class="glyphicon glyphicon-home"></i>
                        </a>
                        {% for group in data.ancestors %}
                            {% if loop.last %}
                                <span
                                        class="btn btn-default tipso disabled"
                                        disabled="disabled"
                                        title="{{ group.groupname }}">
                                    {% if group.groupname | length > 20 %}
                                        {{ group.groupname | truncate(20) }}
                                    {% else %}
                                        {{ group.groupname }}
                                    {% endif %}
                                </span>
                            {% else %}
                                <a
                                        href="{{ path('view_group',{groupId:group.idGroup}) }}"
                                        class="btn btn-default tipso"
                                        title="{{ group.groupname }}">
                                    {% if group.groupname | length > 20 %}
                                        {{ group.groupname | truncate(20) }}
                                    {% else %}
                                        {{ group.groupname }}
                                    {% endif %}
                                </a>
                            {% endif %}
                        {% endfor %}
                    </div>
                    <p>
                        {% if data.subgroups is defined and data.subgroups | length > 0 %}
                            {{ data.group.groupname }} also has the {% if data.subgroups | length >1 %}sub-groups{% else %}sub-group{% endif %} :
                            {% for subgroup in data.subgroups  %}
                                <a
                                        href="{{ path('view_group',{groupId:subgroup.idGroup}) }}">
                                    {{ subgroup.groupname }}
                                </a>
                                {% if not loop.last %},{% else %}.{% endif %}
                            {% endfor %}
                        {% else %}
                            no subgroups found for this group
                        {% endif %}
                    </p>
                </div>

                <div class="row">
                    <div class="bottom-buffer50">
                        <article>
                            <p
                                    class="description">
                                {{ data.group.description |raw | nl2br  }}
                            </p>
                        </article>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <table
                                    id="datatable"
                                    class="table table-striped table-bordered dataTable dt-responsive wrap">
                                {% for i in ['thead', 'tfoot'] %}
                                    <{{ i }}>
                                        <tr>
                                            {% if app.user %}
                                                <th>Select</th>
                                            {% else %}
                                                <th id="{{ i }}-th"></th>
                                            {% endif %}
                                            <th style="width: 65%;">Name</th>
                                            <th style="width: 15%;">Group Role</th>
                                            <th style="width: 15%;">Country (worklocation)</th>
                                            <th style="width: 15%;">FirstName</th>
                                        </tr>
                                    </{{ i }}>
                                {% endfor %}
                            </table>
                            {#   % if is_granted('ROLE_ADMIN') % #}
                            {% if (data.isGroupAdmin == 1) or is_granted('ROLE_ADMIN') %}
                                <button
                                    href="#compose-mail"
                                    data-toggle="modal"
                                    class="btn btn-primary"
                                    id="compose"
                                    style="display: none;">
                                    <i class="fa fa-envelope-o fa-fw"></i>
                                    Send email to everybody<br />
                                    in this group <strong>and</strong> all sub-groups
                                </button>
                            {% endif %}
                            {#  % if is_granted('ROLE_ADMIN') % #}
                            {% if (data.isGroupAdmin == 1) or is_granted('ROLE_ADMIN') %}
                                <br/>
                                <a
                                        href="{{ path('get_group_experts_addresses',{groupId:data.group.idGroup}) }}"
                                        target="_blank">
                                    <button
                                            class="btn btn-primary"
                                            id="export"
                                            style="display: block;">
                                        <i class="fa fa-download fa-fw"></i>
                                        Export info about experts<br />
                                        in this group <strong>and</strong> all sub-groups<br />
                                        as CSV
                                    </button>
                                </a>
                            {% endif %}
                        </div>
                    </div>
                </div>
            </div>
        </section>
    </div>

    {# this part (modals) is only needed when a user is logged in as admin #}
    {#  % if is_granted('ROLE_ADMIN') % #}
    {% if (data.isGroupAdmin == 1) or is_granted('ROLE_ADMIN') %}

    <!-- Modal to send mails to group -->
    <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-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>
                <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"
                                        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="control-label">
                                    All people in the {{ data.group.groupname }} group
                                </label>
                            </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>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->

    {# not very sure what this does #}
    <div
            class="modal fade"
            id="modal-edit"
            tabindex="-1"
            role="dialog"
            aria-labelledby="myModalLabel"
            aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button
                            type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-hidden="true">
                        &times;
                    </button>
                    <h4 class="modal-title"></h4>
                </div>
                <div class="modal-body">
                    <p>
                        <span class="modal-message"></span>
                    </p>
                </div>
                <div class="modal-footer">
                </div>
            </div>
        </div>
    </div>

    {# modal to edit the group settings/info #}
    <div
            class="modal fade"
            id="groupEdit"
            tabindex="-1"
            role="dialog"
            aria-labelledby="groupEditLabel"
            aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <form
                    id="FormMessage"
                    class="form-horizontal">
                <div class="modal-content">
                    <div class="modal-header btn-success">
                        <h4 id="groupEditLabel">
                            Edit Description for : <strong>{{ data.group.groupname }}</strong>
                        </h4>
                    </div>
                    <div class="modal-body">
                        <br />
                        <div class="control-group">
                            <label for="groupName">
                                Name:
                            </label>
                            <input
                                    name="groupName"
                                    type="text"
                                    id="groupName"
                                    value="{{ data.group.groupname }}"
                                    class="form-control" />
                        </div>
                        <br />
                        <div class="control-group">
                            <label for="description">
                                Description
                            </label>
                            <textarea
                                    id="description"
                                    name="description"
                                    class="form-control textarea"
                                    rows="10">
                                {{ data.group.description |raw | nl2br  }}
                            </textarea>
                        </div>
                        <br />
                        <div class="control-group">
                            <input
                                    type="checkbox"
                                    name="officialBody"
                                    id="officialBody"
                                    value="{{ data.group.officialBody }}" />
                            <label for="officialBody">
                                This group is an official subsidiary body.
                            </label>
                        </div>
                        <br />
                        <div class="control-group">
                            <label for="template">
                                List Group Member(s)
                            </label>
                            <select
                                    name="template"
                                    id="template"
                                    class="form-control">
                                {% for key, template in data.templates %}
                                    {% if key == data.group.idMstemplate %}
                                        <option value="{{ key }}" selected>
                                            {{ template }}
                                        </option>
                                    {% else %}
                                        <option value="{{ key }}">
                                            {{ template }}
                                        </option>
                                    {% endif %}
                                {% endfor %}
                            </select>
                        </div>
                        <br />
                    </div>
                    <div class="modal-footer">
                        <div class="text-right">
                            <button
                                    type="button"
                                    class="btn btn-danger"
                                    data-dismiss="modal">
                                <i class="fa fa-times-circle" aria-hidden="true"></i>
                                Cancel
                            </button>
                            <button
                                    type="button"
                                    class="btn btn-success saveGroup">
                                <i class="fa fa-floppy-o" aria-hidden="true"></i>
                                Save
                            </button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>

    {# modal to add a member to the group #}
    <div
            class="modal fade"
            id="addMember"
            tabindex="-1"
            role="dialog"
            aria-labelledby="addMemberLabel"
            aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header btn-success">
                    <h4 id="groupEditLabel">
                        Add Member(s) to <strong>{{ data.group.groupname }}</strong>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-xs-8 col-xs-offset-2">
                            <div class="input-group">
                                <div class="input-group-btn search-panel">
                                    <button
                                            type="button"
                                            class="btn btn-default dropdown-toggle"
                                            data-toggle="dropdown">
                                        <span id="search_concept">Filter by</span> <span class="caret"></span>
                                    </button>
                                    <ul class="dropdown-menu" role="menu">
                                        <li><a href="#name">Name</a></li>
                                        <li><a href="#email">Email</a></li>
                                        <li class="divider"></li>
                                        <li><a href="#group">Groups</a></li>
                                    </ul>
                                </div>
                                <input
                                        type="hidden"
                                        name="search_param"
                                        value="all"
                                        id="search_param" />
                                <input
                                        type="text"
                                        class="form-control"
                                        name="searchTerm"
                                        id="searchTerm"
                                        placeholder="Search Members..." >
                                <span class="input-group-btn">
                                    <button
                                            class="btn btn-default searchMembers"
                                            id="searchButton"
                                            type="button">
                                        <i class="fa fa-search fa-fw"></i>
                                        Search
                                    </button>
                                </span>
                            </div>
                        </div>
                    </div>

                    <div class="container-fluid">
                        <div class="result">
                            <table class="table table-striped resultSet">
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Group Role</th>
                                        <th>Institution</th>
                                        <th>Country (worklocation)</th>
                                        <th>Action</th>
                                        <th style="display: none">Relevance</th>
                                    </tr>
                                </thead>
                                <tfoot>
                                    <tr>
                                        <th>Name</th>
                                        <th>Group Role</th>
                                        <th>Institution</th>
                                        <th>Country (worklocation)</th>
                                        <th>Action</th>
                                        <th style="display: none">Relevance</th>
                                    </tr>
                                </tfoot>
                            </table>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <div class="text-right">
                        <button
                                type="button"
                                class="btn btn-success add-all" style="display: none;">
                            <i class="fa fa-plus fa-fw" aria-hidden="true"></i>
                            Add all the above to group
                        </button>
                        <button
                                type="button"
                                class="btn btn-danger"
                                data-dismiss="modal">
                            <i class="fa fa-times-circle fa-fw" aria-hidden="true"></i>
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {# modal to edit a member/role #}
    <div class="modal fade" id="editMember">
        <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
                     <h4 class="modal-title"></h4>
                 </div>
                 <div class="modal-body">
                    <h4 class="member"></h4>
                    <div class="container-fluid">
                        <div class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-sm-3" for="email">
                                    Group Role :
                                </label>
                                <div class="col-sm-9">
                                    <input
                                            type="text"
                                            class="form-control"
                                            id="groupRole"
                                            placeholder="Enter group role" value="" />
                                    <input
                                            type="hidden"
                                            id="memberid"
                                            name="memberid" />
                                </div>
                            </div>
                        </div>
                    </div>
                 </div>
                 <div class="modal-footer">
                     <button
                             type="button"
                             class="btn btn-danger"
                             data-dismiss="modal">
                         <i class="fa fa-times-circle fa-fw" aria-hidden="true"></i>
                         Cancel
                     </button>
                    <button
                            type="button"
                            class="btn btn-success"
                            id="addRole">
                        <i class="fa fa-floppy-o fa-fw" aria-hidden="true"></i>
                        Save
                    </button>
                </div>
             </div>
        </div>
    </div>
    {% endif %}
</div>

{% include "footer.html.twig" %}
    <script src="{{ asset('js/handlebars.runtime.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/handlebars.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/app.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.dataTables.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dataTables.bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dataTables.responsive.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/responsive.bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jquery.nestable.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/tipped.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-editable.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-tooltip.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/confirm-bootstrap.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-editable.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dataTables.select.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap-dialog.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dataTables.buttons.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/dataTables.rowReorder.min.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') }}';
    </script>
    <script src="{{ asset('js/dropzone.js') }}" type="text/javascript"></script>
    <script type="text/javascript" class="init">
        $(document).ready(function() {

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

            Tipped.create('.tipso', {maxWidth: 250});
            $("#compose").css('display', 'none');
            var status= 0;
            var ajaxUrl = "/dataTablesServerProcessing?group={{ data.group.idGroup }}";
            var mainTableDefaults = {
                {% if app.request.query.get("display") is defined and app.request.query.get("display") != "" %}
                    {% if  app.request.query.get("display") == 'all' %}
                        paging: false,
                    {% else %}
                        iDisplayLength: {{ app.request.query.get("display") }},
                    {% endif %}
                {% endif %}
                "processing": true,
                "language": {
                    "processing": '<div id="cssload-wrapper">' +
                        '<div id="cssload-border">' +
                        '<div id="cssload-whitespace">' +
                        '<div id="cssload-line">' +
                        '</div>' +
                        '</div>' +
                        '</div>' +
                        '</div>',
                    "emptyTable": "There are no members in the group. Please add members using \"Add Member\" button."
                },
                "serverSide": true,
                "pageLength": 50,
                "ajax": ajaxUrl,
                dom:
                "<'row'<'col-sm-6 text-center'B><'col-sm-3'l><'col-sm-3'f>>" +
                "<'toolbar'><'row'<'col-sm-12'tr>>" +
                "<'row'<'col-sm-3'i><'col-sm-9'p>>",
                "info": true,
                aLengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                columns: [
                    {
                        "orderable": false
                    },
                    {
                        data: 'sname',
                        "searchable": true,
                        render: function(data, type, full, meta)
                        {
                            var data = '<span ' +
                                'class="info">' +
                                '<div ' +
                                '   class="media">';

                            {% if data.group.idMstemplate == 2 %}
                                data += '<div ' +
                                    'class="media-left">';

                                if (status == 0) {
                                    data += '<a ' +
                                        'href="{{ path('view_profile', {'user': 'idInd'}) }}" ' +
                                        'target="_blank">';
                                }
                                data += '<img ' +
                                    'alt="expert image 64x64" ' +
                                    'class="media-object" ' +
                                    'data-src="' + full.image +'" ' +
                                    'style="width: 64px;" ' +
                                    'src="' + full.image + '" ' +
                                    'data-holder-rendered="true" ' +
                                    'onerror="this.src=\'/assets/uploads/default.png\';" />';

                                if (status == 0) {
                                    data += '</a>';
                                }
                                data += '</div>';
                            {% endif %}
                            data += '<div ' +
                                'class="media-body">' +
                                '<h4 ';
                            if (full.status != 1
                                || full.deceased != 0
                                || full.retired != 0
                            ) {
                                data += ' class="text-warning" ';
                            } else {
                                data += ' class="media-heading" ';
                            }
                            data += '>';
                            //console.log(full);

                            if (status == 0) {
                                data += '<a ' +
                                    'href="{{ path('view_profile', {'user': 'idInd'}) }}" ' +
                                    'target="_blank" '
                                if (full.status != 1
                                    || full.deceased != 0
                                    || full.retired != 0
                                ) {
                                    data += 'class="text-warning" ';
                                }
                                data += '>';
                            }
                            data +=  full.name;
                            if (full.status != 1) {
                                data += ' (profile not active!)';
                            }
                            if (full.deceased != 0) {
                                data += ' (deceased!)';
                            }
                            if (full.retired != 0) {
                                data += ' (retired!)';
                            }
                            if (status == 0) {
                                data += '</a>';
                            }
                            data +=  '</h4><p>';
                            if ($.trim(full.instName) != "") {
                                if (status == 0) {
                                    data += '<a ' +
                                        'href="{{ path('view_institution',{'instId':'idInst'}) }}" ' +
                                        'target="_blank">';
                                }
                                data += '<small>' + full.instName + '</small>';
                                if (status == 0) {
                                    data += '</a>';
                                }
                                data += '<br />';
                            }
                            if (status == 0) {
                                if ($.trim(full.groupRole) != "") {
                                    data += '<span class="label label-primary">' + full.groupRole + '</span>';
                                    {#  % if (data.isGroupAdmin == 1) or (is_granted('ROLE_GLOBAL_EDITOR')) % #}
                                    {#  % if is_granted('ROLE_ADMIN') % #}
                                    {% if (data.isGroupAdmin == 1) or is_granted('ROLE_ADMIN') %}
                                    data += '<span ' +
                                        'class="edit-role">' +
                                        '<i class="fa fa-cog fa-fw tipso" ' +
                                        'aria-hidden="true" ' +
                                        'title="Edit role">' +
                                        '</i>' +
                                        '</span>';
                                    {% endif %}
                                } else {
                                    {#  % if (data.isGroupAdmin == 1) or (is_granted('ROLE_GLOBAL_EDITOR')) % #}
                                    {#  % if is_granted('ROLE_ADMIN') % #}
                                    {% if (data.isGroupAdmin == 1) or is_granted('ROLE_ADMIN') %}
                                    data += '<span ' +
                                        'class="edit-role">' +
                                        '<i ' +
                                        'class="fa fa-plus fa-fw tipso" ' +
                                        'aria-hidden="true" ' +
                                        'title="Add role">' +
                                        '</i>' +
                                        '</span>';
                                    {% endif %}
                                }
                            }
                            data += '</p></div>' +
                                    '</div></span>';
                            data = data.replace(/idInd/g, full.idInd);
                            data = data.replace(/idInst/g, full.idInst);

                            return data;
                        }
                    },
                    {
                        data: 'groupRole',
                        "searchable": true
                    },
                    {
                        data: 'country',
                        "searchable": true
                    },
                    {
                        data: 'fname',
                        "searchable": true
                    },
                ],
                columnDefs: [
                    {
                        "targets": [0,3],
                        "defaultContent": ""
                    },
                    {% if app.user %}
                    {
                        "targets":  0,
                        className: 'select-checkbox'
                    },
                    {% endif %}
                    {
                        "targets" : 4,
                        visible: false
                    },
                ],
                {#  % if (data.isGroupAdmin == 1) or (is_granted('ROLE_GLOBAL_EDITOR')) % #}
                {#   % if is_granted('ROLE_ADMIN') % #}
                {% if (data.isGroupAdmin == 1) or is_granted('ROLE_ADMIN') %}
                    select: {
                        style:    'multi+shift',
                        selector: 'td:first-child'
                    },
                    buttons: [
                        {
                            text: 'Add Member(s)',
                            className: 'add-member'
                        },
                        {
                            text: 'Remove Selected',
                            className: 'remove-member'
                        },
                    ],
                {% else %}
                    buttons: [],
                {% endif %}
                "order": [[ 3, "desc" ]],
                initComplete : function( settings, json ) {
                    $(".wait").css('display','none');
                    Tipped.create('.tipso', {maxWidth: 250});
                    if ($('#datatable').DataTable().data().count() > 0) {
                        $("#compose").css('display', 'block');
                    }
                }
            };

            var table = $('#datatable').DataTable(mainTableDefaults);

            {% if (data.isGroupAdmin == 1) or (is_granted('ROLE_GLOBAL_EDITOR')) %}
            /*
            this seems to cause trouble
            arno 27/11/2024
            table.buttons(1).disable();
             */
            table.on( 'select', function ( e, dt, type, indexes ) {
                if (table.rows('.selected').count() > 0) {
                    table.buttons(1).enable();
                } else {
                    table.buttons(1).disable();
                }
            } ).on( 'deselect', function ( e, dt, type, indexes ) {
                if (table.rows('.selected').count() > 0) {
                    table.buttons(1).enable();
                } else {
                    table.buttons(1).disable();
                }
            } );

            $("body").on('click',".edit-role",function (e) {
                var $this = table.row( $(this).parents('tr') ).data();
                let idInd = $this.idInd;
                $editMember = $("#editMember")
                $editMember.find(".member").html("");
                $editMember.find("#memberid").val("");
                e.preventDefault();
                $editMember.find("#memberid").val(idInd);
                $editMember.find("#groupRole").val($this.groupRole);
                if ($.trim($this.groupRole) == "") {
                    $editMember.find(".modal-title").html("Add Group Role");
                    $editMember.find(".member").html("Add role for <strong>"+$this.fname +" "+ $this.lname+"</strong>.");
                } else {
                    $editMember.find(".modal-title").html("Edit Group Role");
                    $editMember.find(".member").html("Edit role for <strong>"+$this.fname +" "+ $this.lname+"</strong>.");
                }
                $editMember.modal("show");
            });

            $("#editMember" ).on( "click", "#addRole", function(e) {
                e.preventDefault();
                $this = $(this);
                $editMember = $("#editMember");
                $editMember.find(".ajaxresult").remove();
                memberid = $.trim($editMember.find("#memberid").val());

                groupid = {{ data.group.idGroup }};
                role = $.trim($editMember.find("#groupRole").val());
                if (memberid!="") {
                    $.ajax({
                        url: '{{ path('set_group_role') }}',
                        type: 'POST',
                        data: {
                            memberid: memberid,
                            groupid: groupid,
                            role: role
                        },
                        success: function (response) {
                            if (response.status == 1) {
                                $('#datatable').DataTable().draw();
                                $("#memberid").after("<span class='ajaxresult text-success'>Role updated successfully.</span>");
                                setTimeout(function() {
                                    $(".ajaxresult").remove();
                                    $editMember.modal("hide");
                                }, 1000);
                            } else {
                                $("#memberid").after("<span class='ajaxresult text-danger'>"+response.message+"</span>");
                            }
                        }
                    });
                }

            });

            $("body").on( "click", ".remove-member", function(e) {
                if (table.rows('.selected').count() > 0) {
                    var memberids = $.map(table.rows('.selected').data(), function (item) {
                        return item['idInd'];
                    });
                    BootstrapDialog.confirm({
                        title: 'Remove Member(s)',
                        message: 'Remove selected member(s) from group?',
                        type: BootstrapDialog.TYPE_DANGER,
                        closable: false,
                        draggable: false,
                        btnCancelLabel: '<i class="fa fa-times-circle fa-fw" aria-hidden="true"></i> Cancel',
                        btnOKLabel: '<i class="fa fa-user-times fa-fw" aria-hidden="true"></i> Remove Member(s)',
                        btnOKClass: 'btn-danger',
                        btnCancelClass: 'btn-success',
                        callback: function(result) {
                            if (result) {
                                $.ajax({
                                    url: "{{ path('delete_group_member') }}",
                                    method: 'POST',
                                    data: {memberids: memberids, groupid: {{ data.group.idGroup }} },
                                    success: function (response) {
                                        if (response.status == 1) {
                                            $('#datatable').DataTable().draw();
                                            if ($('#datatable').DataTable().data().count() > 0) {
                                                $("#compose").css('display', 'block');
                                            } else {
                                                $("#compose").css('display', 'none');
                                            }
                                        }
                                    }
                                });
                            }
                        }
                    });
                }
            });

            $(".editGroup").click(function (e) {
                console.log('edit.group.content.html.twig - editGroup - click');
                e.preventDefault();
                $("#groupEdit").modal("show");
            })

            $(".saveGroup").click(function (e) {
                e.preventDefault();
                if ($("#officialBody").is(":checked")) {
                    officialBody = 1;
                } else {
                    officialBody = 0;
                }
                $.ajax({
                    url: '{{ path('save_group') }}',
                    data: {
                        'groupid': {{ data.group.idGroup }},
                        'groupname': $("#groupName").val(),
                        'description': tinyMCE.get('description').getContent(),
                        'officialbody': officialBody,
                        'template': $("#template").val()
                    },
                    type: 'POST',
                    success: function (response) {
                        //console.log(response.message);
                        if (response.status == 1 ) {
                            $("#groupEdit").modal("hide");
                            window.location.reload();
                        } else {
                            $("#groupEdit").modal("show");
                        }
                    }
                });
            });

            //open the modal to enter a new member
            /*
            $("body").on( "click", ".add-member", function(e) {
                e.preventDefault();
                $("#addMember").modal("show");
                $(".add-all").css('display','none');

            });
             */
            $(".add-member").click(function (e) {
                e.preventDefault();
                $("#addMember").modal("show");
                $(".add-all").css('display','none');
                const searchTerm = document.getElementById('searchTerm');
                const searchButton = document.getElementById('searchButton');

                searchTerm.addEventListener('keydown', (event) => {
                    if (event.keyCode === 13) {
                        searchButton.click()
                    }
                })
            });

            $('.search-panel .dropdown-menu').find('a').click(function(e) {
                e.preventDefault();
                var param = $(this).attr("href").replace("#","");
                var concept = $(this).text();
                $('.search-panel span#search_concept').text(concept);
                $('.input-group #search_param').val(param);
                var searchfield = $("#searchTerm");
                if (param=="group") {
                    var selectbox = '<select id="searchTerm" name="searchTerm" class="form-control"></select>';
                    searchfield.replaceWith(selectbox);
                    $.getJSON( "{{ path('get_all_groups_json') }}", function( data ) {
                        $.each( data, function( key, val ) {
                            $("#searchTerm").append($("<option></option>")
                                            .attr("value",val.groupname)
                                            .text(val.groupname));
                        })
                    });
                } else {
                    searchfield.replaceWith(
                        '<input ' +
                        '   type="text" ' +
                        '   class="form-control" ' +
                        '   name="searchTerm" ' +
                        '   id="searchTerm" ' +
                        '   placeholder="Search Members...">'
                    );
                }
            });


            /**
             * try to find a member to be added to a group
             */
            $("body").on( "click", ".searchMembers", function(e) {
                e.preventDefault();
                if ($.trim($("#searchTerm").val()) != "") {
                    $(".result").css('display','block');
                    var resultSet = $('.resultSet').DataTable( {
                        "language": {
                            "emptyTable": "No member found using above search criteria."
                        },
                        destroy: true,
                        "ajax": {
                            url: "{{ path('get_members') }}",
                            type: "POST",
                            data: {
                                searchterm: $.trim($("#searchTerm").val()),
                                searchparam: $("#search_param").val(),
                                groupid: {{ data.group.idGroup}}
                            },
                        },
                        "columns": [
                            {
                                "data": "id_ind",
                                render:function (data, type, full, meta) {
                                    var url = "{{ path('view_profile', {'user': 'idInd'}) }}";
                                    url = url.replace(/idInd/g, full.id_ind);

                                    return '<a href="' + url + '" target="_blank">' + full.title + ' ' + full.fname + ' ' + full.sname + '</a>';
                                }
                            },
                            {
                                "data": "id_ind",
                                render:function (data, type, full, meta) {
                                    return '<input type="text" class="form-control grouprole" id="input_'+data+'" name="groupRole"  placeholder="Add Group Role...">';
                                }
                            },
                            {
                                "data": "inst_name"
                            },
                            {
                                "data": "country"
                            },
                            {
                                "data": "id_ind",
                                render:function (data, type, full, meta) {
                                    return '<a href="javascript:void(0);" class="btn btn-sm btn-success addMemberGroup"><i class="fa fa-plus" aria-hidden="true"></i> Add</a>';
                                }
                            },
                            {
                                "data": "relevance"
                            },
                       ],
                       columnDefs: [
                           {
                               'targets': [5],
                               'visible': false,
                               'searchable': true
                           }
                       ],
                       order: [[ 5, "desc" ]],
                       aLengthMenu: [[10, 25, 50, -1], [10, 25, 50, "All"]],
                       "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
                           if (($('.resultSet').DataTable().rows().data().count() > 0) && ($('.resultSet').DataTable().rows().data().count()<100)) {
                               $(".add-all").css('display','inline-block');
                           } else {
                               $(".add-all").css('display','none');
                           }
                       }
                   } );
               }
            });

            $("body").on("click",".addMemberGroup",function (event) {
                var $this = $(this);
                var idInd = $this.parents("tr").attr('id');
               $.ajax({
                   url: "{{ path('add_group_member') }}",
                   data:{userid: idInd, groupid: "{{ data.group.idGroup }}",grouprole: $this.parents("tr").find(".grouprole").val()},
                   type: "POST",
                   success:function (response) {
                      if (response.status ==1) {
                          $('.resultSet').DataTable().row( $this.parents('tr') ).remove().draw();
                          table.ajax.reload();
                          if ($('.resultSet').DataTable().rows().data().count()==0) {
                              $(".add-all").css('display','none');
                              //console.log($('#datatable').DataTable().data().count());
                              if ($('#datatable').DataTable().data().count() > 0) {
                                  $("#compose").css('display', 'block');
                              }
                          }
                      }
                   }
               });
            });

            $("body").on("click",".add-all",function (event) {
                if ( $('.resultSet').DataTable() instanceof $.fn.dataTable.Api) {
                    var element = {};
                    var memberdata = [];
                    $('.resultSet').DataTable().rows().data().each(function (value) {
                        var role;
                        if ($("#input_"+value.id_ind).val()===undefined) {
                            role = "";
                        } else {
                            role = $("#input_"+value.id_ind).val();
                        }
                        $.ajax({
                            url: "{{ path('add_group_member') }}",
                            data:{userid: value.id_ind, groupid: "{{ data.group.idGroup }}",grouprole: role},
                            type: "POST",
                            success:function (response) {
                                if (response.status ==1) {
                                    $('.resultSet').DataTable().row($("tr#"+value.id_ind) ).remove().draw();
                                    table.ajax.reload();
                                    if ($('.resultSet').DataTable().rows().data().count()==0) {
                                        $(".add-all").css('display','none');
                                    }
                                    if ($('#datatable').DataTable().data().count() > 0) {
                                        $("#compose").css('display', 'block');
                                    }
                                }
                            }
                        });
                    });
                }
            });

            $('#addMember').on('hidden.bs.modal', function () {
                $('.resultSet').DataTable().clear().draw();
                $("#searchTerm").val("");
                $(".result").css('display','none');
            });

            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(event) {
                if ($(event.target).closest(".mce-window").length) {
                    e.stopImmediatePropagation();
                }
            });

            /**
             * Upload script
             */
            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();
                var error = false;
                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 (!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 }}",
                            groupid: "{{ data.group.idGroup }}",
                            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");
                            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',
                            });
                        }
                    });
                }
            });
            {% endif %}

            $('[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 %}