<% var team = new app.model.Group( joinTeamData ); %>
<section data-id="section-form-join">
    <form data-id="form-startjoin"
          class="bg-white rounded pb_form_v1 form-auth-login needs-validation"
          style="margin-top: 64px"
          novalidate>
        <div class="team-logo"
             style="position: relative; margin-bottom: 64px">
            <img src="<%= team.getEmblemUrl() %>"
                 style="width: 128px; height: 128px; top: -64px; margin: auto; border: 4px solid white;z-index: 11; padding: 0; "
                 class="card-img-overlay"/>
        </div>
        <h2 class="mb-4 mt-0 text-center">
            <%= _lc( 'SOON_DONE' ) %>
        </h2>
        <p class="text-center">
            <%=raw _lc( 'START_JOIN_INSTRUCTION' ) %>
        </p>
        <div class="form-group">
            <label for="input-startjoin-firstname"
                   data-id=""
                   class="sr-only">
                <%= _lc( 'LOGIN_FIRSTNAME' ) %>
            </label>
            <input type="text"
                   id="input-startjoin-firstname"
                   data-id="input-startjoin-firstname"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'LOGIN_FIRSTNAME' ) %>"
                   required autofocus />
        </div>
        <div class="form-group">
            <label for="input-startjoin-lastname"
                   data-id=""
                   class="sr-only">
                <%= _lc( 'LOGIN_LASTNAME' ) %>
            </label>
            <input type="text"
                   id="input-startjoin-lastname"
                   data-id="input-startjoin-lastname"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'LOGIN_LASTNAME' ) %>"
                   required />
        </div>
        <div class="form-group">
            <label for="input-startjoin-email"
                   data-id=""
                   class="sr-only">
                <%= _lc( 'LOGIN_EMAIL' ) %>
            </label>
            <input type="email"
                   id="input-startjoin-email"
                   data-id="input-startjoin-email"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'LOGIN_EMAIL' ) %>"
                   required />
        </div>
        <div class="form-group">
            <label for="input-startjoin-password"
                   class="sr-only">
                <%= _lc( 'LOGIN_PASSWORD' ) %>
            </label>
            <input type="password"
                   id="input-startjoin-password"
                   data-id="input-startjoin-password"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'LOGIN_PASSWORD' ) %>"
                   minlength="4"
                   maxlength="32"
                   required />
        </div>
        <div class="form-group">
            <div class="custom-control custom-checkbox my-1 mr-sm-2">
                <input type="checkbox"
                       name="startjoin-accept-legal"
                       data-id="startjoin-accept-legal"
                       id="startjoin-accept-legal"
                       class="custom-control-input"
                       required
                >
                <label class="custom-control-label"
                       for="startjoin-accept-legal"><%=raw _lc( 'REGISTER_ACCEPT_LEGALS', [ '<a href="https://www.tbuddy.de/agb-probuddy/" target="_blank">' + _lc( 'TOC' ) + '</a>', '<a href="https://www.tbuddy.de/datenschutz-probuddy/">' + _lc( 'DATA_PRIVACY' ) + '</a>'  ] ) %></label>
            </div>
        </div>
        <div class="form-group">
            <button class="btn btn-lg btn-primary btn-block"
                    data-id="btn-startjoin"
                    type="button">
                <%= _lc( 'BTN_JOINWEB' ) %>
            </button>
        </div>
    </form>
</section>
<section data-id="section-validation-info"
         style="display: none">
    <form data-id="form-validation-info"
          class="bg-white rounded pb_form_v1 form-auth-register needs-validation"
          novalidate>
        <h2 class="mb-4 mt-0 text-center">
            <%= _lc( 'REGISTER_SUCCESS_HEADER' ) %>
        </h2>
        <p class="text-center">
            <%=raw _lc( 'REGISTER_SUCCESS_HEADER_DESCRIPTION' ) %>
        </p>
        <p class="text-center">
            <a href="#/auth/login"><%= _lc( 'BACK_TO_LOGIN' ) %></a>
        </p>
    </form>
</section>