<section class="dashboard-kb-hero">
    <div class="dashboard-kb-hero__grid">
        <div class="dashboard-kb-hero__copy">
            <span class="dashboard-kb-hero__eyebrow">{lang key='knowledgebasetitle'}</span>
            <h1 class="dashboard-kb-hero__title">Find clear answers without digging through clutter.</h1>
            <p class="dashboard-kb-hero__description">Browse setup guides, billing answers, and practical walkthroughs written for Nebulix clients.</p>
            <div class="dashboard-kb-hero__metrics">
                <div class="dashboard-kb-hero__metric">
                    <strong>{$kbcats|@count|default:0}</strong>
                    <span>{lang key='knowledgebasecategories'}</span>
                </div>
                <div class="dashboard-kb-hero__metric">
                    <strong>{$kbmostviews|@count|default:0}</strong>
                    <span>{lang key='knowledgebasepopular'}</span>
                </div>
            </div>
        </div>
        <div class="dashboard-kb-hero__search-shell">
            <form role="form" method="post" action="{routePath('knowledgebase-search')}" class="dashboard-kb-search">
                <div class="input-group input-group-lg kb-search">
                    <div class="input-group-prepend">
                        <span class="input-group-text"><i class="far fa-search"></i></span>
                    </div>
                    <input type="text" id="inputKnowledgebaseSearch" name="search" class="form-control font-weight-light" placeholder="{lang key='search'}..." />
                    <div class="input-group-append">
                        <button type="submit" id="btnKnowledgebaseSearch" class="btn btn-brand btn-input-padded-responsive">
                            {lang key='search'}
                            <i class="far fa-arrow-right"></i>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    {if $kbcats}
        <div class="dashboard-kb-tags">
            <span class="dashboard-kb-tags__label"><i class="far fa-sparkles"></i> Browse topics</span>
            {foreach $kbcats as $category}
                <a href="{routePath('knowledgebase-category-view', {$category.id}, {$category.urlfriendlyname})}" class="dashboard-kb-tag">{$category.name}</a>
            {/foreach}
        </div>
    {/if}
</section>

<section class="dashboard-kb-layout">
    <div class="dashboard-kb-main dashboard-panel">
        <div class="dashboard-panel__header">
            <div>
                <h2 class="dashboard-panel__title">{lang key='knowledgebasepopular'}</h2>
                <p class="dashboard-panel__copy">Start with the most useful guides clients open first.</p>
            </div>
            <span class="dashboard-kb-section-badge">{$kbmostviews|@count|default:0}</span>
        </div>
        <div class="dashboard-kb-list">
            {if $kbmostviews}
                {foreach $kbmostviews as $kbarticle}
                    <a href="{routePath('knowledgebase-article-view', {$kbarticle.id}, {$kbarticle.urlfriendlytitle})}" class="dashboard-kb-list__item" data-id="{$kbarticle.id}">
                        <span class="dashboard-kb-list__icon"><i class="far fa-file-alt"></i></span>
                        <span class="dashboard-kb-list__copy">
                            <strong>{$kbarticle.title}</strong>
                            <small>{$kbarticle.article|truncate:140:"..."}</small>
                        </span>
                        {if $kbarticle.tags}
                            <span class="dashboard-kb-list__tag">{$kbarticle.tags}</span>
                        {/if}
                        <span class="dashboard-kb-list__arrow"><i class="far fa-angle-right"></i></span>
                    </a>
                {/foreach}
            {elseif $kbcats}
                {foreach $kbcats as $category}
                    <a href="{routePath('knowledgebase-category-view', {$category.id}, {$category.urlfriendlyname})}" class="dashboard-kb-list__item" data-id="{$category.id}">
                        <span class="dashboard-kb-list__icon"><i class="far fa-folder"></i></span>
                        <span class="dashboard-kb-list__copy">
                            <strong>{$category.name}</strong>
                            <small>{$category.description}</small>
                        </span>
                        <span class="dashboard-kb-list__tag">{lang key="knowledgebase.numArticle{if $category.numarticles != 1}s{/if}" num=$category.numarticles}</span>
                        <span class="dashboard-kb-list__arrow"><i class="far fa-angle-right"></i></span>
                    </a>
                {/foreach}
            {else}
                {include file="$template/includes/alert.tpl" type="info" msg="{lang key='knowledgebasenoarticles'}" textcenter=true}
            {/if}
        </div>
        <div class="dashboard-kb-footer-action">
            <a href="{routePath('knowledgebase-index')}" class="btn btn-default">{lang key='viewAll'|default:{lang key='knowledgebasetitle'}}</a>
        </div>
    </div>
    <aside class="dashboard-kb-aside">
        <div class="dashboard-kb-help">
            <span class="dashboard-kb-help__eyebrow">Need a human?</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>
        {if $kbcats}
            <div class="dashboard-panel">
                <div class="dashboard-panel__header">
                    <div>
                        <h3 class="dashboard-panel__title">{lang key='knowledgebasecategories'}</h3>
                        <p class="dashboard-panel__copy">Browse by topic instead of scrolling through everything.</p>
                    </div>
                </div>
                <div class="dashboard-kb-categories">
                    {foreach $kbcats as $category}
                        <a href="{routePath('knowledgebase-category-view', {$category.id}, {$category.urlfriendlyname})}" class="dashboard-kb-category">
                            <span class="dashboard-kb-category__icon"><i class="far fa-folder-open"></i></span>
                            <span class="dashboard-kb-category__name">{$category.name}</span>
                            <span class="dashboard-kb-category__count">{$category.numarticles}</span>
                        </a>
                    {/foreach}
                </div>
            </div>
        {/if}
    </aside>
</section>

<section class="dashboard-kb-highlights">
    <article class="dashboard-kb-highlight">
        <i class="far fa-magnifying-glass"></i>
        <div>
            <strong>{lang key='search'}</strong>
            <p>Use the search bar to jump straight to the right answer.</p>
        </div>
    </article>
    <article class="dashboard-kb-highlight">
        <i class="far fa-book-open"></i>
        <div>
            <strong>{lang key='knowledgebasetitle'}</strong>
            <p>Discover the most useful product and billing guides first.</p>
        </div>
    </article>
    <article class="dashboard-kb-highlight">
        <i class="far fa-life-ring"></i>
        <div>
            <strong>{lang key='support'}</strong>
            <p>Open a ticket when you need direct help from the team.</p>
        </div>
    </article>
</section>
