{function get_sortable_link txt='' id=''}
    {$_asc = null}
    {if $sort == $id}
        {if !$asc}{$_asc = '1'}{else}{$_asc = '0'}{/if}
    {/if}
    {$_url = crmHelper::getUrl(['sort' => $id, 'asc' => $_asc])}
    <a href="{$_url}"><span>{$txt|escape} {if $sort == $id}</span><i class="fas fa-angle-{if $asc}up{else}down{/if}"></i></span>{/if}</a>
{/function}

{strip}

<main class="c-contacts-thumbs article">
    <div class="article-body">
        <header class="c-contacts-header flexbox middle wrap custom-mb-24">
            <h1 class="wide custom-pr-16"><span class="{if !empty($editable_name)}editable js-name-editable{/if}">
                {$title|escape}
            </span></h1>

            {$_sort_list = [
                'last_datetime' => '[`Last activity`]',
                'name' => '[`Name `]',
                'create_datetime' => '[`Created`]'
            ]}
            <div class="dropdown custom-mt-8 custom-mb-16 small js-sort-by" id="sort-by">
                {* [`Order by:`] *}
                <button class="dropdown-toggle button light-gray nowrap" type="button">
                    {if !empty($_sort_list[$sort])}{$_sort_list[$sort]|escape}{elseif !empty($columns[$sort])}{$columns[$sort].name|escape}{else}{$sort}{/if}
                    <span class="custom-ml-8 gray"><i class="fas fa-angle-{if $asc}down{else}up{/if}"></i></span>
                </button>
                <div class="dropdown-body right">
                    <ul class="menu">
                        {foreach $_sort_list as $_id => $_name}
                            <li class="c-menu-item {if $sort == $_id}selected{/if}">
                                {get_sortable_link txt=$_name id=$_id}
                            </li>
                        {/foreach}
                        {if empty($_sort_list[$sort])}
                            <li class="c-menu-item selected">
                                {if !empty($columns[$sort])}
                                    {$_txt = $columns[$sort].name}
                                {else}
                                    {$_txt = $sort}
                                {/if}
                                {get_sortable_link txt=$_txt id=$sort}
                            </li>
                        {/if}
                    </ul>
                </div>
            </div>
        </header>
        <script>
            ( function($) {
                $("#sort-by").waDropdown();
            })(jQuery);
        </script>

