{include file="orderforms/hostique/common.tpl"}

<div id="order-standard_cart" class="order-shell order-shell--domain-transfer-modern">
    <section class="hostique-transfer-hero-card">
        <div class="hostique-transfer-hero-card__copy">
            <h1>{$LANG.transferdomain}</h1>
            <p>{lang key='orderForm.transferExtend'}*</p>
        </div>
        <a href="{$WEB_ROOT}/cart.php?a=view" class="hostique-transfer-hero-card__cta">
            <i class="fas fa-shopping-cart"></i>
            <span>{$LANG.cartreviewcheckout}</span>
        </a>
        <div class="hostique-transfer-hero-card__art" aria-hidden="true"></div>
    </section>

    <section class="hostique-transfer-shell-card">
        <div class="hostique-transfer-shell-card__icon">
            <i class="fas fa-globe"></i>
        </div>
        <div class="hostique-transfer-shell-card__intro">
            <h2>Transfer your domain</h2>
            <p>Extend your domain and keep everything under one roof.</p>
        </div>

        <form method="post" action="{$WEB_ROOT}/cart.php" id="frmDomainTransfer" class="hostique-transfer-form">
            <input type="hidden" name="a" value="addDomainTransfer">

            <div class="hostique-transfer-form__group">
                <label for="inputTransferDomain">{lang key='domainname'}</label>
                <div class="hostique-transfer-field">
                    <span class="hostique-transfer-field__icon" aria-hidden="true">
                        <i class="fas fa-globe"></i>
                    </span>
                    <input
                        type="text"
                        class="form-control"
                        name="domain"
                        id="inputTransferDomain"
                        value="{$lookupTerm}"
                        placeholder="{lang key='yourdomainplaceholder'}.{lang key='yourtldplaceholder'}"
                        data-toggle="tooltip"
                        data-placement="left"
                        data-trigger="manual"
                        title="{lang key='orderForm.enterDomain'}"
                    />
                </div>
            </div>

            <div class="hostique-transfer-form__group">
                <div class="hostique-transfer-form__label-row">
                    <label for="inputAuthCode">{lang key='orderForm.authCode'} (EPP Code)</label>
                    <span class="hostique-transfer-form__help" data-toggle="tooltip" data-placement="left" title="{lang key='orderForm.authCodeTooltip'}">
                        <i class="fas fa-question-circle"></i>
                        <span>{lang key='orderForm.help'}</span>
                    </span>
                </div>
                <div class="hostique-transfer-field">
                    <span class="hostique-transfer-field__icon" aria-hidden="true">
                        <i class="fas fa-key"></i>
                    </span>
                    <input
                        type="text"
                        class="form-control"
                        name="epp"
                        id="inputAuthCode"
                        placeholder="{lang key='orderForm.authCodePlaceholder'}"
                        data-toggle="tooltip"
                        data-placement="left"
                        data-trigger="manual"
                        title="{lang key='orderForm.required'}"
                    />
                </div>
            </div>

            <div id="transferUnavailable" class="alert alert-warning slim-alert text-center w-hidden"></div>

            {if $captcha->isEnabled() && !$captcha->recaptcha->isEnabled()}
                <div class="captcha-container hostique-transfer-form__captcha" id="captchaContainer">
                    <div class="default-captcha">
                        <p>{lang key="cartSimpleCaptcha"}</p>
                        <div>
                            <img id="inputCaptchaImage" src="{$systemurl}includes/verifyimage.php" />
                            <input id="inputCaptcha" type="text" name="code" maxlength="6" class="form-control input-sm" data-toggle="tooltip" data-placement="right" data-trigger="manual" title="{lang key='orderForm.required'}" />
                        </div>
                    </div>
                </div>
            {elseif $captcha->isEnabled() && $captcha->recaptcha->isEnabled() && !$captcha->recaptcha->isInvisible()}
                <div class="hostique-transfer-form__captcha text-center">
                    <div class="form-group recaptcha-container" id="captchaContainer"></div>
                </div>
            {/if}

            <div class="hostique-transfer-form__actions">
                <button type="submit" id="btnTransferDomain" class="btn btn-primary btn-transfer{$captcha->getButtonClass($captchaForm)}">
                    <span class="loader w-hidden" id="addTransferLoader">
                        <i class="fas fa-fw fa-spinner fa-spin"></i>
                    </span>
                    <span id="addToCart">{lang key='orderForm.addToCart'}</span>
                </button>
            </div>
        </form>

        <p class="hostique-transfer-shell-card__note">* {lang key='orderForm.extendExclusions'}</p>
    </section>

    <section class="hostique-transfer-info-grid">
        <article class="hostique-transfer-info-card">
            <span class="hostique-transfer-info-card__icon"><i class="fas fa-shield-alt"></i></span>
            <div class="hostique-transfer-info-card__copy">
                <h3>{lang key='orderForm.authCode'}</h3>
                <p>To initiate a transfer you will need the authorization code from your current registrar.</p>
            </div>
        </article>
        <article class="hostique-transfer-info-card">
            <span class="hostique-transfer-info-card__icon"><i class="fas fa-calendar-check"></i></span>
            <div class="hostique-transfer-info-card__copy">
                <h3>{$LANG.domainrenewal}</h3>
                <p>When the transfer completes, we automatically extend your domain by 1 year.</p>
            </div>
        </article>
    </section>

    <section class="hostique-transfer-secure-card">
        <span class="hostique-transfer-secure-card__icon"><i class="fas fa-lock"></i></span>
        <div class="hostique-transfer-secure-card__copy">
            <h3>Secure &amp; Protected</h3>
        </div>
    </section>

    <section class="hostique-transfer-support-shell">
        <article class="hostique-transfer-support-card">
            <span class="hostique-transfer-support-card__icon"><i class="far fa-comment"></i></span>
            <div class="hostique-transfer-support-card__copy">
                <h3>Need Help?</h3>
                <p>Our support team is here to help you with your domain transfer.</p>
                <a href="{$WEB_ROOT}/submitticket.php" class="hostique-transfer-support-card__link">Open a Support Ticket <i class="fas fa-arrow-right"></i></a>
            </div>
        </article>
        <article class="hostique-transfer-support-card hostique-transfer-support-card--benefits">
            <span class="hostique-transfer-support-card__icon"><i class="fas fa-check-circle"></i></span>
            <div class="hostique-transfer-support-card__copy">
                <h3>Why Transfer to Us?</h3>
                <ul class="hostique-transfer-benefits">
                    <li><i class="fas fa-check-circle"></i><span>Easy management from your dashboard</span></li>
                    <li><i class="fas fa-check-circle"></i><span>No hidden fees</span></li>
                    <li><i class="fas fa-check-circle"></i><span>24/7 expert support</span></li>
                </ul>
            </div>
        </article>
    </section>
</div>
