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

<script>
var _localLang = {
    'addToCart': '{$LANG.orderForm.addToCart|escape}',
    'addedToCartRemove': '{$LANG.orderForm.addedToCartRemove|escape}'
}
</script>

<div id="order-standard_cart" class="order-shell order-shell--confdomains-modern">
    <section class="hostique-confdomains-hero-card">
        <div class="hostique-confdomains-hero-card__copy">
            <h1>{$LANG.cartdomainsconfig}</h1>
            <p>{$LANG.orderForm.reviewDomainAndAddons}</p>
        </div>
        <div class="hostique-confdomains-hero-card__summary">
            <i class="fas fa-clipboard-list"></i>
            <span>{$LANG.ordersummary}</span>
        </div>
    </section>

    <form method="post" action="{$smarty.server.PHP_SELF}?a=confdomains" id="frmConfigureDomains" class="hostique-confdomains-form">
        <input type="hidden" name="update" value="true" />

        {if $errormessage}
            <div class="alert alert-danger hostique-confdomains-alert" role="alert">
                <p>{$LANG.orderForm.correctErrors}:</p>
                <ul>
                    {$errormessage}
                </ul>
            </div>
        {/if}

        <section class="hostique-confdomains-section-card">
            <div class="hostique-confdomains-section-head">
                <h2>Your Domains</h2>
                <p>Review the domains you want to register and the available add-ons.</p>
            </div>

            <div class="hostique-confdomains-list">
                {foreach $domains as $num => $domain}
                    <article class="hostique-confdomains-domain-card">
                        <div class="hostique-confdomains-domain-card__main">
                            <span class="hostique-confdomains-domain-card__icon" aria-hidden="true">
                                <i class="fas fa-globe"></i>
                            </span>

                            <div class="hostique-confdomains-domain-card__domain">
                                <strong>{$domain.domain|upper}</strong>
                            </div>

                            <div class="hostique-confdomains-domain-card__period">
                                <strong>{$domain.regperiod} {$LANG.orderyears}</strong>
                                <span>Registration</span>
                            </div>

                            <div class="hostique-confdomains-domain-card__hosting">
                                <strong>{$LANG.hosting}</strong>
                                {if $domain.hosting}
                                    <span class="order-domain-hosting-state order-domain-hosting-state--attached">{$LANG.cartdomainshashosting}</span>
                                {else}
                                    <a href="{$WEB_ROOT}/cart.php" class="order-domain-hosting-state order-domain-hosting-state--missing">{$LANG.cartdomainsnohosting}</a>
                                {/if}
                            </div>
                        </div>

                        <div class="hostique-confdomains-domain-card__body">
                            {if $domain.eppenabled}
                                <div class="hostique-confdomains-inline-field">
                                    <label for="inputEppcode{$num}">{$LANG.domaineppcode}</label>
                                    <div class="hostique-confdomains-input-wrap">
                                        <span class="hostique-confdomains-input-wrap__icon"><i class="fas fa-lock"></i></span>
                                        <input type="text" name="epp[{$num}]" id="inputEppcode{$num}" value="{$domain.eppvalue}" class="form-control" placeholder="{$LANG.domaineppcode}" />
                                    </div>
                                    <small>{$LANG.domaineppcodedesc}</small>
                                </div>
                            {/if}

                            {if $domain.dnsmanagement || $domain.emailforwarding || $domain.idprotection}
                                <div class="hostique-confdomains-addon-grid">
                                    {if $domain.dnsmanagement}
                                        <label class="hostique-confdomains-addon-card{if $domain.dnsmanagementselected} is-selected{/if}">
                                            <input type="checkbox" name="dnsmanagement[{$num}]"{if $domain.dnsmanagementselected} checked{/if} />
                                            <span class="hostique-confdomains-addon-card__title">{$LANG.domaindnsmanagement}</span>
                                            <span class="hostique-confdomains-addon-card__copy">{$LANG.domainaddonsdnsmanagementinfo}</span>
                                            <span class="hostique-confdomains-addon-card__price">{$domain.dnsmanagementprice} / {$domain.regperiod} {$LANG.orderyears}</span>
                                        </label>
                                    {/if}

                                    {if $domain.idprotection}
                                        <label class="hostique-confdomains-addon-card{if $domain.idprotectionselected} is-selected{/if}">
                                            <input type="checkbox" name="idprotection[{$num}]"{if $domain.idprotectionselected} checked{/if} />
                                            <span class="hostique-confdomains-addon-card__title">{$LANG.domainidprotection}</span>
                                            <span class="hostique-confdomains-addon-card__copy">{$LANG.domainaddonsidprotectioninfo}</span>
                                            <span class="hostique-confdomains-addon-card__price">{$domain.idprotectionprice} / {$domain.regperiod} {$LANG.orderyears}</span>
                                        </label>
                                    {/if}

                                    {if $domain.emailforwarding}
                                        <label class="hostique-confdomains-addon-card{if $domain.emailforwardingselected} is-selected{/if}">
                                            <input type="checkbox" name="emailforwarding[{$num}]"{if $domain.emailforwardingselected} checked{/if} />
                                            <span class="hostique-confdomains-addon-card__title">{$LANG.domainemailforwarding}</span>
                                            <span class="hostique-confdomains-addon-card__copy">{$LANG.domainaddonsemailforwardinginfo}</span>
                                            <span class="hostique-confdomains-addon-card__price">{$domain.emailforwardingprice} / {$domain.regperiod} {$LANG.orderyears}</span>
                                        </label>
                                    {/if}
                                </div>
                            {/if}

                            {if $domain.fields}
                                <div class="hostique-confdomains-fields-grid">
                                    {foreach from=$domain.fields key=domainfieldname item=domainfield}
                                        <div class="hostique-confdomains-field-row">
                                            <span class="hostique-confdomains-field-row__label">{$domainfieldname}</span>
                                            <span class="hostique-confdomains-field-row__value">{$domainfield}</span>
                                        </div>
                                    {/foreach}
                                </div>
                            {/if}
                        </div>
                    </article>
                {/foreach}
            </div>
        </section>

        {if $atleastonenohosting}
            <section class="hostique-confdomains-section-card hostique-confdomains-section-card--nameservers">
                <div class="hostique-confdomains-section-head">
                    <h2>{$LANG.domainnameservers} <span>(Optional)</span></h2>
                    <p>If you want to use custom nameservers then enter them below. By default, new domains will use our nameservers.</p>
                </div>

                <div class="hostique-confdomains-nameservers-grid">
                    <div class="hostique-confdomains-inline-field">
                        <label for="inputNs1">{$LANG.domainnameserver1}</label>
                        <input type="text" class="form-control" id="inputNs1" name="domainns1" value="{$domainns1}" />
                    </div>
                    <div class="hostique-confdomains-inline-field">
                        <label for="inputNs2">{$LANG.domainnameserver2}</label>
                        <input type="text" class="form-control" id="inputNs2" name="domainns2" value="{$domainns2}" />
                    </div>
                    <div class="hostique-confdomains-inline-field">
                        <label for="inputNs3">{$LANG.domainnameserver3}</label>
                        <input type="text" class="form-control" id="inputNs3" name="domainns3" value="{$domainns3}" />
                    </div>
                    <div class="hostique-confdomains-inline-field">
                        <label for="inputNs4">{$LANG.domainnameserver4}</label>
                        <input type="text" class="form-control" id="inputNs4" name="domainns4" value="{$domainns4}" />
                    </div>
                    <div class="hostique-confdomains-inline-field">
                        <label for="inputNs5">{$LANG.domainnameserver5}</label>
                        <input type="text" class="form-control" id="inputNs5" name="domainns5" value="{$domainns5}" />
                    </div>
                </div>

                <div class="hostique-confdomains-submit">
                    <button type="submit" class="btn btn-primary btn-lg">
                        {$LANG.continue}
                        <i class="fas fa-arrow-circle-right"></i>
                    </button>
                    <p><i class="fas fa-shield-alt"></i><span>Secure and simple domain registration</span></p>
                </div>
            </section>
        {else}
            <div class="hostique-confdomains-submit hostique-confdomains-submit--standalone">
                <button type="submit" class="btn btn-primary btn-lg">
                    {$LANG.continue}
                    <i class="fas fa-arrow-circle-right"></i>
                </button>
                <p><i class="fas fa-shield-alt"></i><span>Secure and simple domain registration</span></p>
            </div>
        {/if}
    </form>
</div>

{include file="orderforms/hostique/recommendations-modal.tpl"}