{*
    <div class="c-contacts-header c-layout">
        <div class="c-column">
            <h1><span class="crm-contact-list-name {if !empty($editable_name)}editable js-name-editable{/if}">{$title|escape}</span></h1>
        </div>
        <div class="c-column right">
            <div class="block half-padded">
                <ul class="menu-h dropdown">
                    {if $context.type === 'segment' && (!empty($can_edit) || !empty($can_archive) || !empty($can_edit))}
                        <li>
                            <a href="javascript:void(0);" class="inline-link"><b><i>[`Actions`]</i></b> <i class="icon10 darr"></i></a>
                            <ul class="menu-v with-icons js-segment-actions-list">
                                {if !empty($can_edit)}
                                    <li class="crm-segment-edit-li">
                                        <a href="javascript:void(0);" class="js-show-edit-dialog">
                                            <i class="icon16 settings"></i>
                                            <span class="c-name">[`Settings`]</span>
                                        </a>
                                    </li>
                                    {if $context.info.type === crmSegmentModel::TYPE_CATEGORY}
                                        <li class="crm-segment-add-contacts-li">
                                            <a href="javascript:void(0);" class="js-segment-add-contacts">
                                                <i class="icon16 add-to-list"></i>
                                                <span class="c-name">[`Add contacts to segment`]</span>
                                            </a>
                                        </li>
                                    {/if}
                                    {if $context.info.type === crmSegmentModel::TYPE_SEARCH}
                                        <li class="crm-segment-edit-condition">
                                            {$search_hash = str_replace('crmSearch/', '', $context.info.hash)}
                                            <a href="{$wa_app_url}contact/search/segment/{$segment.id}/{if $context.info.hash}{$search_hash|urlencode}/{/if}">
                                                <i class="icon16 folder-dynamic"></i>
                                                <span class="c-name">[`Edit filter conditions`]</span>
                                            </a>
                                        </li>
                                    {/if}
                                {/if}
                                {if !empty($can_archive)}
                                    <li class="crm-segment-archive-li {if $segment.archived}archived{else}not-archived{/if}">
                                        <a href="javascript:void(0);" class="js-show-archive-dialog">
                                            <span class="c-text c-archive">
                                                <i class="icon16 archive-text"></i> [`Restore from archive`]
                                            </span>

                                            <span class="c-text c-not-archive">
                                                <i class="icon16 archive"></i> [`Move to archive`]
                                            </span>

                                            <span class="c-text c-loading">
                                                <i class="icon16 loading"></i> [`Move to archive`]
                                            </span>
                                        </a>
                                    </li>
                                {/if}
                                {if !empty($can_edit)}
                                    <li>
                                        <a class="js-show-delete-confirm" href="javascript:void(0);">
                                            <i class="icon16 delete"></i>
                                            <span class="c-name">[`Delete segment`]</span>
                                        </a>
                                    </li>
                                {/if}
                            </ul>
                        </li>

                    {elseif $context.type === 'search'}
                        <li><a href="{$wa_app_url}contact/search/{crmHelper::urlEncodeSlashes($context.info.hash|urlencode)}">[`Change search conditions`]</a></li>
                        <li><a href="javascript:void(0);" data-hash="{$context.info.hash}" class="crm-create-filter-link">[`Save as filter`]</a></li>
                    {/if}

                    {$_sort_list = [
                        'last_datetime' => '[`Last activity`]',
                        'name' => '[`Name `]',
                        'create_datetime' => '[`Created`]'
                    ]}
                    <li>
                        [`Order by:`]&nbsp;
                        <a class="c-selected-item inline-link" href="{crmHelper::getUrl('sort', $sort)}" style="display: inline-block;">
                            <b><i>{if !empty($_sort_list[$sort])}{$_sort_list[$sort]|escape}{elseif !empty($columns[$sort])}{$columns[$sort].name|escape}{else}{$sort}{/if}</i></b>&nbsp;<i class="icon10 darr"></i>
                        </a>
                        <ul class="menu-v with-icons right">
                            {foreach $_sort_list as $_id => $_name}
                                <li class="c-menu-item {if $sort == $_id}selected{/if}">
                                    {get_sortable_link txt=$_name id=$_id}
                                </li>
                            {/foreach}
                            {if empty($_sort_list[$sort])}
                                <li class="c-menu-item selected">
                                    {if !empty($columns[$sort])}
                                        {$_txt = $columns[$sort].name}
                                    {else}
                                        {$_txt = $sort}
                                    {/if}
                                    {get_sortable_link txt=$_txt id=$sort}
                                </li>
                            {/if}
                        </ul>
                    </li>
                    <li class="selected">
                        <a href="{crmHelper::getUrl("view", "thumbs")}"><i class="icon16 view-thumbs" style="margin: 0;"></i></a>
                    </li>
                    <li>
                        <a href="{crmHelper::getUrl("view", "thumb-list")}"><i class="icon16 view-thumb-list" style="margin: 0;"></i></a>
                    </li>
                    <li>
                        <a href="{crmHelper::getUrl("view", "list")}"><i class="icon16 view-table" style="margin: 0;"></i></a>
                    </li>
                </ul>
            </div>

        </div>
    </div>
*}
    <div class="c-thumbs-list js-contacts-section">
        {if !empty($contacts)}

            {include file="./Contact.thumbs.inc.html" inline}

            {$wa->crm->pager($total_count|default:0, $page, '', $limit)}
        {/if}
        <p class="c-description c-no-contacts{if !empty($contacts)} hidden{/if}">[`No contacts.`]</p>
    </div>
    </div>
</main>

{/strip}