<div class="providerLinkingFeedback"></div>

<section class="auth-shell">
    <div class="auth-shell__intro dashboard-panel">

        <h2 class="auth-shell__title">{lang key='clientareahomeloginbtn'}</h2>
        <p class="auth-shell__copy">{lang key='clientareahomelogin'}</p>

        <div class="auth-shell__hero-art" aria-hidden="true">
            <span class="auth-shell__hero-orbit auth-shell__hero-orbit--one"></span>
            <span class="auth-shell__hero-orbit auth-shell__hero-orbit--two"></span>
            <span class="auth-shell__hero-node auth-shell__hero-node--one"></span>
            <span class="auth-shell__hero-node auth-shell__hero-node--two"></span>
            <span class="auth-shell__hero-node auth-shell__hero-node--three"></span>
            <span class="auth-shell__hero-cloud"><i class="fas fa-cloud"></i></span>
            <span class="auth-shell__hero-server auth-shell__hero-server--one"><i class="fas fa-server"></i></span>
            <span class="auth-shell__hero-server auth-shell__hero-server--two"><i class="fas fa-server"></i></span>
            <span class="auth-shell__hero-shield"><i class="fas fa-shield-alt"></i></span>
        </div>

        <div class="auth-shell__features auth-shell__features--stacked">
            <div class="auth-shell__feature">
                <span class="auth-shell__feature-icon"><i class="fas fa-shield-alt"></i></span>
                <div>
                    <strong>{lang key='homepage.manageServices'}</strong>
                    <p>{lang key='clientareanavservices'}</p>
                </div>
            </div>
            <div class="auth-shell__feature">
                <span class="auth-shell__feature-icon"><i class="fas fa-tachometer-alt"></i></span>
                <div>
                    <strong>{lang key='homepage.manageDomains'}</strong>
                    <p>{lang key='clientareanavdomains'}</p>
                </div>
            </div>
            <div class="auth-shell__feature">
                <span class="auth-shell__feature-icon"><i class="fas fa-clock"></i></span>
                <div>
                    <strong>{lang key='supportticketspagetitle'}</strong>
                    <p>{lang key='supportticketssystemdescription'}</p>
                </div>
            </div>
            <div class="auth-shell__feature">
                <span class="auth-shell__feature-icon"><i class="fas fa-headset"></i></span>
                <div>
                    <strong>{lang key='knowledgebasetitle'}</strong>
                    <p>{lang key='knowledgebasedescription'}</p>
                </div>
            </div>
        </div>
		
		
		
		

        <p class="auth-shell__copyright">&copy; {$smarty.now|date_format:"%Y"} {$brandName|default:'Nebulix'}</p>
    </div>

    <form method="post" action="{routePath('login-validate')}" class="login-form dashboard-panel auth-form" role="form">
        <div class="auth-form__header">
            <h3 class="auth-form__title">{lang key='loginbutton'}</h3>
            <p class="auth-form__subtitle">{lang key='clientareahomelogin'}</p>
        </div>

        {include file="$template/includes/flashmessage.tpl"}

        <div class="form-group">
            <label for="inputEmail" class="form-control-label">{lang key='clientareaemail'}</label>
            <div class="input-group input-group-merge auth-input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-user"></i></span>
                </div>
                <input type="email" class="form-control" name="username" id="inputEmail" placeholder="{lang key='clientareaemail'}" autofocus>
            </div>
        </div>

        <div class="form-group mb-4 focused">
            <div class="d-flex align-items-center justify-content-between">
                <label for="inputPassword" class="form-control-label">{lang key='clientareapassword'}</label>
                <div class="mb-2">
                    <a href="{$WEB_ROOT}/pwreset.php" class="small text-muted" tabindex="-1">{lang key='forgotpw'}</a>
                </div>
            </div>
            <div class="input-group input-group-merge auth-input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fas fa-key"></i></span>
                </div>
                <input type="password" class="form-control pw-input" name="password" id="inputPassword" placeholder="{lang key='clientareapassword'}" autocomplete="off">
                <div class="input-group-append">
                    <button class="btn btn-default btn-reveal-pw auth-reveal-btn" type="button" tabindex="-1">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
            </div>
        </div>

        {if $captcha->isEnabled()}
            {include file="$template/includes/captcha.tpl"}
        {/if}




        <div class="auth-form__actions">
            <button id="login" type="submit" class="btn btn-brand auth-submit-btn{$captcha->getButtonClass($captchaForm)}">
                {lang key='loginbutton'}
            </button>
            <label class="auth-remember">
                <input type="checkbox" class="form-check-input" name="rememberme" />
                <span>{lang key='loginrememberme'}</span>
            </label>
        </div>

        <div class="auth-form__footer">
            <span>{lang key='userLogin.notRegistered'}</span>
            <a href="{$WEB_ROOT}/register.php">{lang key='userLogin.createAccount'}</a>
        </div>




        <div class="auth-form__meta">
            <div class="auth-form__meta-item">
                <i class="fas fa-shield-alt"></i>
                <div>
                    <strong>{lang key='loginbutton'}</strong>
                    <span>{lang key='clientareaemail'}</span>
                </div>
            </div>
            <div class="auth-form__meta-item">
                <i class="fas fa-check-circle"></i>
                <div>
                    <strong>{lang key='homepage.manageServices'}</strong>
                    <span>{lang key='clientareanavservices'}</span>
                </div>
            </div>
            <div class="auth-form__meta-item">
                <i class="fas fa-headset"></i>
                <div>
                    <strong>{lang key='supportticketspagetitle'}</strong>
                    <span>{lang key='clientareanavsupporttickets'}</span>
                </div>
            </div>
        </div>
		
		
		
    </form>
</section>

{include file="$template/includes/linkedaccounts.tpl" linkContext="login" customFeedback=true}

