{if $kbarticle.voted}
    {include file="$template/includes/alert.tpl" type="success alert-bordered-left" msg="{lang key="knowledgebaseArticleRatingThanks"}" textcenter=true}
{/if}

<section class="dashboard-kb-article-layout">
    <aside class="dashboard-kb-article-sidebar">
        <div class="dashboard-panel dashboard-kb-side-nav">
            <div class="dashboard-panel__header">
                <div>
                    <h3 class="dashboard-panel__title">{lang key='knowledgebasetitle'}</h3>
                    <p class="dashboard-panel__copy">{lang key='knowledgebasepopular'}</p>
                </div>
            </div>
            <div class="dashboard-kb-side-nav__links">
                <a href="{routePath('knowledgebase-index')}" class="dashboard-kb-side-nav__link">
                    <i class="far fa-house"></i>
                    <span>{lang key='knowledgebasetitle'}</span>
                </a>
                {if $kbarticles}
                    {foreach $kbarticles as $relatedArticle}
                        <a href="{routePath('knowledgebase-article-view', {$relatedArticle.id}, {$relatedArticle.urlfriendlytitle})}" class="dashboard-kb-side-nav__link{if $relatedArticle.id eq $kbarticle.id} is-active{/if}">
                            <i class="far fa-file-lines"></i>
                            <span>{$relatedArticle.title}</span>
                        </a>
                    {/foreach}
                {/if}
            </div>
        </div>

        <div class="dashboard-kb-help dashboard-kb-help--compact">
            <span class="dashboard-kb-help__icon"><i class="far fa-headset"></i></span>
            <h3>{lang key='contactus'}</h3>
            <p>{lang key='supportticketsheader'}</p>
            <a href="submitticket.php?step=2" class="btn btn-default">{lang key='supportticketssubmitticket'}</a>
        </div>
    </aside>

    <div class="dashboard-kb-article-main">
        <article class="dashboard-panel dashboard-kb-article">
            <div class="dashboard-kb-article__topbar">
                <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-book-open"></i>
                    </span>
                    <div>
                        <p class="dashboard-kb-article__eyebrow">{lang key='knowledgebasetitle'}</p>
                        <h1 class="dashboard-kb-article__title">{$kbarticle.title}</h1>
                    </div>
                </div>
                <div class="dashboard-kb-article__actions">
                    <a href="#" class="btn btn-default btn-sm" onclick="window.print();return false">
                        <i class="far fa-print"></i>
                        {lang key='knowledgebaseprint'}
                    </a>
                    {if $kbarticle.editLink}
                        <a href="{$kbarticle.editLink}" class="btn btn-default btn-sm">
                            <i class="far fa-pen"></i>
                            {lang key='edit'}
                        </a>
                    {/if}
                </div>
            </div>

            <div class="dashboard-kb-article__meta">
                <span class="dashboard-kb-article__meta-pill"><i class="far fa-circle-check"></i> Verified guide</span>
                <span><i class="far fa-calendar"></i> {if $kbarticle.updatedAt}{$carbon->createFromTimestamp($kbarticle.updatedAt)->format('M j, Y')}{else}{$carbon->format('M j, Y')}{/if}</span>
                {if $kbarticle.updatedAt}
                    <span><i class="far fa-clock"></i> {lang key='clientarealastupdated'} {$carbon->createFromTimestamp($kbarticle.updatedAt)->format('M j, Y')}</span>
                {/if}
                {if $kbarticle.tags}
                    <span><i class="far fa-hashtag"></i> {$kbarticle.tags}</span>
                {/if}
            </div>

            <div class="dashboard-kb-article__feedback">
                <strong>{lang key='knowledgebasehelpful'}</strong>
                {if !$kbarticle.voted}
                    <form action="{routePath('knowledgebase-article-view', {$kbarticle.id}, {$kbarticle.urlfriendlytitle})}" method="post" class="dashboard-kb-article__feedback-actions">
                        <input type="hidden" name="useful" value="vote">
                        <button class="btn btn-default btn-sm" type="submit" name="vote" value="yes">
                            <i class="far fa-thumbs-up"></i>
                            {lang key='knowledgebaseyes'}
                        </button>
                        <button class="btn btn-default btn-sm" type="submit" name="vote" value="no">
                            <i class="far fa-thumbs-down"></i>
                            {lang key='knowledgebaseno'}
                        </button>
                    </form>
                {else}
                    <span class="dashboard-kb-article__feedback-thanks">{lang key="knowledgebaseArticleRatingThanks"}</span>
                {/if}
            </div>

            <div class="dashboard-kb-article__content">
                {$kbarticle.text}
            </div>

            <div class="dashboard-kb-tip">
                <span class="dashboard-kb-tip__icon"><i class="far fa-lightbulb-on"></i></span>
                <div>
                    <strong>{lang key='supportticketsstaff'}</strong>
                    <p>{lang key='supportticketsheader'}</p>
                </div>
            </div>

            <div class="dashboard-kb-article__footer">
                <a href="{routePath('knowledgebase-index')}" class="btn btn-default">
                    <i class="far fa-arrow-left"></i>
                    {lang key='back'}
                </a>
                {if $kbarticles}
                    <a href="{routePath('knowledgebase-article-view', {$kbarticles[0].id}, {$kbarticles[0].urlfriendlytitle})}" class="btn btn-brand">
                        {lang key='tablepagesnext'}
                        <i class="far fa-arrow-right"></i>
                    </a>
                {/if}
            </div>
        </article>

        {if $kbarticles}
            <section class="dashboard-panel dashboard-kb-related">
                <div class="dashboard-panel__header">
                    <div>
                        <h3 class="dashboard-panel__title">{lang key='knowledgebaserelated'}</h3>
                        <p class="dashboard-panel__copy">Continue with more articles from the same flow.</p>
                    </div>
                </div>
                <div class="dashboard-kb-related__list">
                    {foreach $kbarticles as $relatedArticle}
                        <a href="{routePath('knowledgebase-article-view', {$relatedArticle.id}, {$relatedArticle.urlfriendlytitle})}" class="dashboard-kb-related__item">
                            <span class="dashboard-kb-related__icon"><i class="far fa-file-lines"></i></span>
                            <span class="dashboard-kb-related__copy">
                                <strong>{$relatedArticle.title}</strong>
                                <small>{$relatedArticle.article|truncate:120:"..."}</small>
                            </span>
                            <span class="dashboard-kb-related__arrow"><i class="far fa-angle-right"></i></span>
                        </a>
                    {/foreach}
                </div>
            </section>
        {/if}
    </div>
</section>
