<% var team = new app.model.Group( joinTeamData ); %>
<div 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">
        <%=raw _lc( 'JOIN_HEADER', [ team.getName() ] ) %>
    </h2>
    <p class="text-center">
        <%=raw _lc( 'JOIN_WELCOME_TEXT', [ team.getName() ] ) %>
    </p>
    <p class="text-center">
        <%=raw _lc( 'JOIN_WELCOME_INSTRUCTIONS' ) %>
    </p>
    <div class="numberCircle">1</div>
    <p class="text-center">
        <%=raw _lc( 'JOIN_STEP_1' ) %>
    </p>
    <p>
        <a href="https://itunes.apple.com/de/app/probuddy/id1463427478?mt=8" target="_blank">
            <img src="img-system/app_store.png" class="img-fluid" />
        </a>
        <br />
        <a href="https://play.google.com/store/apps/details?id=de.probuddy.debug" target="_blank">
            <img src="img-system/play_store.png" class="img-fluid" />
        </a>
    </p>
    <div class="numberCircle">2</div>
    <p class="text-center">
        <%=raw _lc( 'JOIN_STEP_2', [ team.getName() ]  ) %>
    </p>
    <p class="text-center pb_font-32">
        <%= team.getPublicId() %>
    </p>
    <p class="text-center">
        Fertig!
    </p>
    <hr />
    <!--
    <div class="numberCircle">?</div>
    -->
    <p class="text-center text-muted small">
        <%=raw _lc( 'JOIN_WEB_TEXT' ) %><br />
        <a href="#/auth/joinweb/<%= team.getPublicId() %>"><%= _lc( 'JOIN_WEB_LINKTEXT' ) %></a>
    </p>
</div>