{include file="$template/includes/tablelist.tpl" tableName="EmailsList" noSortColumns="2"}
{assign var="emailCount" value=$emails|@count}
{assign var="emailsWithAttachmentsCount" value=0}
{assign var="latestEmailDate" value=''}
{foreach $emails as $email}
    {if $email@first}
        {assign var="latestEmailDate" value=$email.date}
    {/if}
    {if $email.attachmentCount > 0}
        {assign var="emailsWithAttachmentsCount" value=$emailsWithAttachmentsCount+1}
    {/if}
{/foreach}

<script>
    jQuery(document).ready(function () {
        var table = jQuery('#tableEmailsList').show().DataTable();
        var sortButton = jQuery('[data-emails-sort]');
        var newestFirst = true;

        {if $orderby == 'date'}
            table.order(0, '{$sort}');
            newestFirst = '{if $sort eq "desc"}true{else}false{/if}' === 'true';
        {elseif $orderby == 'subject'}
            table.order(1, '{$sort}');
        {else}
            table.order(0, 'desc');
        {/if}

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

        jQuery('#emailsPageSearch').on('keyup change', function () {
            table.search(jQuery(this).val().trim()).draw();
        });

        sortButton.on('click', function () {
            newestFirst = !newestFirst;
            table.order(0, newestFirst ? 'desc' : 'asc').draw();
            sortButton.toggleClass('is-active', !newestFirst);
        });
    });
</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-envelope-open-text"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='clientareaemails'}</span>
                <strong class="dashboard-analytics-card__value">{$emailCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='emailSent'}</span>
            </div>
            <span class="dashboard-analytics-card__line dashboard-analytics-card__line--green"></span>
        </article>

        <article class="dashboard-analytics-card dashboard-analytics-card--mint dashboard-analytics-card--spark">
            <span class="dashboard-analytics-card__icon"><i class="fas fa-paperclip"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='clientareafiles'}</span>
                <strong class="dashboard-analytics-card__value">{$emailsWithAttachmentsCount}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='clientareafiles'}</span>
            </div>
            <span class="dashboard-analytics-card__line dashboard-analytics-card__line--mint"></span>
        </article>

        <article class="dashboard-analytics-card dashboard-analytics-card--amber dashboard-analytics-card--spark">
            <span class="dashboard-analytics-card__icon"><i class="far fa-calendar"></i></span>
            <div class="dashboard-analytics-card__copy">
                <span class="dashboard-analytics-card__label">{lang key='clientarealastupdated'}</span>
                <strong class="dashboard-analytics-card__value">{if $latestEmailDate}{$latestEmailDate}{else}-{/if}</strong>
                <span class="dashboard-analytics-card__meta">{lang key='clientareaemailsdate'}</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 class="dashboard-page-heading__title">
                <span class="dashboard-page-heading__icon"><i class="fas fa-envelope"></i></span>
                <div>
                    <h1 class="dashboard-page-title">{lang key='clientareaemails'}</h1>
                    <p class="dashboard-panel__copy">{lang key='clientareaemaildesc'}</p>
                </div>
            </div>
        </div>

        <div class="dashboard-page-table-toolbar">
            <div class="dashboard-toolbar-search">
                <i class="far fa-search"></i>
                <input type="search" id="emailsPageSearch" class="form-control" placeholder="{lang key='search'}..." />
            </div>
            <div class="dashboard-page-table-toolbar__actions">
                <button type="button" class="dashboard-icon-btn" data-emails-sort aria-label="{lang key='clientareaemailsdate'}">
                    <i class="far fa-calendar"></i>
                </button>
            </div>
        </div>

        <div class="table-container clearfix">
            <table id="tableEmailsList" class="table dashboard-table dashboard-table--rich dashboard-data-table w-hidden">
                <thead>
                    <tr>
                        <th>{lang key='clientareaemailsdate'}</th>
                        <th>{lang key='clientareaemailssubject'}</th>
                        <th class="text-right">{lang key='actions'}</th>
                    </tr>
                </thead>
                <tbody>
                    {foreach $emails as $email}
                        <tr onclick="popupWindow('viewemail.php?id={$email.id}', 'emailWin', '800', '600', 'scrollbars=1,')">
                            <td class="text-center">
                                <span class="w-hidden">{$email.normalisedDate}</span>
                                <div class="dashboard-table-inline justify-content-center">
                                    <i class="far fa-calendar"></i>
                                    <span>{$email.date}</span>
                                </div>
                            </td>
                            <td>
                                <div class="dashboard-table-service dashboard-table-service--compact">
                                    <span class="dashboard-table-service__icon is-active">
                                        <i class="fas fa-envelope"></i>
                                    </span>
                                    <div class="dashboard-table-service__copy">
                                        <strong class="dashboard-item-title">{$email.subject}</strong>
                                        <span class="dashboard-item-subtitle">
                                            {if $email.attachmentCount > 0}
                                                {$email.attachmentCount} {lang key='clientareafiles'}
                                            {else}
                                                {lang key='emailviewmessage'}
                                            {/if}
                                        </span>
                                    </div>
                                </div>
                            </td>
                            <td class="text-right">
                                <div class="dashboard-row-actions">
                                    <button
                                        type="button"
                                        class="dashboard-row-action stopEventBubble"
                                        aria-label="{lang key='emailviewmessage'}"
                                        onclick="event.stopPropagation(); popupWindow('viewemail.php?id={$email.id}', 'emailWin', '800', '600', 'scrollbars=1,'); return false;"
                                    >
                                        <i class="far fa-eye"></i>
                                    </button>
                                </div>
                            </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>
    </section>
</section>
