<section data-id="section-registration-form">
    <form data-id="form-register"
          class="bg-white rounded pb_form_v1 form-auth-register needs-validation"
          novalidate>
        <h2 class="mb-4 mt-0 text-center">
            <%= _lc( 'REGISTER_HEADER' ) %>
        </h2>
        <p class="text-center">
            <%=raw _lc( 'REGISTER_HEADER_DESCRIPTION' ) %>
        </p>
        <div class="form-group">
            <label for="input-register-email" class="sr-only">
                <%= _lc( 'REGISTER_TEAMNAME' ) %>
            </label>
            <input type="text"
                   id="input-register-teamname"
                   data-id="input-register-teamname"
                   name="input-register-teamname"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'REGISTER_TEAMNAME' ) %>"
                   minlength="3"
                   maxlength="32"
                   required
                   autofocus />
            <div class="valid-feedback">
                <%= _lc( 'REGISTER_LOOKS_GOOD' ) %>
            </div>
            <div class="invalid-feedback">
                <%= _lc( 'REGISTER_VALIDATION_ERROR_TEAMNAME' ) %>
            </div>
        </div>
        <div class="form-group">
            <label for="input-register-firstname"
                   data-id=""
                   class="sr-only">
                <%= _lc( 'REGISTER_FIRSTNAME' ) %>
            </label>
            <input type="text"
                   id="input-register-firstname"
                   data-id="input-register-firstname"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'LOGIN_FIRSTNAME' ) %>"
                   required autofocus />
        </div>
        <div class="form-group">
            <label for="input-register-lastname"
                   data-id=""
                   class="sr-only">
                <%= _lc( 'REGISTER_LASTNAME' ) %>
            </label>
            <input type="text"
                   id="input-register-lastname"
                   data-id="input-register-lastname"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'LOGIN_LASTNAME' ) %>"
                   required />
        </div>
        <div class="form-group">
            <label for="input-register-email" class="sr-only">
                <%= _lc( 'REGISTER_EMAIL_ADDRESS' ) %>
            </label>
            <input type="email"
                   id="input-register-email"
                   data-id="input-register-email"
                   name="input-register-email"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'REGISTER_EMAIL_ADDRESS' ) %>"
                   required
                   autofocus />
            <div class="valid-feedback">
                <%= _lc( 'REGISTER_LOOKS_GOOD' ) %>
            </div>
            <div class="invalid-feedback">
                <%= _lc( 'REGISTER_VALIDATION_ERROR_EMAIL' ) %>
            </div>
        </div>
        <div class="form-group">
            <label for="input-register-password"
                   class="sr-only">
                <%= _lc( 'REGISTER_PASSWORD' ) %>
            </label>
            <input type="password"
                   id="input-register-password"
                   name="input-register-password"
                   data-id="input-register-password"
                   class="form-control reverse pb_height-50"
                   placeholder="<%= _lc( 'REGISTER_PASSWORD' ) %>"
                   minlength="4"
                   maxlength="32"
                   required
                   />
            <div class="invalid-feedback">
                <%= _lc( 'REGISTER_VALIDATION_ERROR_PASSWORD' ) %>
            </div>
        </div>
        <div class="form-group">
            <div class="pb_select-wrap">
                <select class="form-control pb_height-50 reverse"
                        name="select-register-industry"
                        data-id="select-register-industry"
                        required>
                    <option value="" <%= !theme ? "selected" : ""%>><%= _lc( 'REGISTER_CHOOSE_INDUSTRY' ) %></option>
                    <option value="FITNESS"><%= _lc( 'REGISTER_INDUSTRY_FITNESS' ) %></option>
                    <option value="DOGSCHOOL"><%= _lc( 'REGISTER_INDUSTRY_DOGSCHOOL' ) %></option>
                    <option value="YOGA"<%= ( theme === 'yoga' ) ? "selected" : '' %>><%= _lc( 'REGISTER_INDUSTRY_YOGA' ) %></option>
                    <option value="HORSES" <%= ( theme === 'horses' ) ? "selected" : '' %>>Reitschule & Pferdeställe</option>
                    <option value="TRAVEL">Reiseveranstalter</option>
                    <option value="COMPANYSPORT">Betriebssport</option>
                    <option value="FIREFIGHTER"><%= _lc( 'REGISTER_INDUSTRY_FIREFIGHTER' ) %></option>
                    <option value="CHARITY"><%= _lc( 'REGISTER_INDUSTRY_CHARITY' ) %></option>
                    <option value="PERSONAL_TRAINING"><%= _lc( 'REGISTER_INDUSTRY_PERSONAL_TRAINING' ) %></option>
                    <option value="HEALTH"><%= _lc( 'REGISTER_INDUSTRY_DOCTORS' ) %></option>
                    <option value="OTHER"><%= _lc( 'REGISTER_INDUSTRY_OTHERS' ) %></option>
                </select>
                <div class="invalid-feedback">
                    <%= _lc( 'REGISTER_VALIDATION_ERROR_INDUSTRY' ) %>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="custom-control custom-checkbox my-1 mr-sm-2">
                <input type="checkbox"
                       name="register-accept-newsletter"
                       data-id="register-accept-newsletter"
                       id="register-accept-newsletter"
                       class="custom-control-input"
                       checked="checked"
                >
                <label class="custom-control-label"
                       for="register-accept-newsletter"><%= _lc( 'REGISTER_ACCEPT_NEWSLETTER' ) %></label>
            </div>
        </div>
        <div class="form-group">
            <div class="custom-control custom-checkbox my-1 mr-sm-2">
                <input type="checkbox"
                       name="register-accept-legal"
                       data-id="register-accept-legal"
                       id="register-accept-legal"
                       class="custom-control-input"
                       required
                >
                <label class="custom-control-label"
                       for="register-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-register"
                    type="button">
                <%= _lc( 'REGISTER_SIGN_UP' ) %>
            </button>
        </div>
        <p class="text-center">
            <a href="#/auth/login"><%= _lc( 'REGISTER_LINK_TO_LOGIN' ) %></a>
        </p>
    </form>
</section>
<section data-id="section-registration-done"
         style="display: none">
    <form data-id="form-register"
          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>