{if isset($RSThemes['pages'][$templatefile]) && file_exists($RSThemes['pages'][$templatefile]['fullPath'])}
    {include file=$RSThemes['pages'][$templatefile]['fullPath']}
{else}
    {assign var=iconsPages value=['clientareadomains', 'supportticketslist', 'clientareainvoices', 'clientareaproducts', 'clientareaquotes']}
    {if $services}
        {include file="$template/includes/tablelist.tpl" tableName="ServicesList" filterColumn="3" ajaxUrl="{$WEB_ROOT}/modules/addons/RSThemes/src/Api/clientApi.php?controller=ClientData&method=getClientServices" tableIncludes="services"}
        <script>
            var sslCheckInProgress = false;
            var sslCheckedElements = new Set();

            function checkSslStatusesForTable() {
                if (sslCheckInProgress) {
                    return;
                }

                sslCheckInProgress = true;
                var elementsToCheck = [];

                jQuery("#tableServicesList .ssl-status").each(function() {
                    var element = jQuery(this);
                    var elementId = element.attr('id');

                    if (elementId && sslCheckedElements.has(elementId)) {
                        return;
                    }

                    var cell = element.closest('td');
                    var type = cell.data('type');
                    var domain = cell.data('domain');
                    var serviceId = cell.data('element-id');
                    var currentSrc = element.attr('src');

                    if (currentSrc && currentSrc.indexOf('ssl-inactive-domain.svg') > -1) {
                        return;
                    }

                    if (domain && type) {
                        elementsToCheck.push({
                            element: element,
                            elementId: elementId,
                            type: type,
                            domain:  domain,
                            serviceId:  serviceId
                        });
                    }
                });

                if (elementsToCheck.length === 0) {
                    sslCheckInProgress = false;
                    return;
                }

                var checksCompleted = 0;
                elementsToCheck.forEach(function(item) {
                    var mainTemplate = item.element.data('maintemplate') || '{$template}';
                    var loadingImagePath = "{$WEB_ROOT}/templates/" + mainTemplate + "/assets/img/ssl/12x12/ssl-inactive.svg";

                    item.element.attr('src', loadingImagePath);
                    item.element.attr('data-original-title', 'Loading...');
                    item.element.attr('title', 'Loading...');

                    if (item.element.data('bs.tooltip')) {
                        item.element.tooltip('dispose');
                    }
                    item.element.tooltip();

                    WHMCS.http.jqClient.post(WHMCS.utils.getRouteUrl("/domain/ssl-check"), {
                        type:  item.type,
                        domain: item.domain,
                        token: csrfToken
                    }, function(response) {
                        checksCompleted++;

                        if (! response.invalid && response.image) {
                            var imagePath = response.image;
                            var imageParts = imagePath.split("/");
                            var imageFilename = imageParts[imageParts.length - 1];
                            imageFilename = imageFilename.replace(".png", ".svg");
                            var newImagePath = "{$WEB_ROOT}/templates/" + mainTemplate + "/assets/img/ssl/12x12/" + imageFilename;

                            item.element.attr('src', newImagePath);
                            item.element.attr('data-original-title', response.tooltip);
                            item.element.attr('title', response.tooltip);
                            item.element.removeClass().addClass('ssl-status ' + response.class);

                            if (item.element.data('bs.tooltip')) {
                                item.element.tooltip('dispose');
                            }
                            item.element.tooltip();

                            if (item.elementId) {
                                sslCheckedElements.add(item.elementId);
                            }
                        }

                        if (checksCompleted === elementsToCheck.length) {
                            sslCheckInProgress = false;
                        }
                    }).fail(function() {
                        checksCompleted++;
                        if (checksCompleted === elementsToCheck.length) {
                            sslCheckInProgress = false;
                        }
                    });
                });
            }

            jQuery(document).ready(function() {
                var table;

                if (jQuery.fn.DataTable.isDataTable('#tableServicesList')) {
                    table = jQuery('#tableServicesList').DataTable();
                } else {
                    table = jQuery('#tableServicesList').removeClass('hidden').DataTable();
                }

                {if $orderby == 'product'}
                table.order([[0, '{$sort}'], [3, 'asc']]);
                {elseif $orderby == 'amount' || $orderby == 'billingcycle'}
                table.order([[1, '{$sort}']]);
                {elseif $orderby == 'nextduedate'}
                table.order([[2, '{$sort}']]);
                {elseif $orderby == 'domainstatus'}
                table.order([[3, '{$sort}']]);
                {/if}

                table.draw();
                table.off('draw.dt.sslCheck');

                var sslCheckTimer;
                table.on('draw.dt.sslCheck', function() {
                    clearTimeout(sslCheckTimer);
                    sslCheckTimer = setTimeout(function() {
                        checkSslStatusesForTable();
                    }, 150);
                });

                setTimeout(function() {
                    checkSslStatusesForTable();
                }, 200);

                {if isset($RSThemes.addonSettings.enable_table_ajax_load) && $RSThemes.addonSettings.enable_table_ajax_load == "enabled"}
                {else}
                jQuery('.table-container').removeClass('loading');
                jQuery('#tableLoading').addClass('hidden');
                {/if}
            });

            window.refreshSslStatuses = function() {
                sslCheckedElements.clear();
                sslCheckInProgress = false;
                checkSslStatusesForTable();
            };
        </script>
        <div class="table-container {if isset($RSThemes.addonSettings.enable_table_ajax_load) && $RSThemes.addonSettings.enable_table_ajax_load == "enabled"}table-container-ajax{/if} loading">
            <div class="table-top">
                <div class="d-flex">
                    <label>{$LANG.clientareahostingaddonsview}</label>
                    <div 
                        class="dropdown view-filter-btns {if $RSThemes.addonSettings.show_status_icon == 'displayed'}iconsEnabled{/if}" 
                        data-table-filters 
                        {if isset($RSThemes['pages'][$templatefile]) && isset($RSThemes['pages'][$templatefile]['config']['defaultStatusFilter']) && $RSThemes['pages'][$templatefile]['config']['defaultStatusFilter'] != "all" && !empty($RSThemes['pages'][$templatefile]['config']['defaultStatusFilter'])}
                            data-default-filter="{$RSThemes['pages'][$templatefile]['config']['defaultStatusFilter']}"
                        {/if}
                    >
                        <button tabindex="0" type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown">
                            {if $RSThemes.addonSettings.show_status_icon == 'displayed'}
                                {if file_exists("templates/$template/assets/img/status-icons/status-all.tpl")}
                                    <span class="status-icon status-status-all" style="font-size: 0;">
                                        {include file="$template/assets/img/status-icons/status-all.tpl"}      
                                    </span>
                                {/if}
                            {else}
                                <span class="status hidden"></span>
                            {/if}
                            <span class="filter-name">{$rslang->trans('generals.all_entries')}</span>
                            <i class="ls ls-caret"></i>
                        </button>
                        <ul class="dropdown-menu" role="menu">
                            <li>
                                <a tabindex="0" href="#">
                                    <span data-value="all">
                                        {if $RSThemes.addonSettings.show_status_icon == 'displayed'}
                                            {if file_exists("templates/$template/assets/img/status-icons/status-all.tpl")}
                                                <span class="status-icon status-status-all">
                                                    {include file="$template/assets/img/status-icons/status-all.tpl"}      
                                                </span>
                                            {/if}
                                            <span class="filter-name">{$rslang->trans('generals.all_entries')}</span>
                                        {else}
                                            {$rslang->trans('generals.all_entries')}
                                        {/if}
                                    </span>
                                </a>
                            </li>
                            {foreach key=num item=status from=$RSHookServicesStatuses}
                                {if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['hideInactiveServices'] == "1" && !empty($RSThemes['pages'][$templatefile]['config']['hideInactiveServicesStatus'])}
                                    {include file="$template/includes/services/hide-inactive-services.tpl" type="status-dropdown"}                           
                                {/if}
                                {if $RSThemes.addonSettings.show_status_icon == 'displayed' && in_array($templatefile, $iconsPages)}
                                    <li {if $hiddeStatus}{if !$hideInactiveServices['inactiveServices']}class="hidden"{/if} data-table-filters-hidden{/if} data-status="{$status.status}">
                                    <a tabindex="0" href="#">
                                            <span class="status status-{$status.statusClass} {if $RSThemes.addonSettings.show_status_icon == 'displayed'}dot-hidden{/if}" data-value="{if isset($RSThemes.addonSettings.enable_table_ajax_load) && $RSThemes.addonSettings.enable_table_ajax_load == "enabled"}{$status.status}{else}{$status.statustext}{/if}" data-status-class="{$status.statusClass}">
                                                {if $RSThemes.addonSettings.show_status_icon == 'displayed'}
                                                    {if file_exists("templates/$template/assets/img/status-icons/{$status.statusClass}.tpl")}
                                                        <span class="status-icon status-{$status.statusClass}">
                                                            {include file="$template/assets/img/status-icons/{$status.statusClass}.tpl"}      
                                                        </span>
                                                    {else}
                                                        <span class="status-icon status-{$status.statusClass}">
                                                            {include file="$template/assets/img/status-icons/default.tpl"}      
                                                        </span>
                                                    {/if}                     
                                                {/if}
                                                <span class="filter-name">{$status.statustext}</span>
                                            </span>
                                        </a>
                                    </li>
                                {else}
                                    <li {if $hiddeStatus}{if !$hideInactiveServices['inactiveServices']}class="hidden"{/if} data-table-filters-hidden{/if} data-status="{$status.status}"><a tabindex="0" href="#"><span class="status status-{$status.statusClass}" data-value="{if isset($RSThemes.addonSettings.enable_table_ajax_load) && $RSThemes.addonSettings.enable_table_ajax_load == "enabled"}{$status.status}{else}{$status.statustext}{/if}" data-status-class="{$status.statusClass}">{$status.statustext}</span></a></li>
                                {/if}
                            {/foreach}
                        </ul>
                    </div>
                    <button tabindex="0" id="clearFilters" type="button" class="btn btn-link btn-xs hidden">{$rslang->trans('generals.clear_filters')}<i class="ls ls-close"></i></button>
                </div>
                {if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['hideInactiveServices'] == "1" && !empty($RSThemes['pages'][$templatefile]['config']['hideInactiveServicesStatus'])}
                    {include file="$template/includes/services/hide-inactive-services.tpl" type="switcher"}
                {/if}  
            </div>
            <table id="tableServicesList" class="table table-list">
                <thead>
                    <tr>
                        <th data-priority="1"><button tabindex="0" type="button" class="btn-table-collapse"></button>{$LANG.orderproduct}<span class="sorting-arrows"></span></th>
                        <th data-priority="5">{$LANG.clientareaaddonpricing}<span class="sorting-arrows"></span></th>
                        <th data-priority="4">{$LANG.clientareahostingnextduedate}<span class="sorting-arrows"></span></th>
                        <th data-priority="3">{$LANG.clientareastatus}<span class="sorting-arrows"></span></th>     
                        <th data-priority="2">&nbsp;</th>
                    </tr>
                </thead>
                <tbody>
                {* <pre>{$graphics['product'][1]->getJson()|print_r}</pre> *}
                    {if !isset($RSThemes.addonSettings.enable_table_ajax_load) || $RSThemes.addonSettings.enable_table_ajax_load == "disabled"}
                        {foreach key=num item=service from=$services}
                            <tr data-url="clientarea.php?action=productdetails&amp;id={$service.id}" tabindex="-1">
                            <td data-element-id="{$service.id}" data-type="service"{if $service.domain} data-domain="{$service.domain}"{/if}>
                                    <div class="d-flex gap-base align-items-center">
                                        {if is_array($graphics['product']) && $graphics['product'][$productServicesID[$service.id]]->enabled && $graphics['product'][$productServicesID[$service.id]]->getJson()->condensed->type}
                                            <div class="graphic-item graphic-item-sm">
                                                {assign var=graphic value=$graphics['product'][$productServicesID[$service.id]]->getJson()->condensed->graphic}
                                                {assign var=graphicType value=$graphics['product'][$productServicesID[$service.id]]->getJson()->condensed->type}
                                                {if $graphicType == "icon"}
                                                    {include file="$template/assets/svg-icon/{$graphic}"}
                                                {else if $graphicType == "font-icon"}
                                                    <span class="graphic-item-bg">
                                                        <i class="{$graphic}"></i>
                                                    </span>
                                                {else if $graphicType == "media"}
                                                    <img src="{$WEB_ROOT}/templates/{$template}/assets/img/page-manager/{$graphic}" alt="{$service.product}">
                                                {/if}
                                            </div>
                                        {/if}
                                        <div>
                                            {if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['hideInactiveServices'] == "1" && !empty($RSThemes['pages'][$templatefile]['config']['hideInactiveServicesStatus'])}
                                                {include file="$template/includes/services/hide-inactive-services.tpl" type="table-cell"}
                                            {/if}
                                            <button tabindex="0" type="button" class="btn-table-collapse"></button>
                                            {if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['showIdProduct'] == "1"}#{$service.id} - {/if}{if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['hideTabServiceGroup'] != "1"}<b>{$service.group}</b> - {$service.product}{else}<b>{$service.product}</b>{/if}
                                            {if $service.domain}
                                            <br />
                                                {if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['hideSslIcon'] == "0"}
                                                <span class="ssl-info">
                                                        {if $service.sslStatus}
                                                            {assign var="awords" value="/"|explode:$service.sslStatus->getImagePath()}
                                                            {assign var="imageSSL" value=$awords|@end}
                                                            <img id="sslStatus{$service.id}" src="{$WEB_ROOT}/templates/{$template}/assets/img/ssl/12x12/{$imageSSL|replace:".png":".svg"}" data-toggle="tooltip" title="{$service.sslStatus->getTooltipContent()}" width="12px" data-maintemplate="{$template}" class="ssl-status {$service.sslStatus->getClass()}"/>
                                                        {elseif !$service.isActive}
                                                            <img id="sslStatus{$service.id}" src="{$WEB_ROOT}/templates/{$template}/assets/img/ssl/12x12/ssl-inactive-domain.svg" data-toggle="tooltip" title="{lang key='sslState.sslInactiveService'}" data-maintemplate="{$template}" width="12px" class="ssl-status"/>
                                                        {/if}
                                                    </span>
                                                {/if}
                                                {if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['removeUrlFromDomainName'] == "0"}<a tabindex="0" class="text-small" href="http://{$service.domain}" target="_blank">{$service.domain}</a>{else}<span class="text-small">{$service.domain}</span>{/if}                                
                                            {/if}
                                            {if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['showDedicatedIP'] == "1" && $service.dedicatedip}<label class="text-small {if $service.domain}p-l-1x{/if} p-r-1x">{if $service.domain}({/if}{$service.dedicatedip}{if $service.domain}){/if}</label>{/if} 
                                        </div>
                                    </div>
                                </td>
                                <td class="text-nowrap" data-order="{$service.amountnum}">
                                    {if (
                                            $service.amount|replace:$WHMCSCurrency.prefix:""|replace:$WHMCSCurrency.suffix:"" == '0.00' ||
                                            $service.amount|replace:$WHMCSCurrency.prefix:""|replace:$WHMCSCurrency.suffix:"" == '0,00'
                                        ) && (
                                            isset($RSThemes.addonSettings.free_product_price) && 
                                            $RSThemes.addonSettings.free_product_price == "enabled" &&
                                            isset($RSThemes.addonSettings.free_product_price_value) &&
                                            $RSThemes.addonSettings.free_product_price_value == "all"
                                        )
                                    }
                                        {$LANG.orderfree}
                                    {else}
                                        {$service.amount}<br /> <span class="small">{$service.billingcycle}</span>
                                    {/if} 
                                </td>
                                <td>
                                    {if isset($autoterminatedays) && is_array($autoterminatedays) && isset($autoterminatedays[$service.id])}
                                        <span class="small">{$rslang->trans('services.trial_ends')}</span><br />{$autoterminatedays[$service.id]}
                                    {else}
                                        <span class="text-nowrap">
                                            <span class="hidden">
                                                {$service.normalisedNextDueDate}
                                            </span>
                                            {$service.nextduedate}
                                        </span>
                                    {/if}
                                </td>
                                {if $RSThemes.addonSettings.show_status_icon == 'displayed' && in_array($templatefile, $iconsPages)}

                                    <td class="text-nowrap">
                                        <span class="status status-{$service.status|strtolower} {if $RSThemes.addonSettings.show_status_icon == 'displayed'}dot-hidden{/if}">
                                            {if $RSThemes.addonSettings.show_status_icon == 'displayed'}
                                                {if file_exists("templates/$template/assets/img/status-icons/{$service.status|strtolower}.tpl")}
                                                    <span class="status-icon">
                                                        {include file="$template/assets/img/status-icons/{$service.status|strtolower}.tpl"}      
                                                    </span>
                                                {else}
                                                    <span class="status-icon">
                                                        {include file="$template/assets/img/status-icons/default.tpl"}      
                                                    </span>
                                                {/if}                     
                                            {/if}
                                            {$service.statustext}
                                        </span>
                                    </td>
                                    {else}
                                        <td class="text-nowrap"><span class="status status-{$service.status|strtolower}">{$service.statustext}</span></td>
                                    {/if}
                                <td class="cell-action">
                                    {if isset($RSThemes['pages'][$templatefile]) && $RSThemes['pages'][$templatefile]['config']['showManageButton'] == "1"}
                                        <a tabindex="0" href="clientarea.php?action=productdetails&id={$service.id}"
                                            class="btn btn-default btn-sm btn-manage">{$_LANG['manage']}</a>
                                    {else}
                                        <div class="dropdown">
                                            <a tabindex="0" href="#" class="btn btn-icon dropdown-toggle" tabindex="0" aria-label="More actions" data-toggle="dropdown">
                                                <i class="lm lm-more"></i>
                                            </a>
                                            <ul class="dropdown-menu  pull-right" role="menu">
                                                <li><a
                                                    tabindex="0"
                                                        href="clientarea.php?action=productdetails&id={$service.id}">{$LANG.clientareaviewdetails}</a>
                                                </li>
                                                {if $service.rawstatus == "active" && ($service.downloads || $service.addons || $service.packagesupgrade)}
                                                    <li class="divider"></li>
                                                    {if $service.downloads} <li><a tabindex="0"
                                                                href="clientarea.php?action=productdetails&id={$service.id}#tabDownloads">{$LANG.downloadstitle}</a>
                                                    </li>{/if}
                                                    {if $service.addons} <li><a tabindex="0"
                                                                href="clientarea.php?action=productdetails&id={$service.id}#tabAddons">{$LANG.clientareahostingaddons}</a>
                                                    </li>{/if}
                                                    {if $service.packagesupgrade} <li><a tabindex="0"
                                                                href="upgrade.php?type=package&id={$service.id}">{$LANG.upgradedowngradepackage}</a>
                                                    </li>{/if}
                                                    {*{if $service.showcancelbutton} <li><a tabindex="0" href="clientarea.php?action=cancel&id={$service.id}">{$LANG.clientareacancelrequestbutton}</a></li>{/if}*}
                                                {/if}
                                            </ul>
                                        </div>
                                    {/if}
                                </td>
                            </tr>
                        {/foreach}
                    {/if}    
                </tbody>    
            </table>
            <div class="loader loader-table" id="tableLoading">
                {include file="$template/includes/common/loader.tpl"}  
            </div>
        </div>
    {else}
        <div class="message message-no-data">
            <div class="message-image">
                {include file="$template/includes/common/svg-icon.tpl" icon="service"}     
            </div>
            <h6 class="message-title">{$rslang->trans('no_data_table.empty.products.description')}</h6>
            <div class="message-action">
                <a tabindex="0" class="btn btn-primary" href="{$WEB_ROOT}/cart.php">
                    {$LANG.navservicesorder}
                </a>
            </div>
        </div>
    {/if}
{/if}