{include file="$template/includes/tablelist.tpl" tableName="TicketsList" filterColumn="2"}
{assign var="openTicketsCount" value=0}
{assign var="answeredTicketsCount" value=0}
{foreach $tickets as $ticket}
    {if $ticket.statusClass == 'answered' || $ticket.statusClass == 'customer-reply' || $ticket.statusClass == 'open'}
        {assign var="openTicketsCount" value=$openTicketsCount+1}
    {/if}
    {if $ticket.statusClass == 'answered'}
        {assign var="answeredTicketsCount" value=$answeredTicketsCount+1}
    {/if}
{/foreach}

<script>
    jQuery(document).ready(function () {
        var table = jQuery('#tableTicketsList').show().DataTable();
        jQuery('#tableTicketsList_filter').hide();

        {if $orderby == 'did' || $orderby == 'dept'}
            table.order(0, '{$sort}');
        {elseif $orderby == 'subject' || $orderby == 'title'}
            table.order(1, '{$sort}');
        {elseif $orderby == 'status'}
            table.order(2, '{$sort}');
        {elseif $orderby == 'lastreply'}
            table.order(3, '{$sort}');
        {/if}
        table.search('');
        table.column(2).search('');
        table.draw();
        jQuery('#tableLoading').hide();

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

        jQuery('[data-ticket-filter]').on('click', function() {
            var value = (jQuery(this).data('ticket-filter') || '').toString().trim().toLowerCase();
            jQuery('[data-ticket-filter]').removeClass('active');
            jQuery(this).addClass('active');

            if (!value) {
                table.column(2).search('', true, false, false).draw();
                return;
            }

            table.column(2).search('^' + jQuery.fn.dataTable.util.escapeRegex(value) + '$', true, false, false).draw();
        });
    });
</script>

<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="far fa-headset"></i></span>
        <div class="dashboard-analytics-card__copy">
            <span class="dashboard-analytics-card__label">{lang key='supportticketspagetitle'}</span>
            <strong class="dashboard-analytics-card__value">{$tickets|@count}</strong>
            <span class="dashboard-analytics-card__meta">{lang key='supportticketspagetitle'}</span>
        </div>
        <span class="dashboard-analytics-card__line dashboard-analytics-card__line--green"></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-heartbeat"></i></span>
        <div class="dashboard-analytics-card__copy">
            <span class="dashboard-analytics-card__label">{lang key='supportticketsstatusopen'}</span>
            <strong class="dashboard-analytics-card__value">{$openTicketsCount}</strong>
            <span class="dashboard-analytics-card__meta">{lang key='supportticketsstatusopen'}</span>
        </div>
        <span class="dashboard-analytics-card__line dashboard-analytics-card__line--amber"></span>
    </article>
    <article class="dashboard-analytics-card dashboard-analytics-card--violet dashboard-analytics-card--spark">
        <span class="dashboard-analytics-card__icon"><i class="far fa-comment-dots"></i></span>
        <div class="dashboard-analytics-card__copy">
            <span class="dashboard-analytics-card__label">{lang key='supportticketsstatusanswered'}</span>
            <strong class="dashboard-analytics-card__value">{$answeredTicketsCount}</strong>
            <span class="dashboard-analytics-card__meta">{lang key='supportticketsstatusanswered'}</span>
        </div>
        <span class="dashboard-analytics-card__line dashboard-analytics-card__line--violet"></span>
    </article>
</section>

<section class="dashboard-panel">
        <div class="dashboard-panel__header">
            <div>
                <h2 class="dashboard-panel__title">{lang key='supportticketspagetitle'}</h2>
                <p class="dashboard-panel__copy">{lang key='supportticketsheader'}</p>
            </div>
            <a href="submitticket.php?step=2" class="dashboard-link">{lang key='supportticketssubmitticket'}</a>
        </div>
    <div class="dashboard-ticket-filters">
        <div class="dashboard-ticket-filters__chips">
            <button type="button" class="dashboard-ticket-chip active" data-ticket-filter="">{lang key='all'}</button>
            <button type="button" class="dashboard-ticket-chip" data-ticket-filter="open"><i class="fas fa-circle"></i> {lang key='supportticketsstatusopen'}</button>
            <button type="button" class="dashboard-ticket-chip" data-ticket-filter="customer-reply"><i class="fas fa-circle"></i> {lang key='supportticketsstatuscustomerreply'}</button>
            <button type="button" class="dashboard-ticket-chip" data-ticket-filter="closed"><i class="fas fa-circle"></i> {lang key='supportticketsstatusclosed'}</button>
        </div>
        <div class="dashboard-ticket-filters__actions">
            <div class="dashboard-toolbar-search">
                <i class="far fa-search"></i>
                <input type="search" id="ticketsPageSearch" class="form-control" placeholder="{lang key='search'}..." />
            </div>
        </div>
    </div>
    <div class="table-container clearfix">
        <table id="tableTicketsList" class="table dashboard-table dashboard-data-table w-hidden">
            <thead>
                <tr>
                    <th>{lang key='supportticketsdepartment'}</th>
                    <th>{lang key='supportticketssubject'}</th>
                    <th>{lang key='supportticketsstatus'}</th>
                    <th>{lang key='supportticketsticketlastupdated'}</th>
                    <th class="text-right">{lang key='actions'}</th>
                </tr>
            </thead>
            <tbody>
                {foreach $tickets as $ticket}
                    <tr onclick="window.location='viewticket.php?tid={$ticket.tid}&amp;c={$ticket.c}'">
                        <td>
                            <div class="dashboard-ticket-table__department">
                                <span class="dashboard-ticket-table__avatar"><i class="far fa-user"></i></span>
                                <span>{$ticket.department}</span>
                            </div>
                        </td>
                        <td>
                            <a href="viewticket.php?tid={$ticket.tid}&amp;c={$ticket.c}" class="dashboard-ticket-table__subject">
                                <span class="ticket-number">#{$ticket.tid}</span>
                                <span class="ticket-subject{if $ticket.unread} unread{/if}">{$ticket.subject}</span>
                            </a>
                        </td>
                        <td data-search="{$ticket.statusClass|lower}">
                            <span class="status-pill {if $ticket.statusClass == 'answered'}info{elseif $ticket.statusClass == 'closed'}muted{elseif $ticket.statusClass == 'customer-reply'}warning{else}primary{/if}">
                                {$ticket.status|strip_tags}
                            </span>
                        </td>
                        <td class="text-center">
                            <span class="w-hidden">{$ticket.normalisedLastReply}</span>
                            <div class="dashboard-ticket-table__updated">
                                <i class="far fa-calendar-alt"></i>
                                <span>{$ticket.lastreply}</span>
                            </div>
                        </td>
                        <td class="text-right">
                            <a href="viewticket.php?tid={$ticket.tid}&amp;c={$ticket.c}" class="dashboard-home-action dashboard-home-action--ticket" aria-label="{lang key='view'} {lang key='supportticketspagetitle'}">
                                <i class="fas fa-ellipsis-v"></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>
</section>
