Migrate Username

${> header}$

<div class="container content__container content-slim">
    <div class="row">
        <div class="col-sm-12">
            <div class="form__wrapper">
                <h3 class="headline__text">${texts.hub-change-username-title}$</h3>
                ${#states.change_username.failed}$
                <div class="alert alert-danger d-flex justify-items-center" role="alert">
                    <svg xmlns="http://www.w3.org/2000/svg" width="2em" height="2em" fill="currentColor"
                         class="icon-lg my-auto bi bi-exclamation-triangle" viewBox="0 0 16 16">
                        <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016.146.146 0 0 1 .054.057l6.857 11.667c.036.06.035.124.002.183a.163.163 0 0 1-.054.06.116.116 0 0 1-.066.017H1.146a.115.115 0 0 1-.066-.017.163.163 0 0 1-.054-.06.176.176 0 0 1 .002-.183L7.884 2.073a.147.147 0 0 1 .054-.057zm1.044-.45a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566z"/>
                        <path d="M7.002 12a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 5.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995z"/>
                    </svg>
                    <span class="pl-3">${texts.hub-change-username-alert-error-text}$</span>
                </div>
                <div class="btn btn__wrapper">
                    <a href="${links.hub.cancel}$">
                        <button class="btn btn__cancel">${texts.hub-change-username-back}$</button>
                    </a>
                </div>
                ${/states.change_username.failed}$
                ${#states.change_username.successful}$
                <div class="alert alert-success d-flex justify-items-center" role="alert">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="2em" height="2em"
                         class="icon-lg my-auto bi bi-check-circle" viewBox="0 0 16 16">
                        <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
                        <path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/>
                    </svg>
                    <span class="pl-3">${texts.hub-change-username-alert-success-text}$</span>
                </div>
                <div class="btn btn__wrapper">
                    <a href="${links.hub.cancel}$">
                        <button class="btn btn__cancel">${texts.hub-change-username-back}$</button>
                    </a>
                </div>
                ${/states.change_username.successful}$
                ${#states.change_username.show_form}$
                <p class="changeUsername__text">
                    ${texts.hub-change-username-text}$
                </p>
                <form method="${forms.change_username.method}$" action="${forms.change_username.action}$">

                    <!-------------------------------------------->
                    <!------------------E-MAIL-------------------->
                    <!-------------------------------------------->
                    <label class="form__label">${texts.hub-change-username-email}$*</label>
                    <input placeholder="${texts.hub-register-email}$"
                           type="${forms.change_username.fields.username.type}$"
                           name="${forms.change_username.fields.username.name}$"
                           id="field_email"
                           class="form__input-field"
                           ${forms.change_username.fields.username.required}$>
                    <span class="email__message-error-text">
                        ${texts.hub-change-username-error-message}$
                    </span>
                    ${#errors.property_messages.new_username}$
                    <div>
                        <span id="username-error-message" class="error">${message}$</span>
                    </div>
                    ${/errors.property_messages.new_username}$
                    <div id="info_email_text" class="email__message-error-text">
                        ${texts.hub-change-username-error-not-changed}$
                    </div>

                    <!-------------------------------------------->
                    <!------------------BUTTONS------------------->
                    <!-------------------------------------------->
                    <div class="btn btn__wrapper">
                        <button id="change-username-btn" value="submit" type="submit" class="btn__submit" disabled>
                            ${texts.hub-change-username-change-btn}$
                        </button>
                    </div>
                    ${{forms.change_username.parameters}}$
                </form>
                ${/states.change_username.show_form}$
            </div>
        </div>
    </div>
</div>

<div class="footer mb-3 mt-3">
    <div class="footer__wrapper content-slim">
        <a href="${links.hub.cancel}$">
            <button class="btn btn__cancel">${texts.hub-change-username-cancel}$</button>
        </a>
    </div>
</div>

${> changeUsernameCheckInput}$

${> footer}$