<section class="dashboard-announcements">
    <div class="dashboard-panel dashboard-announcements__panel">
        <div class="dashboard-announcements__header">
            <div class="dashboard-page-heading__title dashboard-page-heading__title--compact">
                <span class="dashboard-page-heading__icon dashboard-page-heading__icon--mint">
                    <i class="far fa-bullhorn"></i>
                </span>
                <div>
                    <h1 class="dashboard-panel__title">{lang key="announcementstitle"}</h1>
                    <p class="dashboard-panel__copy">Latest platform updates, product launches, and important service news.</p>
                </div>
            </div>
            <a href="{routePath('announcement-index')}" class="btn btn-default">{lang key='viewAll'} <i class="far fa-arrow-right"></i></a>
        </div>

        {if $announcements|@count gt 0}
            {assign var=featuredAnnouncement value=$announcements[0]}
            <div class="dashboard-announcements__layout">
                <article class="dashboard-announcements__featured">
                    <div class="dashboard-announcements__featured-copy">
                        <span class="dashboard-announcements__badge">{lang key='announcementstitle'}</span>
                        <h2>{$featuredAnnouncement.title}</h2>
                        <p class="dashboard-announcements__date">
                            <i class="far fa-calendar"></i>
                            {$carbon->createFromTimestamp($featuredAnnouncement.timestamp)->format('jS F Y')}
                        </p>
                        <div class="dashboard-announcements__summary">
                            {if $featuredAnnouncement.text|strip_tags|strlen < 420}
                                {$featuredAnnouncement.text}
                            {else}
                                {$featuredAnnouncement.summary}
                            {/if}
                        </div>
                        <a href="{routePath('announcement-view', $featuredAnnouncement.id, $featuredAnnouncement.urlfriendlytitle)}" class="btn btn-brand">
                            {lang key="announcementscontinue"}
                            <i class="far fa-arrow-right"></i>
                        </a>
                    </div>
                    <div class="dashboard-announcements__featured-art">
                        <div class="dashboard-announcements__insight-card">
                            <span class="dashboard-announcements__insight-label">Featured update</span>
                            <strong class="dashboard-announcements__insight-title">Fresh release notes in your brand theme.</strong>
                            <p class="dashboard-announcements__insight-copy">Product launches, service changes, and important notices now feel like a native part of the Nebulix control center.</p>
                            <div class="dashboard-announcements__insight-metrics">
                                <div class="dashboard-announcements__insight-metric">
                                    <strong>{$announcements|@count}</strong>
                                    <span>Total updates</span>
                                </div>
                                <div class="dashboard-announcements__insight-metric">
                                    <strong>{$carbon->createFromTimestamp($featuredAnnouncement.timestamp)->format('M j')}</strong>
                                    <span>Published</span>
                                </div>
                            </div>
                            <div class="dashboard-announcements__insight-lines" aria-hidden="true">
                                <span class="dashboard-announcements__insight-line dashboard-announcements__insight-line--primary"></span>
                                <span class="dashboard-announcements__insight-line dashboard-announcements__insight-line--lg"></span>
                                <span class="dashboard-announcements__insight-line dashboard-announcements__insight-line--md"></span>
                                <span class="dashboard-announcements__insight-line dashboard-announcements__insight-line--sm"></span>
                            </div>
                        </div>
                    </div>
                </article>

                <aside class="dashboard-announcements__list">
                    {foreach $announcements as $announcement}
                        <a href="{routePath('announcement-view', $announcement.id, $announcement.urlfriendlytitle)}" class="dashboard-announcement-card{if $announcement@first} is-active{/if}">
                            <span class="dashboard-announcement-card__icon dashboard-announcement-card__icon--{$announcement@iteration}">
                                <i class="far fa-{if $announcement@iteration eq 1}bullhorn{elseif $announcement@iteration eq 2}rocket-launch{elseif $announcement@iteration eq 3}gift{elseif $announcement@iteration eq 4}wrench{else}file-lines{/if}"></i>
                            </span>
                            <span class="dashboard-announcement-card__copy">
                                <strong>{$announcement.title}</strong>
                                <small>{$carbon->createFromTimestamp($announcement.timestamp)->format('jS F Y')}</small>
                            </span>
                            <span class="dashboard-announcement-card__arrow"><i class="far fa-angle-right"></i></span>
                        </a>
                    {/foreach}
                </aside>
            </div>
        {else}
            {include file="$template/includes/alert.tpl" type="info" msg="{lang key='noannouncements'}" textcenter=true}
        {/if}
    </div>
</section>

{if $prevpage || $nextpage}
    <nav aria-label="Announcements navigation" class="dashboard-pagination-wrap">
        <ul class="pagination">
            {foreach $pagination as $item}
                <li class="page-item{if $item.disabled} disabled{/if}{if $item.active} active{/if}">
                    <a class="page-link" href="{$item.link}">{$item.text}</a>
                </li>
            {/foreach}
        </ul>
    </nav>
{/if}

{if $announcementsFbRecommend}
    <script>
        (function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) {
                return;
            }
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/{lang key='locale'}/all.js#xfbml=1";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));
    </script>
{/if}
