${> header}$
<div class="container error-message-wrapper ${^options.hub.register.activated}$ content-slim ${/options.hub.register.activated}$"
     id="error-message-wrapper">
    <div class="row">
        <div class="col-sm-12">
            ${#errors.property_messages.hubuserinfo}$
            <div id="error_message" class="error">
                ${message}$
            </div>
            ${/errors.property_messages.hubuserinfo}$
        </div>
    </div>
</div>

<div class="container content__container ${^options.hub.register.activated}$ content-slim ${/options.hub.register.activated}$"
     id="form_wrapper">
    <div class="row">
        ${#options.hub.register.activated}$ <div class="col-md-6 col-sm-12"> ${/options.hub.register.activated}$ ${^options.hub.register.activated}$ <div class="col-sm-12"> ${/options.hub.register.activated}$
                <div class="form__wrapper">
                    <form method="${forms.login.method}$" action="${forms.login.action}$" id="form">
                        <h3 class="headline__text">${texts.brand-product}$ ${texts.hub-login-title}$</h3>

                        <!-------------------------------------------->
                        <!------------------E-MAIL-------------------->
                        <!-------------------------------------------->
                        <label class="form__label">${texts.email-address}$</label>
                        <input placeholder="${texts.hub-login-email-address-username}$" id="field_email"
                               type="${forms.login.fields.username.type}$"
                               name="${forms.login.fields.username.name}$"
                               value="${forms.login.fields.username.value}$"
                               class="form__input-field"
                               ${forms.login.fields.username.required}$>

                        <!-------------------------------------------->
                        <!------------------PASSWORD------------------>
                        <!-------------------------------------------->
                        <label class="form__label">${texts.hub-login-password}$</label>
                        <i class="bi bi-eye-slash toggle_password_icon" id="togglePassword"></i>
                        <input placeholder="${texts.hub-login-password}$"
                               type="${forms.login.fields.password.type}$"
                               name="${forms.login.fields.password.name}$"
                               value="${forms.login.fields.password.value}$"
                               id="field_password"
                               class="toggle_password_field form__input-field"
                               ${forms.login.fields.password.required}$>

                        <!-------------------------------------------->
                        <!------------------FORGET PASSWORD----------->
                        <!-------------------------------------------->
                        <button class="btn__forgot-password">
                          <a href="${links.hub.password_forgot}$">${texts.password-forgotten}$</a>
                        </button>

                        <!-------------------------------------------->
                        <!------------------BUTTONS------------------->
                        <!-------------------------------------------->
                        <div class="button__wrapper">
                          <div class="checkbox__wrapper">
                            <label class="checkbox__container">
                              <div class="form__checkbox-text">${texts.hub-login-remember-me}$</div>
                              <input id="remember_me"
                                     type="${forms.login.fields.cookie_lifetime.type}$"
                                     name="${forms.login.fields.cookie_lifetime.name}$"
                                     value="${forms.login.fields.cookie_lifetime.value}$"
                                     ${forms.login.fields.cookie_lifetime.checked}$>
                              <span class="checkmark"></span>
                            </label>
                          </div>
                          <div class="btn btn__wrapper">
                              <button type="submit" id="input_submit" class="btn__submit">
                                  ${texts.hub-login-submit-login}$
                              </button>
                          </div>
                        </div>

                        ${#data.providers}$
                        <a href="${link}$">
                            <div class="btn btn__cancel">
                                ${label}$
                            </div>
                        </a>
                        ${/data.providers}$
                        ${{forms.login.parameters}}$
                    </form>
                </div>
            </div>
            ${#options.hub.register.activated}$
            <div class="col-md-6 col-sm-12 overlay">
                <div class="overlay__wrapper">
                    <h4 class="overlay__heading">${texts.hub-login-register-text}$</h4>
                    <button class="btn btn__jumpTo" id="signUp"><a
                            href="${links.hub.register}$">${texts.register-title}$</a>
                    </button>
                </div>
            </div>
            ${/options.hub.register.activated}$
        </div>
    </div>
</div>

<div class="footer mb-3 mt-3">
    ${#options.hub.register.activated}$  <div class="footer__wrapper"> ${/options.hub.register.activated}$ ${^options.hub.register.activated}$  <div class="footer__wrapper content-slim"> ${/options.hub.register.activated}$
            <a href="${links.hub.cancel}$">
                <button class="btn btn__cancel">${texts.hub-login-cancel}$</button>
            </a>
        </div>
    </div>
</div>
${> footer}$