<%=raw app.core.View.getTemplate( 'group-nav', { activeTab : 'invite', 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">
                <%=raw app.core.View.getTemplate( 'gui-help-popover', { helpText: _lc( 'POPOVER_HELP_CONFIGURATION_GROUP_INVITE' ) } ) %>
                <h5 class="card-title">
                    <%= _lc( 'SHARE_INVITATION_LINK_HEADER' ) %>
                </h5>
                <p class="card-text">
                    <%=raw _lc( 'SHARE_INVITATION_LINK_DESCRIPTION' ) %>
                </p>
                <p class="card-text">
                    <%= _lc( 'SHARE_INVITATION_LINK_DESCRIPTION_STEPS' ) %>
                </p>
                <p class="card-text">
                    <%= _lc( 'SHARE_INVITATION_LINK_DESCRIPTION_MEMBERS_NOT_CHARGED' ) %>
                </p>
                <p class="card-text">
                    <%= _lc( 'SHARE_INVITATION_LINK_DESCRIPTION_GROUP_ID' ) %>
                </p>
                <p class="card-text text-center">
                    <span class="pb_font-32"><strong><%= group.getPublicId() %></strong></span>
                </p>
                <p class="card-text">
                    <%= _lc( 'SHARE_INVITATION_LINK_URL_1' ) %>
                </p>
                <div class="form-group">
                    <input type="text"
                           data-id="input-join-url"
                           class="form-control reverse pb_height-50"
                           value="<%= app.core.App.getConfig( 'url' ) %>/#/auth/join/<%= group.getPublicId() %>" />
                </div>
            </div>
            <div class="card-footer">
                <% if ( false === app.util.Environment.isNativeMobile() ) {   %>
                    <button type="button"
                            data-id="btn-copy-clipboard"
                            class="btn btn-primary btn-sm">
                        <i class="fas fa-copy"></i> <%= _lc( 'BTN_COPY_LINK_TO_CLIPBOARD' ) %>
                    </button>
                <% } else {   %>
                    <button type="button"
                            data-id="btn-share-invitation"
                            class="btn btn-primary btn-sm">
                        <i class="fas fa-share-alt"></i> <%= _lc( 'BTN_SHARE_INVITATION' ) %>
                    </button>
                <% }    %>
            </div>
        </div>
    </div>
</div>