<!-- Витрина магазина (плагин shop). -->
<div class="dash-shop-block">

  <div class="card dash-shop-head">
    <div>
      <h3>{lang key="shop.dashboard_widget.title"}</h3>
      <p class="muted">{lang key="shop.dashboard_widget.subtitle"}</p>
    </div>
    <div class="actions">
      <a class="btn btn-secondary" href="/admin/shop/orders">{icon name="cart" size="14"} {lang key="shop.dashboard_widget.journal"}</a>
      <a class="btn btn-secondary" href="/admin/shop/analytics">{icon name="chart" size="14"} {lang key="shop.dashboard_widget.deep_analytics"}</a>
      <a class="btn btn-primary"   href="/admin/shop/products/create">{lang key="shop.dashboard_widget.add_product"}</a>
    </div>
  </div>

  <!-- KPI -->
  <div class="dash-shop-kpi">
    [foreach var="kpi" as="k"]
      <div class="kpi-card kpi-{k.tone}">
        <div class="kpi-label">{k.label}</div>
        <div class="kpi-value">{k.value}</div>
        <div class="kpi-sub muted">{k.sub}</div>
      </div>
    [/foreach]
  </div>

  <!-- Бар-чарт + триггеры -->
  <div class="dash-shop-row">
    <div class="card dash-shop-chart">
      <div class="card-h">
        <h3>{lang key="shop.analytics.section_dynamics"}</h3>
        <a href="/admin/shop/analytics" class="muted">{lang key="shop.dashboard_widget.detail_link"}</a>
      </div>
      [if {has_data}]
        <div class="chart-bars">
          [foreach var="by_day" as="d"]
            <div class="chart-bar" title="{d.day} · {d.count} сделок · {d.rev_fmt}">
              <span style="height:{d.pct}%"></span>
            </div>
          [/foreach]
        </div>
        <div class="chart-axis muted">
          [foreach var="by_day" as="d"]<span>[if {_index}=0]{d.short}[/if][if {_last}]{d.short}[/if]</span>[/foreach]
        </div>
      [else]
        <div class="dash-empty">
          <div class="dash-empty-ico">{icon name="chart" size="42"}</div>
          <p>{lang key="shop.dashboard_widget.no_deals"}</p>
          <p class="muted">{lang key="shop.dashboard_widget.no_deals_hint"}</p>
        </div>
      [/if]
    </div>

    <div class="card dash-shop-alerts">
      <div class="card-h">
        <h3>{lang key="shop.dashboard_widget.tweak"}</h3>
      </div>
      <ul class="alerts-list">
        [foreach var="alerts" as="a"]
          <li><a href="{a.href}" class="alert-row [if {a.value}=0]is-zero[/if]">
            <span class="alert-ico">{icon name="{a.icon}" size="16"}</span>
            <span class="alert-label">{a.label}</span>
            <span class="alert-num">{a.value}</span>
          </a></li>
        [/foreach]
      </ul>
    </div>
  </div>

  <!-- Каталог + хиты -->
  <div class="dash-shop-row">
    <div class="card">
      <div class="card-h">
        <h3>{lang key="shop.dashboard_widget.catalog"}</h3>
        <a href="/admin/shop/products" class="muted">{lang key="shop.analytics.all_products"}</a>
      </div>
      <div class="catalog-grid">
        [foreach var="catalog" as="c"]
          <a href="{c.href}" class="catalog-cell">
            <div class="catalog-num">{c.value}</div>
            <div class="catalog-cap">{c.label}</div>
          </a>
        [/foreach]
      </div>
    </div>

    <div class="card">
      <div class="card-h">
        <h3>{lang key="shop.dashboard_widget.hits"}</h3>
        <span class="muted">{lang key="shop.dashboard_widget.by_reviews"}</span>
      </div>
      [if {hits}]
        <ol class="hits-list">
          [foreach var="hits" as="h"]
            <li>
              <span class="hits-pos">{h.position}</span>
              <a href="/admin/shop/products/{h.id}/edit" class="hits-title">{h.title}</a>
              <div class="hits-meta muted">
                {h.price_fmt}
                [if {h.rating_count}]· {icon name="star" size="11"} {h.rating_avg} <span>({h.rating_count})</span>[/if]
              </div>
            </li>
          [/foreach]
        </ol>
      [else]
        <p class="muted">{lang key="shop.dashboard_widget.no_products"}</p>
      [/if]
    </div>
  </div>

  <!-- Последние заказы -->
  <div class="card">
    <div class="card-h">
      <h3>{lang key="shop.dashboard_widget.fresh_orders"}</h3>
      <a href="/admin/shop/orders" class="muted">{lang key="shop.dashboard_widget.all_link"}</a>
    </div>
    [if {recent}]
      <table class="table dash-shop-orders">
        <thead><tr><th>{lang key="shop.dashboard_widget.col_number"}</th><th>{lang key="shop.dashboard_widget.col_buyer"}</th><th>{lang key="shop.dashboard_widget.col_total"}</th><th>{lang key="shop.products_list.col.status"}</th><th>{lang key="shop.dashboard_widget.col_created"}</th></tr></thead>
        <tbody>
          [foreach var="recent" as="o"]
            <tr>
              <td><a href="/admin/shop/orders/{o.id}"><code>{o.number}</code></a></td>
              <td>{o.customer_name}</td>
              <td>{o.total_fmt}</td>
              <td><span class="prod-chip-cat">{o.status}</span></td>
              <td><small class="muted">{o.created_at}</small></td>
            </tr>
          [/foreach]
        </tbody>
      </table>
    [else]
      <div class="dash-empty">
        <div class="dash-empty-ico">{icon name="cart" size="42"}</div>
        <p>{lang key="shop.dashboard_widget.no_orders_yet"}</p>
        <p class="muted">{lang key="shop.dashboard_widget.no_orders_hint"}</p>
      </div>
    [/if]
  </div>
</div>
