{% extends "@admin/pages/abstract/dashboard.html.twig" %}

{% block stylesheets_page %}
    <!-- Page-specific CSS asset bundle -->
    {{ assets.css('css/form-widgets') | raw }}
{% endblock %}

{# Overrides blocks in head of base template #}
{% block page_title %}{{ translate("ORGANISATION", 2) }} | {{organisation.name}}{% endblock %}

{% block page_description %}{{ translate("ORGANISATION.INFO_PAGE", {name: organisation.name}) }}{% endblock %}

{% block body_matter %}
    <div class="row">
        <div class="col-lg-4">
            {% block summary %}
            <div id="view-organisation" class="box box-primary">
                <div class="box-header with-border">
                    <h3 class="box-title">{{translate('ORGANISATION.SUMMARY')}}</h3>
                    {% block menu_tools %}
                    {% if 'tools' not in tools.hidden %}
                        <div class="box-tools pull-right">
                            <div class="btn-group">
                                <button type="button" class="btn btn-sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                  <i class="fas fa-cog"></i> <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu box-tool-menu">
                                    {% block tools %}
                                        {% if 'edit' not in tools.hidden %}
                                        <li>
                                            <a href="#" class="js-organisation-edit" data-slug="{{organisation.slug}}">
                                                <i class="fas fa-edit fa-fw"></i> {{translate('EDIT')}}
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if checkAccess('leave_organisation') and isOrganisationMember(organisation) %}
                                        <li>
                                            <a href="#" class="js-organisation-leave" data-slug="{{organisation.slug}}">
                                                <i class="fas fa-door-open fa-fw"></i> {{translate('ORGANISATION.LEAVE')}}
                                            </a>
                                        </li>
                                        {% endif %}
                                        {% if organisation.flag_approved != 1 %}
                                            {% if checkAccess('approve_organisation') %}
                                            <li>
                                                <a href="#" class="js-organisation-approveRegistration" data-slug="{{organisation.slug}}">
                                                    <i class="fas fa-thumbs-up fa-fw"></i> {{translate('APPROVE')}}
                                                </a>
                                            </li>
                                            <li>
                                                <a href="#" class="js-organisation-denyRegistration" data-slug="{{organisation.slug}}">
                                                    <i class="fas fa-thumbs-down fa-fw"></i> {{translate('DENY')}}
                                                </a>
                                            </li>
                                            {% endif %}
                                        {% elseif 'delete' not in tools.hidden %}
                                        <li>
                                            <a href="#" class="js-organisation-delete" data-slug="{{organisation.slug}}">
                                                <i class="fas fa-trash-alt fa-fw"></i> {{translate('DELETE')}}
                                            </a>
                                        </li>
                                        {% endif %}
                                    {% endblock %}
                                </ul>
                            </div>
                        </div>
                    {% endif %}
                    {% endblock %}
                </div>
                <div class="box-body box-profile">
                    <h3 class="profile-username text-center">{{organisation.name}}</h3>

                    {% if 'description' not in fields.hidden %}
                        <p class="text-muted">
                            {{organisation.description}}
                        </p>
                    {% endif %}
                    {% if organisation.flag_approved != 1 %}
                        <hr>
                        <h4 class="text-danger text-center">
                            {{ translate('ORGANISATION.REGISTRATION.PENDING') }}
                        </h4>
                        <div class="text-center">
                        {% if checkAccess('approve_organisation') %}
                            <button type="button" class="btn btn-success js-organisation-approveRegistration" data-slug="{{organisation.slug}}">{{translate('APPROVE')}}</button>
                            <button type="button" class="btn btn-danger js-organisation-denyRegistration" data-slug="{{organisation.slug}}">{{translate('DENY')}}</button>
                        {% elseif isOrganisationAdmin(organisation) %}
                            <button type="button" class="btn btn-danger js-organisation-cancelRegistration" data-slug="{{organisation.slug}}">{{translate('CANCEL_REGISTRATION')}}</button>
                        {% endif %}
                        </div>
                    {% endif %}
                    {% if 'members' not in fields.hidden %}
                        <hr>
                        <strong><i class="fas fa-wrench margin-r-5"></i> {{ translate('ADMIN', 2)}}</strong>
                        <p class="badge bg-blue box-profile-property">
                            {{organisation.administrators.count}}
                        </p>
                        <br />
                        <br />
                        <strong><i class="fas fa-users margin-r-5"></i> {{ translate('MEMBER', 2)}}</strong>
                        <p class="badge bg-blue box-profile-property">
                            {{organisation.members.count}}
                        </p>
                    {% endif %}
                    {% block organisation_profile %}{% endblock %}
                    {% if checkAccess('leave_organisation') and (isOrganisationMember(organisation)) %}
                        <hr>
                        <div class="text-center">
                            <button type="button" class="btn btn-danger js-organisation-leave" data-slug="{{organisation.slug}}">{{translate('ORGANISATION.LEAVE')}}</button>
                        </div>
                    {% endif %}
                </div>
            </div>
            {% endblock %}
        </div>
        <div class="col-lg-8">
            {% block members %}
            <div id="widget-organisation-members" class="box box-primary">
                <div class="box-header">
                    <h3 class="box-title"><i class="fas fa-fw fa-user"></i> {{translate('MEMBER', 2)}}</h3>
                    {% include "tables/table-tool-menu.html.twig" %}
                </div>
                <div class="box-body">
                    {% include "tables/organisation-members.html.twig" with {
                            "table" : {
                                "id" : "table-organisation-members"
                            }
                        }
                    %}
                </div>
            </div>
            {% endblock %}
        </div>
    </div>
{% endblock %}

{% block scripts_page %}
    <!-- Include page variables -->
    <script>
    {% include "pages/partials/page.js.twig" %}

    // Add organisation slug
    page = $.extend(
        true, // deep extend
        {
            organisation_slug: "{{organisation.slug}}",
            delete_redirect: "{{delete_redirect}}",
            leave_redirect: "{{leave_redirect}}"
        },
        page
    );
    </script>

    <!-- Include form widgets JS -->
    {{ assets.js('js/form-widgets') | raw }}

    <!-- Include page-specific JS -->
    {{ assets.js('js/pages/organisation') | raw }}
{% endblock %}