[%-
USE ExpVar;
USE Uapi;

SET prefix = CPANEL.CPVAR.dprefix,
    user = CPANEL.user,
    auth_user = CPANEL.authuser,
    is_archive_user = ExpVar.expand('$isarchiveuser'),
    is_default_cpanel_account = user == auth_user,
    is_email_account = !is_default_cpanel_account && !is_archive_user;

# Use ExpVar here instead of UAPI as its at least 1000% faster
SET ccs_enabled = ExpVar.expand('$hasccs') ? 1 : 0;
SET cpdavd_enabled = ExpVar.expand('$hascpdavd') ? 1 : 0;
SET solr_enabled = ExpVar.expand('$hasdovecotsolr') ? 1 : 0;

IF !is_archive_user && CPANEL.feature('lists');
    SET delegated_mailman = execute( 'Email', 'has_delegated_mailman_lists', {delegate=auth_user}).data;
END;

SET sitemap = execute( 'Branding', 'get_information_for_applications', {}).data;

-%]

<section id="webmailFeatureList" class="constrained">
    <h3>[% locale.maketext('Manage Your Inbox') %]</h3>
    <ul class="list-unstyled applications">
        [% FOREACH page IN sitemap %]

            [% IF page.key == 'autoresponders' && CPANEL.feature('autoresponders') %]
            <li class="application">
                <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                    <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                    <div class="application-details">
                        <div class="application-title">[% page.value.name %]</div>
                        <span class="application-description">[% locale.maketext("Are you going on vacation? Use this feature to configure your automated emails.")  %]</span>
                    </div>
                </a>
            </li>
            [% ELSIF page.key == 'forwarders' && CPANEL.feature('forwarders') %]
            <li class="application">
                <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                    <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                    <div class="application-details">
                        <div class="application-title">[% page.value.name %]</div>
                        <span class="application-description">[% locale.maketext("Automatically send a copy of any incoming email from this email address to another.")  %]</span>
                    </div>
                </a>
            </li>
            [% ELSIF page.key == 'email_filters' && !is_archive_user && CPANEL.feature('blockers')  %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Create and manage email filters for your main email account.")  %]</span>
                        </div>
                    </a>
                </li>
            [% END %]
        [% END %]
    </ul>
    <h3>[% locale.maketext('Edit Your Settings') %]</h3>
    <ul class="list-unstyled applications">
        [% FOREACH page IN sitemap %]
            [% IF page.key == 'webmail_account_prefs' %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="./assets/application_icons/user_manager.svg" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Change your Webmail account settings.")  %]</span>
                        </div>
                    </a>
                </li>
            [% ELSIF page.key == 'calendar_and_contacts' && ccs_enabled && cpdavd_enabled && CPANEL.feature('caldavcarddav') %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Set up your calendar and contacts.")  %]</span>
                        </div>
                    </a>
                </li>
            [% ELSIF page.key == 'change_password' && is_email_account && CPANEL.feature('popaccts') %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Update your webmail password.")  %]</span>
                        </div>
                    </a>
                </li>
            [% ELSIF page.key == 'contact_information' && !is_archive_user && ( CPANEL.feature('updatenotificationprefs') || !CPANEL.feature('updatecontact') ) %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]"" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Set up a different email address to receive account notifications and password reset confirmations.")  %]</span>
                        </div>
                    </a>
                </li>
            [% END %]
        [% END %]
    </ul>
    <h3>[% locale.maketext('Fight Spam') %]</h3>
    <ul class="list-unstyled applications">
        [% FOREACH page IN sitemap %]

            [% IF page.key == 'boxtrapper' && !is_archive_user && !CONF.skipboxtrapper && CPANEL.feature('boxtrapper') %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Protect your inbox from spam.")  %]</span>
                        </div>
                    </a>
                </li>
            [% ELSIF page.key == 'apache_spam_assassin' && CPANEL.feature('spamassassin') && ExpVar.expand('$spamassassin_enabled') %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext('Filter unwanted spam email before it reaches your inbox.') %]</span>
                        </div>
                    </a>
                </li>
            [% END %]
        [% END %]
    </ul>

    <h3>[% locale.maketext('Other Webmail Features') %]</h3>
    <ul class="list-unstyled applications">
        [% FOREACH page IN sitemap %]
            [% IF page.key == 'configure_mail_client' %]
               <li class="application">
                   <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                       <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/application_manager.svg') %]" aria-hidden="true" />
                       <div class="application-details">
                           <div class="application-title">[% page.value.name %]</div>
                           <span class="application-description">[% locale.maketext("Set up your email account on any device.")  %]</span>
                       </div>
                   </a>
               </li>

            [% ELSIF page.key == 'solr_search_index' && solr_enabled %]
            <li class="application">
                <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                    <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/indexes.svg') %]" aria-hidden="true" />
                    <div class="application-details">
                        <div class="application-title">[% page.value.name %]</div>
                        <span class="application-description">[% locale.maketext("IMAP Full-Text Search Index (powered by Apache Solr™) improves the speed and convenience of the search experience.")  %]</span>
                    </div>
                </a>
            </li>

            [% ELSIF page.key == 'email_disk_usage' && !is_archive_user && CPANEL.feature('email_disk_usage') %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Delete old messages from your mailbox. Recover disk space. It’s that simple.")  %]</span>
                        </div>
                    </a>
                </li>

            [% ELSIF page.key == 'track_delivery' && !is_archive_user && CPANEL.feature('emailtrace') %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Review an email’s delivery route.")  %]</span>
                        </div>
                    </a>
                </li>
            [% ELSIF page.key == 'mailing_lists' && !is_archive_user && CPANEL.feature('lists') && delegated_mailman %]
                <li class="application">
                    <a href="[% prefix _ page.value.url %]" id="id_[% page.key %]" title="[% locale.maketext( 'Go to “[_1]”.', page.value.name ) %]">
                        <img class="mr-10 application-icon" src="[% theme_magic_url('assets/application_icons/' _ page.value.icon.url _ '.svg') %]" aria-hidden="true" />
                        <div class="application-details">
                            <div class="application-title">[% page.value.name %]</div>
                            <span class="application-description">[% locale.maketext("Create and manage email filters for your main email account.")  %]</span>
                        </div>
                    </a>
                </li>
            [% END %]
        [% END %]
    </ul>
</section>

<!-- Styling for List of applications -->
<style type="text/css">

    .applications {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: flex-start;
    }

    html[dir="rtl"] .list-unstyled {
        padding-right: 0;
        padding-left: 0;
    }

    .application {
        margin: 0 10px 10px 0;
        text-decoration: none;
    }

    html[dir="rtl"] .application {
        margin: 0 0 10px 10px;
    }

    .application a {
        width: 365px;
        flex-grow: 1;
        display: flex;
        align-items: flex-start;
        padding: 10px 10px 10px 15px;
        text-decoration: none;
    }

    .application a:hover {
        text-decoration: none;
    }

    .application:hover,
    .application:focus,
    .application:active {
        transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 3px 3px -2px rgba(0, 0, 0, 0.2), 0 3px 4px 0 rgba(0, 0, 0, 0.14), 0 1px 8px 0 rgba(0, 0, 0, 0.12);
        cursor: pointer;
    }

    .application-details {
        flex: 1;
    }

    .application a:hover .application-details .application-title,
    .application a:focus .application-details .application-title,
    .application a:active .application-details .application-title {
        color: #2a6496;
    }

    .application-icon {
        height: 48px;
    }

    .mr-10 {
        margin-right: 10px;
    }
    html[dir="rtl"] .mr-10 {
        margin-right: 0;
        margin-left: 10px;
    }

    .application-details {
        flex: 1;
    }

    .application-title {
        font-size: 18px;
        font-weight: 600;
        padding-bottom: 10px;
        color: #428bca;
    }

    .application-description {
        font-size: 13px;
        color: #4c4c4c;
    }

</style>