<section class="dashboard-announcement-view">
    <div class="dashboard-panel dashboard-announcement-view__panel">
        <div class="dashboard-announcement-view__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">Read product releases, service improvements, and important updates from Nebulix.</p>
                </div>
            </div>
            <div class="dashboard-announcement-view__actions">
                <a href="{routePath('announcement-index')}" class="btn btn-default">
                    <i class="far fa-arrow-left"></i>
                    {lang key='back'}
                </a>
                {if $editLink}
                    <a href="{$editLink}" class="btn btn-default">
                        <i class="far fa-pen"></i>
                        {lang key='edit'}
                    </a>
                {/if}
            </div>
        </div>

        <article class="dashboard-announcement-story">
            <span class="dashboard-announcements__badge">{lang key='latestannouncements'}</span>
            <h2 class="dashboard-announcement-story__title">{$title}</h2>
            <div class="dashboard-announcement-story__meta">
                <span><i class="far fa-calendar"></i> {$carbon->createFromTimestamp($timestamp)->format('jS F Y')}</span>
                <span><i class="far fa-clock"></i> {$carbon->createFromTimestamp($timestamp)->format('H:ia')}</span>
                <span><i class="far fa-book-open"></i> {lang key='announcementstitle'}</span>
            </div>

            <div class="dashboard-announcement-story__summary">
                <span class="dashboard-announcement-story__summary-icon"><i class="far fa-bullhorn"></i></span>
                <p>{$summary|default:$title}</p>
            </div>

            <div class="dashboard-announcement-story__content">
                {$text}
            </div>

            <div class="dashboard-announcement-story__footer">
                <a href="{routePath('announcement-index')}" class="btn btn-default">
                    <i class="far fa-arrow-left"></i>
                    {lang key='back'}
                </a>
                {if $facebookrecommend}
                    <div id="fb-root"></div>
                    <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/en_US/all.js#xfbml=1";
                            fjs.parentNode.insertBefore(js, fjs);
                        }(document, 'script', 'facebook-jssdk'));
                    </script>
                    <div class="fb-like" data-href="{fqdnRoutePath('announcement-view', $id, $urlfriendlytitle)}" data-send="true" data-width="450" data-show-faces="true" data-action="recommend"></div>
                {/if}
            </div>
        </article>
    </div>
</section>

{if $facebookcomments}
    <div class="dashboard-panel dashboard-announcement-comments">
        <div class="card-body p-5">
            <div id="fb-root"></div>
            <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/en_US/all.js#xfbml=1";
                    fjs.parentNode.insertBefore(js, fjs);
                }(document, 'script', 'facebook-jssdk'));
            </script>
            <fb:comments href="{fqdnRoutePath('announcement-view', $id, $urlfriendlytitle)}" num_posts="5" width="100%"></fb:comments>
        </div>
    </div>
{/if}
