
<div class="row" align="center" style="max-width: 100%;">
    <img class="apLogInLogo" src="img/WebManagementLogo.png" alt="">
    <img class="israCardLogInLogo" src="img/israCardLogInLogo.png" alt="" style="display: none;">
</div>

<div class="log-in-card" align="center" style="padding-top: 6%;" <%= (App.rtl ? 'style="direction:rtl"' : '') %>>
<form id="log-in-form-content">
    
    <div class="row" style="margin-bottom: 0px;">
        <div align="center">
            <div class="input-field col s12 m12">
                <input placeholder="{Literal}Password{/Literal}" id="password" type="password" class="validate" autofocus="autofocus" style="border-bottom: 1px solid #4abd98; -webkit-box-shadow: 0 1px 0 0 #4abd98; box-shadow: 0 1px 0 0 #4abd98;">
                <div class="progress" style="margin:0;visibility: hidden;">
                    <div class="indeterminate"></div>
                </div>
            </div>
        </div>
    </div>

    <div class="row" id="logInButtons">
        <div align="center" style="padding-left: 125px; padding-right: 125px;">
            <a class="waves-effect waves-light btn-large round green save-button" style="background-color: #4abd98 !important; border-radius: 5px; font-weight: bold;">{Literal}LOG IN{/Literal}</a>
        </div>
    </div>
    <div class="row">
        <a href="javascript:void(0)" id="resetPassword">{Literal}Reset Password{/Literal}</a>
    </div>
</form>

<div id="new-password-form-modal" class="modal modal-fixed-footer">
    <form id="new-password-form-content" class="container" style="margin-top: 10%;">
        <h4>{Literal}Create new password for AccuPOS Management{/Literal}</h4>
        <p>{Literal}Your password is not secure, please update to a stronger password.{/Literal}</p>
        <div class="row">
            <div class="input-field col s12 m6 offset-m3">
                <input autocomplete="new-password" id="newPassword" type="password" class="filled-in validate">
                <label class="active" for="newPassword">{Literal}New Password{/Literal}</label>
                <span class="helper-text red-text"></span>
            </div>
        </div>
        <div class="row">
            <div class="input-field col s12 m6 offset-m3">
                <input autocomplete="new-password" id="confirmPassword" type="password" class="filled-in validate">
                <label class="active" for="confirmPassword">{Literal}Confirm Password{/Literal}</label>
                <span class="helper-text red-text"></span>
            </div>
        </div>
    
        <div>
            <div class="col s12 m6 offset-m3">
                <a id="newPasswordUpdate" class="waves-effect waves-light btn-large round green" style="background-color: #4abd98 !important; border-radius: 5px; font-weight: bold;">{Literal}Update{/Literal}</a>
            </div>
            <br>
        <p id="new-password-message"></p>
            <div class="col s12 m6 offset-m3">
                <a id="continueWithoutUpdate" class="waves-effect waves-light btn white ap-light-blue-text round" style="border-radius: 5px;">{Literal}Continue Without Update{/Literal}</a>
            </div>
        </div>
    </form>
</div>

<div id="last-chance-warning-modal" class="modal message-modal">
    <h4>{Literal}Warning{/Literal}</h4>
    <div class="container" style="margin-top: 10%;">
        <p>{Literal}This is your last login with old password.{/Literal}</p>
        <p>{Literal}Continuing without updating password will lock you out.{/Literal}</p>
        <p>{Literal}Are you sure you want to continue?{/Literal}</p>
    </div>

    <div class="modal-footer">
        <a id="confirmContinueWithoutUpdateNo" href="javascript:void(0)" class="waves-effect waves-green btn-flat">{Literal}No{/Literal}</a>
        <a id="confirmContinueWithoutUpdateYes" href="javascript:void(0)" class="waves-effect waves-green btn-flat">{Literal}Yes{/Literal}</a>
    </div>
</div>

<div id="reset-password-modal" class="modal modal-fixed-footer">
    <form id="new-password-form-content" class="container" style="margin-top: 6%;">
        <h4>{Literal}Reset Password for AccuPOS Management{/Literal}</h4>
        
        <div id="resetPart1">
            <div class="row">
                <p>{Literal}An email with temporary reset passcode will be sent to the company email{/Literal}</p>
                <a id="sendResetEmail" class="waves-effect waves-light btn-large round green" style="background-color: #4abd98 !important; border-radius: 5px; font-weight: bold;">{Literal}send{/Literal}</a>
            </div>
        </div>
        <div id="resetPart2">
            <div class="row">
                <div class="input-field col s12 m6 offset-m3">
                    <input id="passcode" type="password" class="filled-in validate">
                    <label class="active" for="passcode">{Literal}Enter Passcode{/Literal}</label>
                    <span class="helper-text red-text"></span>
                </div>
            </div>
            <div class="row">
                <div class="col s12 m6 offset-m3">
                    <a id="validatePasscode" class="waves-effect waves-light btn-large round green" style="background-color: #4abd98 !important; border-radius: 5px; font-weight: bold;">{Literal}Next{/Literal}</a>
                </div>
            </div>
        </div>
        <div id="resetPart3">
            <div class="row">
                <div class="input-field col m6 offset-m3">
                    <select id="reset-select-user">
                    </select>
                    <label>{Literal}User{/Literal}</label>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m6 offset-m3">
                    <input autocomplete="new-password" id="newResetPassword" type="password" class="filled-in validate">
                    <label class="active" for="newResetPassword">{Literal}New Password{/Literal}</label>
                    <span class="helper-text red-text"></span>
                </div>
            </div>
            <div class="row">
                <div class="input-field col s12 m6 offset-m3">
                    <input autocomplete="new-password" id="confirmResetPassword" type="password" class="filled-in validate">
                    <label class="active" for="confirmResetPassword">{Literal}Confirm Password{/Literal}</label>
                    <span class="helper-text red-text"></span>
                </div>
            </div>

            <div class="col s12 m6 offset-m3">
                <a id="updatePassword" class="waves-effect waves-light btn-large round green" style="background-color: #4abd98 !important; border-radius: 5px; font-weight: bold;">{Literal}Update{/Literal}</a>
            </div>
        </div>
    </form>
    <div class="modal-footer">
        <a href="javascript:void(0)" class="modal-close waves-effect waves-green btn-flat">{Literal}Close{/Literal}</a>
    </div>
</div>