{if $warnings}
    {include file="$template/includes/alert.tpl" type="warning" msg=$warnings textcenter=true}
{/if}
{assign var="expiringDomainsCount" value=0}
{assign var="autorenewDomainsCount" value=0}
{foreach $domains as $domain}
    {if $domain.expiringSoon}
        {assign var="expiringDomainsCount" value=$expiringDomainsCount+1}
    {/if}
    {if $domain.autorenew}
        {assign var="autorenewDomainsCount" value=$autorenewDomainsCount+1}
    {/if}
{/foreach}

<div class="tab-content">
    <div class="tab-pane fade show active" id="tabOverview">
        {include file="$template/includes/tablelist.tpl" tableName="DomainsList" noSortColumns="0,4" startOrderCol="2" filterColumn="4"}
        <script>
            jQuery(document).ready(function () {
                var table = jQuery('#tableDomainsList').show().DataTable();
                var domainsSearchInput = jQuery('#domainsPageSearch');
                var dashboardSearchInput = jQuery('#dashboardSearch');
                var shouldResetSearchState = !jQuery.trim(domainsSearchInput.val() || '') && !jQuery.trim(dashboardSearchInput.val() || '');

                if (shouldResetSearchState) {
                    table.search('');
                    table.columns().search('');
                    if (table.state && typeof table.state.clear === 'function') {
                        table.state.clear();
                    }
                    jQuery('.dataTables_filter input').val('');
                }

                {if $orderby == 'domain'}
                    table.order(1, '{$sort}');
                {elseif $orderby == 'regdate' || $orderby == 'registrationdate'}
                    table.order(2, '{$sort}');
                {elseif $orderby == 'nextduedate'}
                    table.order(3, '{$sort}');
                {elseif $orderby == 'status'}
                    table.order(4, '{$sort}');
                {/if}

                table.draw();
                jQuery('#tableLoading').hide();

                jQuery('#domainsPageSearch').on('keyup change', function() {
                    table.search(this.value).draw();
                });
            });
        </script>

        <section class="dashboard-page-section">
            <section class="dashboard-analytics-grid dashboard-analytics-grid--three">
                <article class="dashboard-analytics-card dashboard-analytics-card--green dashboard-analytics-card--spark">
                    <span class="dashboard-analytics-card__icon"><i class="fas fa-globe"></i></span>
                    <div class="dashboard-analytics-card__copy">
                        <span class="dashboard-analytics-card__label">{lang key='navdomains'}</span>
                        <strong class="dashboard-analytics-card__value">{$domains|@count}</strong>
                        <span class="dashboard-analytics-card__meta">{$LANG.clientareanavdomains|default:$LANG.navdomains}</span>
                    </div>
                    <span class="dashboard-analytics-card__line dashboard-analytics-card__line--green"></span>
                </article>
                <article class="dashboard-analytics-card dashboard-analytics-card--violet dashboard-analytics-card--spark">
                    <span class="dashboard-analytics-card__icon"><i class="fas fa-shield-alt"></i></span>
                    <div class="dashboard-analytics-card__copy">
                        <span class="dashboard-analytics-card__label">{lang key='domainautorenewstatus'}</span>
                        <strong class="dashboard-analytics-card__value">{$autorenewDomainsCount}</strong>
                        <span class="dashboard-analytics-card__meta">{lang key='domainautorenewstatus'}</span>
                    </div>
                    <span class="dashboard-analytics-card__line dashboard-analytics-card__line--violet"></span>
                </article>
                <article class="dashboard-analytics-card dashboard-analytics-card--amber dashboard-analytics-card--spark">
                    <span class="dashboard-analytics-card__icon"><i class="fas fa-hourglass-half"></i></span>
                    <div class="dashboard-analytics-card__copy">
                        <span class="dashboard-analytics-card__label">{$LANG.expiringsoon|default:$LANG.clientareahostingnextduedate}</span>
                        <strong class="dashboard-analytics-card__value">{$expiringDomainsCount}</strong>
                        <span class="dashboard-analytics-card__meta">{$LANG.expiringsoon|default:$LANG.clientareahostingnextduedate}</span>
                    </div>
                    <span class="dashboard-analytics-card__line dashboard-analytics-card__line--amber"></span>
                </article>
            </section>

            <section class="dashboard-panel dashboard-page-table-panel">
                <div class="dashboard-page-heading dashboard-page-heading--inline">
                    <div>
                        <h1 class="dashboard-page-title">{lang key='navdomains'}</h1>
                        <p class="dashboard-panel__copy">{$LANG.clientareanavdomains|default:$LANG.navdomains}</p>
                    </div>
                    <a href="cart.php?a=add&amp;domain=register" class="dashboard-link dashboard-link--hero">
                        <i class="far fa-plus"></i>
                        {lang key='orderregisterdomain'}
                    </a>
                </div>

                <form id="domainForm" method="post" action="clientarea.php?action=bulkdomain">
                    <input id="bulkaction" name="update" type="hidden" />

                    <div class="dashboard-page-toolbar-stack">
                        <div class="dashboard-toolbar">
                            <button type="button" class="btn btn-default setBulkAction" id="nameservers">
                                <i class="far fa-globe"></i>
                                {lang key='domainmanagens'}
                            </button>
                            <button type="button" class="btn btn-default setBulkAction" id="contactinfo">
                                <i class="far fa-user"></i>
                                {lang key='domaincontactinfoedit'}
                            </button>
                            <div class="btn-group btn-group-sm" role="group">
                                <button id="btnGroupDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    {lang key='more'}
                                </button>
                                <div class="dropdown-menu" aria-labelledby="btnGroupDrop1">
                                    <a class="dropdown-item setBulkAction" href="#" id="autorenew"><i class="fas fa-sync-alt"></i> {lang key='domainautorenewstatus'}</a>
                                    <a class="dropdown-item setBulkAction" href="#" id="reglock"><i class="far fa-lock"></i> {lang key='domainreglockstatus'}</a>
                                    {if $allowrenew}
                                        <a class="dropdown-item setBulkAction" href="#" id="renewDomains"><i class="fas fa-redo-alt"></i> {lang key='domainmassrenew'}</a>
                                    {/if}
                                </div>
                            </div>
                        </div>

                        <div class="dashboard-page-table-toolbar dashboard-page-table-toolbar--domains">
                            <div class="dashboard-page-table-toolbar__spacer"></div>
                            <div class="dashboard-toolbar-search">
                                <i class="far fa-search"></i>
                                <input type="search" id="domainsPageSearch" class="form-control" placeholder="{lang key='search'}..." />
                            </div>
                        </div>
                    </div>

                    <div class="table-container clearfix">
                        <table id="tableDomainsList" class="table dashboard-table dashboard-table--rich dashboard-data-table">
                            <thead>
                                <tr>
                                    <th class="width-fixed-20"></th>
                                    <th>{lang key='orderdomain'}</th>
                                    <th>{lang key='clientareahostingregdate'}</th>
                                    <th>{lang key='clientareahostingnextduedate'}</th>
                                    <th>{lang key='domainstatus'}</th>
                                    <th class="text-right">{lang key='actions'}</th>
                                </tr>
                            </thead>
                            <tbody>
                                {foreach $domains as $domain}
                                    <tr onclick="clickableSafeRedirect(event, 'clientarea.php?action=domaindetails&amp;id={$domain.id}', false)">
                                        <td>
                                            <input type="checkbox" name="domids[]" class="domids stopEventBubble" value="{$domain.id}" />
                                        </td>
                                        <td>
                                            <div class="dashboard-table-service dashboard-table-service--domain">
                                                <span class="dashboard-table-service__icon {if $domain.sslStatus && $domain.statusClass == 'active'}is-active{elseif $domain.statusClass == 'pending'}is-pending{else}is-muted{/if}">
                                                    {if $domain.sslStatus && $domain.statusClass == 'active'}
                                                        <i class="fas fa-globe"></i>
                                                    {else}
                                                        <i class="fas fa-lock"></i>
                                                    {/if}
                                                </span>
                                                <div class="dashboard-table-service__copy">
                                                    <strong class="dashboard-item-title">{$domain.domain}</strong>
                                                    <span class="dashboard-item-subtitle">
                                                        {if $domain.autorenew}
                                                            <i class="fas fa-check text-success"></i> {lang key='domainautorenewstatus'}
                                                        {else}
                                                            <i class="fas fa-times text-danger"></i> {lang key='domainautorenewstatus'}
                                                        {/if}
                                                    </span>
                                                </div>
                                            </div>
                                        </td>
                                        <td>
                                            <span class="w-hidden">{$domain.normalisedRegistrationDate}</span>
                                            <span class="dashboard-table-date">{$domain.registrationdate}</span>
                                        </td>
                                        <td>
                                            <span class="w-hidden">{$domain.normalisedNextDueDate}</span>
                                            <span class="dashboard-table-date">{$domain.nextduedate}</span>
                                        </td>
                                        <td>
                                            <span class="status-pill {if $domain.statusClass == 'active'}success{elseif $domain.statusClass == 'pending'}warning{else}muted{/if}">
                                                {$domain.statustext}
                                            </span>
                                        </td>
                                        <td class="text-right">
                                            <a href="clientarea.php?action=domaindetails&amp;id={$domain.id}" class="dashboard-row-action stopEventBubble" aria-label="{lang key='view'} {$LANG.navdomains|default:$LANG.clientareanavdomains}">
                                                <i class="far fa-ellipsis-h"></i>
                                            </a>
                                        </td>
                                    </tr>
                                {/foreach}
                            </tbody>
                        </table>
                        <div class="text-center" id="tableLoading">
                            <p><i class="fas fa-spinner fa-spin"></i> {lang key='loading'}</p>
                        </div>
                    </div>
                </form>
            </section>
        </section>
    </div>
</div>
