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

{assign var="hostiqueSharedStyle" value=false}
{if $productGroup && $productGroup.slug eq 'sharedd'}
    {assign var="hostiqueSharedStyle" value=true}
{/if}
{assign var="hostiqueGroupTitle" value=''}
{assign var="hostiqueGroupSubtitle" value=''}
{if $productGroup}
    {if $productGroup.headline}
        {assign var="hostiqueGroupTitle" value=$productGroup.headline}
    {elseif $productGroup.name}
        {assign var="hostiqueGroupTitle" value=$productGroup.name}
    {/if}
    {if $productGroup.tagline}
        {assign var="hostiqueGroupSubtitle" value=$productGroup.tagline}
    {/if}
{/if}
{if !$hostiqueGroupTitle and $products|@count}
    {assign var="hostiqueGroupTitle" value=$products[0].productGroup.name|default:$products[0].name}
{/if}

<div id="order-standard_cart" class="order-shell order-shell--shared-hosting-modern">
    <div class="hostique-store-shell">
        <section class="hostique-store-hero">
            <div class="hostique-store-hero__copy">
                <h1>{$hostiqueGroupTitle}</h1>
                {if $hostiqueGroupSubtitle}
                    <p>{$hostiqueGroupSubtitle}</p>
                {/if}
                {if $products}
                    <div class="hostique-store-hero__links" aria-label="Choose a plan">
                        {foreach $products as $product}
                            <a class="hostique-store-hero__link" href="#product{$product.pid}">{$product.name}</a>
                        {/foreach}
                    </div>
                {/if}
            </div>
            <div class="hostique-store-hero__action">
                <span class="hostique-store-hero__cta">
                    <i class="fas fa-shopping-bag" aria-hidden="true"></i>
                    <span>{$LANG.ordernowbutton}</span>
                </span>
            </div>
        </section>

        {if $errormessage}
            <div class="alert alert-danger hostique-store-alert">
                {$errormessage}
            </div>
        {elseif !$productGroup}
            <div class="alert alert-info hostique-store-alert">
                {lang key='orderForm.selectCategory'}
            </div>
        {/if}

        <section class="hostique-store-plans-section">
            <div class="hostique-store-plans-grid{if $products|@count == 1} is-single{/if}">
                {foreach $products as $index => $product}
                    {assign var="hostiquePlanName" value=$product.name}
                    {assign var="hostiquePlanDescription" value=$product.featuresdesc|default:''}
                    {if !$hostiquePlanDescription && $product.description && $product.description|strpos:"\n" === false}
                        {assign var="hostiquePlanDescription" value=$product.description}
                    {/if}
                    {assign var="productCycle" value=''}
                    {if $product.pricing.minprice && $product.pricing.minprice.cycle}
                        {assign var="productCycle" value=$product.pricing.minprice.cycle}
                    {/if}
                    {assign var="productCycleLabel" value=''}
                    {if $productCycle eq "monthly"}
                        {assign var="productCycleLabel" value=$LANG.orderpaymenttermmonthly}
                    {elseif $productCycle eq "quarterly"}
                        {assign var="productCycleLabel" value=$LANG.orderpaymenttermquarterly}
                    {elseif $productCycle eq "semiannually"}
                        {assign var="productCycleLabel" value=$LANG.orderpaymenttermsemiannually}
                    {elseif $productCycle eq "annually"}
                        {assign var="productCycleLabel" value=$LANG.orderpaymenttermannually}
                    {elseif $productCycle eq "biennially"}
                        {assign var="productCycleLabel" value=$LANG.orderpaymenttermbiennially}
                    {elseif $productCycle eq "triennially"}
                        {assign var="productCycleLabel" value=$LANG.orderpaymenttermtriennially}
                    {/if}

                    <article class="hostique-store-plan-card{if $index == 1} is-featured{/if}" id="product{$product.pid}">
                        {if $index == 1}
                            <span class="hostique-store-plan-card__badge">Most Popular</span>
                        {/if}
                        <div class="hostique-store-plan-card__icon" aria-hidden="true">
                            {if $index == 0}
                                <i class="fas fa-server"></i>
                            {elseif $index == 1}
                                <i class="far fa-gem"></i>
                            {else}
                                <i class="fas fa-layer-group"></i>
                            {/if}
                        </div>

                        <div class="hostique-store-plan-card__head">
                            <h2>{$hostiquePlanName}</h2>
                            {if $hostiquePlanDescription}
                                <div class="hostique-store-plan-card__description">{$hostiquePlanDescription nofilter}</div>
                            {/if}
                        </div>

                        <div class="hostique-store-plan-card__pricing">
                            <div class="hostique-store-plan-card__price">
                                <strong>{$product.pricing.minprice.price}</strong>
                            </div>
                            {if $productCycleLabel}
                                <span class="hostique-store-plan-card__cycle">{$productCycleLabel}</span>
                            {/if}
                        </div>

                        <a href="{$product.productUrl}" class="btn btn-success hostique-store-plan-card__cta">
                            <i class="fas fa-shopping-cart" aria-hidden="true"></i>
                            <span>{$LANG.ordernowbutton}</span>
                        </a>
                    </article>
                {/foreach}
            </div>
        </section>

        <section class="hostique-store-footer-strip">
            <div class="hostique-store-footer-strip__support">
                <span class="hostique-store-footer-strip__eyebrow">Need help? Our support team is here for you.</span>
                <a class="hostique-store-footer-strip__link" href="{$WEB_ROOT}/submitticket.php">24/7 Live Chat</a>
            </div>
            <div class="hostique-store-footer-strip__trust">
                <span class="hostique-store-footer-strip__eyebrow">Trusted by thousands</span>
                <span class="hostique-store-footer-strip__stars" aria-label="5 star rating">
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                    <i class="fas fa-star"></i>
                </span>
            </div>
        </section>
    </div>
</div>
