{debug}
{if $currentPageName == 'Home'}
    {if $modulecustombuttonresult}
        {if $modulecustombuttonresult == "success"}
            {include file="$template/includes/alert.tpl" type="success" msg=$LANG.moduleactionsuccess textcenter=true idname="alertModuleCustomButtonSuccess"}
        {else}
            {include file="$template/includes/alert.tpl" type="error" msg=$LANG.moduleactionfailed|cat:' ':$modulecustombuttonresult textcenter=true idname="alertModuleCustomButtonFailed"}
        {/if}
    {/if}
    {if $pendingcancellation}
        {include file="$template/includes/alert.tpl" type="error" msg=$LANG.cancellationrequestedexplanation textcenter=true idname="alertPendingCancellation"}
    {/if}
    {if $unpaidInvoice}
        <div class="alert alert-{if $unpaidInvoiceOverdue}danger{else}warning{/if}" id="alert{if $unpaidInvoiceOverdue}Overdue{else}Unpaid{/if}Invoice">
            <div class="pull-right">
                <a href="viewinvoice.php?id={$unpaidInvoice}" class="btn btn-xs btn-default">
                    {lang key='payInvoice'}
                </a>
            </div>
            {$unpaidInvoiceMessage}
        </div>
    {/if}
    <div class="tab-content margin-bottom">
        <div class="tab-pane fade show active" id="tabOverview">
            {if $tplOverviewTabOutput}
                    {$tplOverviewTabOutput}
            {else}
            <div class="section">
                <div class="product-details">
                    <div class="row row-eq-height row-eq-height-sm">
                        <div class="col-md-6">
                            <div class="product-holder product-status-{$rawstatus|strtolower}" style="min-height: unset; height: 210px;">
                                <div class="product-content">
                                    <div class="product-image">
                                        <div class="feature-icon">
                                            <img src="/templates/croster/thurdata/productgroups/{$gid}.svg" class="img-fluid" style="height:90px;">
                                        </div>
                                    </div>
                                    <h4>@{$domain}</h4>
                                    <div class="status-sticker-wrapper">
                                        <div class="status-sticker product-status-{$rawstatus|strtolower}">
                                            {$status}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="product-info" style="min-height: unset; height: 210px;">
                                <table width="100%" border="0">
                                    <tr>
                                        <td class="list-heading" style="font-size: 85%;">{$LANG.clientareahostingregdate}</td>
                                        <td class="list-text" style="font-size: 85%;">{$regdate}</td>
                                    </tr>
                                    {if $billingcycle ne {lang key='orderpaymenttermfreeaccount'}}
                                        <tr>
                                            <td class="list-heading" style="font-size: 85%;">{$LANG.firstpaymentamount}</td>
                                            <td class="list-text" style="font-size: 85%;">{$firstpaymentamount}</td>
                                        </tr>
                                        <tr>
                                            <td class="list-heading" style="font-size: 85%;">{$LANG.recurringamount}</td>
                                            <td class="list-text" style="font-size: 85%;">{$recurringamount}</td>
                                        </tr>
                                        <tr>
                                            <td class="list-heading" style="font-size: 85%;">{$LANG.orderbillingcycle}</td>
                                            <td class="list-text" style="font-size: 85%;">{$billingcycle}</td>
                                        </tr>
                                        <tr>
                                            <td class="list-heading" style="font-size: 85%;">{$LANG.clientareahostingnextduedate}</td>
                                            <td class="list-text" style="font-size: 85%;">{$nextduedate}</td>
                                        </tr>
                                        <tr>
                                            <td class="list-heading" style="font-size: 85%;">{$LANG.orderpaymentmethod}</td>
                                            <td class="list-text" style="font-size: 85%;">{$paymentmethod}</td>
                                        </tr>
                                    {else}
                                        <tr>
                                            <td class="list-heading" style="font-size: 85%;"><strong>Trial Account</strong></td>
                                            {if $rawstatus eq "terminated"}
                                                <td class="list-text" style="font-size:85%;">{lang key='domainRenewal.expiredDaysAgo' days=((($smarty.now - ($regdate|@strtotime)) / 86400)|round) - 14}</td>
                                            {elseif 1123200 > ($smarty.now - ($regdate|@strtotime)) && ($smarty.now - ($regdate|@strtotime)) > 950400} {* wenn Heute - RegisterDatum < 13 Tage && > 11 Tage *}
                                                <td class="list-text" style="color:orange; font-size:85%">{lang key='domainRenewal.expiringIn' days=(14 - (($smarty.now - ($regdate|@strtotime)) / 86400)|round)}</td>
                                            {elseif ($smarty.now - ($regdate|@strtotime)) > 1123200} {* wenn Heute - RegisterDatum > 13 Tage *}
                                                <td class="list-text" style="color:red; font-size:85%;">{lang key='trialLastDay'}</td>
                                            {else}
                                                <td class="list-text" style="font-size: 85%;">{lang key='domainRenewal.expiringIn' days=(14 - (($smarty.now - ($regdate|@strtotime)) / 86400)|round)}</td>
                                            {/if}
                                        </tr>
                                        <tr>
                                            <td colspan="2"><br /><br /></td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                            <td>
                                                {if $rawstatus eq "terminated"}
                                                    <a href="/cart.php?gid={$gid}" class="btn btn-block btn-primary">{lang key='orderNow'}</a>
                                                {else}
                                                    <a href="/upgrade.php?type=package&id={$id}" class="btn btn-block btn-primary">{lang key='upgradeNow'}</a>
                                                {/if}
                                            </td>
                                        </tr>
                                    {/if}
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            {*
                {if $showcancelbutton || $packagesupgrade}
                    <div class="row">
                        {if $packagesupgrade}
                            <div class="col-xs-{if $showcancelbutton}6{else}12{/if}">
                                <a href="upgrade.php?type=package&amp;id={$id}" class="btn btn-block btn-primary">{$LANG.upgrade}</a>
                            </div>
                        {/if}
                        {if $showcancelbutton}
                            <div class="col-xs-{if $packagesupgrade}6{else}12{/if}">
                                <a href="clientarea.php?action=cancel&amp;id={$id}" class="btn btn-block btn-danger {if $pendingcancellation}disabled{/if}">{if $pendingcancellation}{$LANG.cancellationrequested}{else}{$LANG.clientareacancelrequestbutton}{/if}</a>
                            </div>
                        {/if}
                    </div>
                {/if}
            *}
            {if $systemStatus == 'Active'}
                {foreach $hookOutput as $output}
                    <div class="section">
                        <div>
                            {$output}
                        </div>
                        <div class=" clearfix"></div>
                    </div>
                {/foreach}
                {if $domain || $moduleclientarea || $configurableoptions || $customfields || $lastupdate}
                    <div class="section">
                        <div class="card panel panel-tabs">
                            <div class="card-header">
                                <ul class="nav nav-pills card-header-pills flex-column flex-md-row">
                                    {if $domain}
                                        <li class="nav-item">
                                            <a href="#domain" data-toggle="tab" class="nav-link{if !$dnsvars.correctable} active{/if}"><i class="fas fa-globe fa-fw"></i> {lang key='manage'}</a>
                                        </li>
                                    {/if}
                                    {if $configurableoptions}
                                        <li class="nav-item">
                                            <a href="#configoptions" data-toggle="tab" class="nav-link{if !$domain && !$moduleclientarea} active{/if}"><i class="fas fa-cubes fa-fw"></i>Details</a>
                                        </li>
                                    {/if}
                                    {if $metricStats}
                                        <li class="nav-item">
                                            <a href="#metrics" data-toggle="tab" class="nav-link{if !$domain && !$moduleclientarea && !$configurableoptions && !$dnsvars} active{/if}"><i class="fas fa-chart-line fa-fw"></i> {lang key='metrics.title'}</a>
                                        </li>
                                    {/if}
                                    {if $customfields}
                                        <li class="nav-item">
                                            <a href="#additionalinfo" data-toggle="tab" class="nav-link{if !$domain && !$moduleclientarea && !$metricStats && !$configurableoptions && !$dnsvars} active{/if}"><i class="fas fa-info fa-fw"></i>Zugangsdaten</a>
                                        </li>
                                    {/if}
                                    {if $lastupdate}
                                        <li class="nav-item">
                                            <a href="#resourceusage" data-toggle="tab" class="nav-link{if !$domain && !$moduleclientarea && !$configurableoptions && !$customfields && !$dnsvars} active{/if}"><i class="fas fa-inbox fa-fw"></i> {lang key='resourceUsage'}</a>
                                        </li>
                                    {/if}
                                    {if $dnsvars}
                                        <li class="nav-item">
                                            <a href="#dnsvars" data-toggle="tab" class="nav-link{if !$dnsvars.dnscheck && $dnsvars.correctable} active{/if}"><i class="fas fa-bolt fa-fw"></i> {lang key='connectivity'}</a>
                                        </li>
                                    {/if}
                                </ul>
                            </div>
                            <div class="card-body">
                                <div class="tab-content">
                                    {if $configurableoptions}
                                        <div class="tab-pane fade{if !$domain && !$moduleclientarea && $dnsvars.dnscheck} show active{/if}" role="tabpanel" id="configoptions">
                                            <table width="100%" cellspacing="0" cellpadding="0" class="frame">
                                                <tr>
                                                <td>
                                                    <table width="100%" border="0" cellpadding="10" cellspacing="0" class="table table-striped table-framed">
                                                    <tr>
                                                        <td align='left'>E-Mail Speicher inklusive</td>
                                                        <td align="left">{$domainBaseSize} GB</td>
                                                    </tr>
                                                    <tr>
                                                        <td align='left'>E-Mail Speicher zugebucht</td>
                                                        <td align="left">{$domainAddSize} GB</td>
                                                    </tr>
                                                    <tr>
                                                        <td align='left'>E-Mail Accounts inklusive</td>
                                                        <td align="left">{$acc_base}</td>
                                                    </tr>
                                                    <tr>
                                                        <td align='left'>E-Mail Accounts zugebucht</td>
                                                        <td align="left">{$acc_add}</a></td>
                                                    </tr>
                                                    </table>
                                                </td>
                                                </tr>
                                            </table>
                                        </div>
                                    {/if}
                                    {if $metricStats}
                                        <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions && $dnsvars.dnscheck} show active{/if}" role="tabpanel" id="metrics">
                                            <p>{lang key='metrics.explanation'}</p>
                                            <table class="table table-striped mb-1 table-solid-bottom-border-light-gray">
                                                <tr>
                                                    <th>{lang key='metrics.metric'}</th>
                                                    <th>{lang key='metrics.currentUsage'}</th>
                                                    <th>{lang key='metrics.pricing'}</th>
                                                    <th>{lang key='metrics.lastUpdated'}</th>
                                                </tr>
                                                {foreach $metricStats as $metric}
                                                    <tr>
                                                        <td>{$metric.displayName}</td>
                                                        <td>{$metric.currentValue|round:1}</td>
                                                        <td>
                                                            {if count($metric.pricing) > 1}
                                                                {lang key='metrics.startingFrom'} {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{lang key='metrics.unit'}{/if}
                                                                <br>
                                                                <button type="button" class="btn btn-default btn-xs" data-toggle="modal" data-target="#modalMetricPricing-{$metric.systemName}">
                                                                    {lang key='metrics.viewPricing'}
                                                                </button>
                                                            {elseif count($metric.pricing) == 1}
                                                                {$metric.lowestPrice} / {if $metric.unitName}{$metric.unitName}{else}{lang key='metrics.unit'}{/if}
                                                                {if $metric.includedQuantity > 0} ({$metric.includedQuantity|round:1} {lang key='metrics.includedNotCounted'}){/if}
                                                            {else}
                                                                &mdash;
                                                            {/if}
                                                            {include file="$template/usagebillingpricing.tpl"}
                                                        </td>
                                                        <td>{if is_string($metric.lastUpdated)}{$metric.lastUpdated}{else}{$metric.lastUpdated->diffForHumans()}{/if}</td>
                                                    </tr>
                                                {/foreach}
                                            </table>
                                        </div>
                                    {/if}
                                    {if $domain}
                                        <div class="tab-pane fade{if $dnsvars.dnscheck} show active{/if}" role="tabpanel" id="domain">
                                            <table width="100%" cellspacing="0" cellpadding="0" class="frame">
                                                <tr>
                                                    <td colspan=2 align='center'>
                                                        <div class="mg-wrapper body" data-target=".body" data-spy="scroll" data-twttr-rendered="true">
                                                            <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
                                                            <link rel="stylesheet" href="{$assetsURL}/css/layers-ui.css">
                                                            <link rel="stylesheet" href="{$assetsURL}/css/mg_styles.css">
                                                            {if $isCustomModuleCss}
                                                                <link rel="stylesheet" href="{$customAssetsURL}/css/module_styles.css">
                                                            {/if}
                                                            <div class="full-screen-module-container" id="layers">
                                                                <div class="lu-app">
                                                                    {$content}
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </td>
                                                </tr>
                                            </table>
                                        </div>
                                    {/if}
                                    {if $customfields}
                                        <div class="tab-pane fade{if !$domain && !$moduleclientarea && !$configurableoptions && !$metricStats && $dnsvars.dnscheck} show active{/if}" role="tabpanel" id="additionalinfo">
                                          <table width="100%" cellspacing="0" cellpadding="0" class="frame">
                                            <tr>
                                              <td align='left'>Webmail URL</td>
                                              <td align="left"><a href="https://{$serverdata.hostname}" target="_blank">https://{$serverdata.hostname}</a></td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <hr>
                                              </td>
                                            </tr>
                                            <tr><td colspan=2 align='center'>
                                            <img style="margin-left:3em;margin-right:3em;" width="64" alt="Outlook logo" src="/modules/servers/kerioEmail/templates/client/default/assets/img/outlook.svg">
                                            <img style="margin-left:3em;margin-right:3em;" width="64" alt="Mozilla Thunderbird logo" src="/modules/servers/kerioEmail/templates/client/default/assets/img/thunderbird.svg">
                                            <img style="margin-left:3em;margin-right:3em;" width="64" alt="Mail (iOS) logo" src="/modules/servers/kerioEmail/templates/client/default/assets/img/mail.svg">
                                            <img style="margin-left:3em;margin-right:3em;" width="64" alt="Gmail logo" src="/modules/servers/kerioEmail/templates/client/default/assets/img/gmail.svg">
                                            </td></tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <hr>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <h6 class="heading">Integrieren Sie Ihr Postfach auf Ihr Mobiltelefon oder Ihren PC</h6>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <h6 class="heading">Als Benutzernamen werden immer die E-Mail Adressen verwendet</h6>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <hr>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <h6 class="heading">Exchange ActivSync</h6>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Exchange Server</td>
                                              <td align="left">{$serverdata.hostname}</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Sicherheit</td>
                                              <td align="left">SSL/TLS</td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <hr>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <h6 class="heading">IMAP4</h6>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Name</td>
                                              <td align="left">{$serverdata.hostname}</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Type</td>
                                              <td align="left">IMAP</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Port</td>
                                              <td align="left">993</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Sicherheit</td>
                                              <td align="left">SSL/TLS</td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <hr>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <h6 class="heading">POP3</h6>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Name</td>
                                              <td align="left">{$serverdata.hostname}</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Type</td>
                                              <td align="left">POP3</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Port</td>
                                              <td align="left">995</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Sicherheit</td>
                                              <td align="left">SSL/TLS</td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <hr>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td colspan=2 align='left'>
                                                <h6 class="heading">SMTP</h6>
                                              </td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Name</td>
                                              <td align="left">{$serverdata.hostname}</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Type</td>
                                              <td align="left">SMTP</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Server Port</td>
                                              <td align="left">25</td>
                                            </tr>
                                            <tr>
                                              <td align='left'>Sicherheit</td>
                                              <td align="left">STARTTLS</td>
                                            </tr>
                                          </table>
                                        </div>
                                    {/if}
                                    {if $lastupdate}
                                        <div class="tab-pane fade" role="tabpanel" id="resourceusage" align="center">
                                            <table width="100%" cellspacing="0" cellpadding="0" class="frame">
                                                <tr>
                                                    <td align="center">
                                                        <div class="col-sm-10">
                                                                <h4>Accounts %</h4>
                                                                <input type="text" value="{$bwpercent|substr:0:-1}" class="dial-usage" data-width="100" data-height="100" data-min="0" data-readOnly="true" />
                                                                <p>{$bwusage} / {$bwlimit}</p>
                                                        </div>
                                                        <div class="clearfix"></div>
                                                        <p class="text-muted">{lang key='clientarealastupdated'}: {$lastupdate}</p>
                                                    </td>
                                                    <td align="center">
                                                        <div class="col-sm-10">
                                                                <h4>{lang key='diskSpace'} %</h4>
                                                                <input type="text" value="{$diskpercent|substr:0:-1}" class="dial-usage" data-width="100" data-height="100" data-min="0" data-readOnly="true" />
                                                                <p>{($diskusage / 1024)|round:1} GB / {($disklimit / 1024)|round:1} GB</p>
                                                        </div>
                                                        <div class="clearfix"></div>
                                                        <p class="text-muted">{lang key='clientarealastupdated'}: {$lastupdate}</p>
                                                    </td>
                                                </tr>
                                            </table>
                                            <script src="{$BASE_PATH_JS}/jquery.knob.js"></script>
                                            <script>
                                                jQuery(function() {
                                                    jQuery(".dial-usage").knob({
                                                        'format': function(v) {
                                                            alert(v);
                                                        }
                                                    });
                                                });
                                            </script>
                                            <div class="col-xs-{if $showcancelbutton}6{else}12{/if}">
                                                <a href="upgrade.php?type=configoptions&amp;id={$id}" class="btn btn-block btn-primary">Accounts oder Speicher hinzubuchen</a>
                                            </div>
                                        </div>
                                    {/if}
                                    {if $dnsvars}
                                    <div class="tab-pane fade{if !$dnsvars.dnscheck} show active{/if}" role="tabpanel" id="dnsvars" align="center">
                                        <h4>DNS Email Settings</h4>
                                        {if !$dnsvars.selfdomain}
                                            Bitte überprüfen oder
                                            <form method="post" action="cart.php?a=add&domain=transfer">
                                                <input type="hidden" name="sld" value="{$maildomain}" />
                                                <button type="submit" class="btn btn-primary">
                                                    {$LANG.domainstransfer} {$maildomain}
                                                </button>
                                            </form>
                                        {else}
                                            {if $dnsvars.dnscheck}
                                                Alles gut, so schaut es aus
                                            {else}
                                                {if !$dnsvars.selfDNS}
                                                    Bitte Nameserver ändern
                                                    <a href="clientarea.php?action=domaindetails&id={$dnsvars.domainId}#tabNameservers">
                                                        <button type="submit" class="btn btn-primary">
                                                            {$LANG.domainstransfer} {$maildomain}
                                                        </button>
                                                    </a>
                                                {else}
                                                    Da stimmt was nicht
                                                    <a href="clientarea.php?action=productdetails&id={$serviceid}&mg-page=dns&modop=custom&a=setDNS">
                                                        <button type="submit" class="btn btn-primary" title="automatisch korrigieren">
                                                            DNS Einräge {$LANG.orderconfigure}
                                                        </button>
                                                    </a>
                                                {/if}
                                            {/if}
                                        {/if}
                                        <table class="table table-striped mb-1 table-solid-bottom-border-light-gray">
                                        {foreach $dnsvars as $key=>$value}
                                            <tr>
                                                <td>{$key}</td>
                                                <td>{$value}</td>
                                            </tr>
                                        {/foreach}
                                        </table>
                                    {/if}
                                </div>
                            </div>
                        </div>
                    </div>
                {/if}
            {else}
                <div class="alert-lg no-data">
                    <div class="icon">
                        <i class="fas fa-exclamation-triangle"></i>
                    </div>
                    <div class="text">
                        {if $suspendreason}
                            <strong>{$suspendreason}</strong><br />
                        {/if}
                        {$LANG.cPanel.packageNotActive} {$status}.<br />
                        {if $systemStatus eq "Pending"}
                            {$LANG.cPanel.statusPendingNotice}
                        {elseif $systemStatus eq "Suspended"}
                            {$LANG.cPanel.statusSuspendedNotice}
                        {/if}
                    </div>
                </div>
            {/if}
        {/if}
    </div>
</div>
{else}
    <div class="mg-wrapper body" data-target=".body" data-spy="scroll" data-twttr-rendered="true">

        <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
        <link rel="stylesheet" href="{$assetsURL}/css/layers-ui.css">
        <link rel="stylesheet" href="{$assetsURL}/css/mg_styles.css">
        {if $isCustomModuleCss}
            <link rel="stylesheet" href="{$customAssetsURL}/css/module_styles.css">
        {/if}

        <div class="full-screen-module-container" id="layers">
            <div class="lu-app">
                {$content}
            </div>
        </div>
    </div>
{/if}

{if $isDebug}
    <script type="text/javascript" src="https://unpkg.com/vue"></script>
    <script type="text/javascript" src="https://unpkg.com/vuex"></script>
{else}
    <script type="text/javascript" src="{$assetsURL}/js/vue.min.js"></script>
    <script type="text/javascript" src="{$assetsURL}/js/vuex.min.js"></script>
{/if}
<script type="text/javascript" src="{$assetsURL}/js/mgComponents.js"></script>
<script type="text/javascript" src="{$assetsURL}/js/jscolor.min.js"></script>
<script type="text/javascript" src="{$assetsURL}/js/layers-ui.js"></script>
<script type="text/javascript" src="{$assetsURL}/js/chart.min.js"></script>

<div class="clear"></div>
