{layout layout}
{* Node imagery: banner as the page header background, thumb as a small icon
   before the title. Both are set in the admin node editor; when unset the
   header stays plain text (no extra class), so existing colours are untouched. *}
<section class="page-head{if !empty($node.banner)} page-head--hero{/if}"{if !empty($node.banner)} style="background-image:url('{$node.banner}')"{/if}>
  <div class="container">
    <nav class="breadcrumb" aria-label="{lang common.breadcrumb}">
      <a href="/">{lang common.home}</a>
      <span>/</span>
      <span>{$node.name}</span>
    </nav>
    {if !empty($node.thumb)}<img class="page-icon" src="{$node.thumb}" alt="{$node.name}">{/if}
    <h1 class="page-title">{if !empty($node.title)}{$node.title}{else}{$node.name}{/if}</h1>
    {if !empty($node.description)}<p class="page-desc">{$node.description}</p>{/if}
  </div>
</section>

<div class="container home-layout">
  <div class="home-main">
    {if !empty($list)}
    <ul class="feed__list">
      {loop $list as $item}
      <li class="feed-item">
        <a class="feed-item__thumb" href="{$item.url}">
          {if !empty($item.thumb)}
          <img src="{$item.thumb|thumb=200}" alt="{$item.title}" loading="lazy">
          {else}
          <span class="feed-item__thumb-ph">A</span>
          {/if}
        </a>
        <div class="feed-item__body">
          <h3 class="feed-item__title"><a href="{$item.url}">{$item.title}</a></h3>
          {if !empty($item.subtitle)}<p class="feed-item__sub">{$item.subtitle|limit=50}</p>{/if}
          <p class="feed-item__desc">{$item.description|limit=100}</p>
          <div class="feed-item__meta">
            <span>{$item.created_at|date=Y-m-d}</span>
            <span>{$item.views|default=0} {lang common.views_unit}</span>
            {if !empty($item.tags_array)}<span class="feed-item__tag">{$item.tags_array[0]}</span>{/if}
          </div>
        </div>
      </li>
      {/loop}
    </ul>
    {if !empty($pager)}{include common/pager}{/if}
    {else}
    <div class="empty-state">
      <h3 class="empty-state__title">{lang common.empty_title}</h3>
      <p>{lang common.empty_desc}</p>
    </div>
    {/if}
  </div>

  <aside class="home-side">
    {if !empty($hot)}
    <section class="side-card">
      <h3 class="side-card__title">{lang home.sidebar_hot}</h3>
      <ol class="hot-list">
        {loop $hot as $h}
        <li class="hot-item">
          <span class="hot-item__no" aria-hidden="true"></span>
          <a class="hot-item__title" href="{$h.url}">{$h.title|limit=26}</a>
          <span class="hot-item__views">{$h.views|default=0}</span>
        </li>
        {/loop}
      </ol>
    </section>
    {/if}

    {if !empty($nodes)}
    <section class="side-card">
      <h3 class="side-card__title">{lang home.sidebar_nav}</h3>
      <ul class="side-nav">
        {loop $nodes as $i => $nav}
        {if $i < 10}
        <li><a href="{$nav.url}">{$nav.name}</a></li>
        {/if}
        {/loop}
      </ul>
    </section>
    {/if}

    {if !empty($tags)}
    <section class="side-card">
      <h3 class="side-card__title">{lang home.sidebar_tags}</h3>
      <div class="side-tags">
        {loop $tags as $t => $c}
        <a class="side-tag" href="{$entry_prefix}/tag/{$t}">#{$t}</a>
        {/loop}
      </div>
    </section>
    {/if}
  </aside>
</div>