<%=raw app.core.View.getTemplate( 'group-nav', { activeTab : 'details', group : group, currentProfile : currentProfile } ) %>
<div class="row">
    <div class="col-sm-12">
        <div class="card">
            <div class="team-header">
                <div class="pb_cover_v3 overflow-hidden cover-bg-indigo cover-bg-opacity-8 text-left pb_gradient_v1 pb_slant-white-small"
                     style="overflow: hidden; background: url(./img-system/<%= group.getBackgroundImgUrl() %>); background-position: center;background-repeat: no-repeat;background-size: cover;height: 135px;">
                </div>
                <div class="team-logo"
                     style="position: relative">
                    <img src="<%= group.getEmblemUrl() %>"
                         style="width: 128px; height: 128px; top: -64px; margin: auto; border: 4px solid white;z-index: 11; padding: 0; "
                         class="card-img-overlay"/>
                </div>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col">
                        <div class="text-center group-detail-name">
                            <%= group.getName() %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="text-center group-detail-category">
                            <%= group.getCategory() %>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col">
                        <div class="group-header">
                            <%= _lc( 'GROUP_ABOUT' ) %>
                        </div>
                        <div class="group-content" style="width: 100%; max-height: 300px; overflow-y: auto">
                            <%=raw group.getDescription() ? app.util.Helper.nl2br( group.getDescription() ) : '---' %>
                        </div>
                        <div class="group-header">
                            <%= _lc( 'GROUP_CONTACT_INFOS' ) %>
                        </div>
                        <div class="group-content">
                            <%=raw group.getContactInformation() ? app.util.Helper.nl2br( group.getContactInformation() ) : '---' %>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <div class="row">
                    <div class="col">
                        <% if ( currentProfile.isAdminOfGroup( group.getId() ) ) {  %>
                            <button type="button"
                                    data-id="btn-edit-group"
                                    class="btn btn-sm btn-primary">
                                <%= _lc( 'BTN_EDIT_GROUP' ) %>
                            </button>
                            <button type="button"
                                    data-id="btn-edit-group-photo"
                                    class="btn btn-sm btn-primary">
                                <%= _lc( 'BTN_EDIT_GROUP_PHOTO' ) %>
                            </button>
                        <% }    %>
                        <% if ( currentProfile.isOwnerOfGroup( group.getId() ) ) {  %>
                            <button type="button"
                                    data-id="btn-delete-group"
                                    class="float-right btn btn-sm btn-danger">
                                <%= _lc( 'BTN_DELETE_GROUP' ) %>
                            </button>
                        <% } else {   %>
                        <!--
                            <button type="button"
                                    data-id="btn-send-message-to-group-owner"
                                    class="btn btn-sm btn-primary">
                                <%= _lc( 'BTN_MESSAGE_TO_GROUP_ADMIN' ) %>
                            </button>
                            -->
                        <% }    %>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>