{include file="_partials/head.tpl"}

<div class="page-head page-head-compact">
  <h1>{lang key="shop.customers_list.title"} <span class="page-head-count">{pagination.total}</span></h1>
  <div class="actions">
    <a class="btn btn-primary" href="/admin/shop/orders/create">{icon name="plus" size="14"} {lang key="shop.orders_list.new_order"}</a>
  </div>
</div>

<div class="filters-bar">
  <form method="get" action="/admin/shop/customers" class="filters-form">
    <input type="search" name="q" value="{q}" placeholder="{lang key="shop.customers_list.search_placeholder"}">
    [if {tab}]<input type="hidden" name="tab" value="{tab}">[/if]
    <select name="sort">
      <option value="recent" [if {sort}="recent"]selected[/if]>{lang key="shop.customers_list.sort.recent"}</option>
      <option value="spent" [if {sort}="spent"]selected[/if]>{lang key="shop.customers_list.sort.spent"}</option>
      <option value="orders" [if {sort}="orders"]selected[/if]>{lang key="shop.customers_list.sort.orders"}</option>
      <option value="newest" [if {sort}="newest"]selected[/if]>{lang key="shop.customers_list.sort.newest"}</option>
      <option value="name" [if {sort}="name"]selected[/if]>{lang key="shop.customers_list.sort.name"}</option>
    </select>
    <button type="submit" class="btn btn-secondary">{lang key="shop.common.apply"}</button>
    [if {q}]<a href="/admin/shop/customers[if {tab}]?tab={tab}[/if]" class="btn btn-link">{lang key="shop.common.reset"}</a>[/if]
  </form>
</div>

<div class="tabs-bar">
  <a href="/admin/shop/customers[if {q}]?q={q}[/if]" class="tab [if {tab}="all"]is-active[/if]">{lang key="shop.customers_list.tabs.all"} <span class="tab-count">{tab_counts.all}</span></a>
  <a href="/admin/shop/customers?tab=vip[if {q}]&q={q}[/if]" class="tab [if {tab}="vip"]is-active[/if]">VIP <span class="tab-count">{tab_counts.vip}</span></a>
  <a href="/admin/shop/customers?tab=repeat[if {q}]&q={q}[/if]" class="tab [if {tab}="repeat"]is-active[/if]">{lang key="shop.customers_list.tabs.repeat"} <span class="tab-count">{tab_counts.repeat}</span></a>
  <a href="/admin/shop/customers?tab=one_time[if {q}]&q={q}[/if]" class="tab [if {tab}="one_time"]is-active[/if]">{lang key="shop.customers_list.tabs.one_time"} <span class="tab-count">{tab_counts.one_time}</span></a>
  <a href="/admin/shop/customers?tab=inactive[if {q}]&q={q}[/if]" class="tab [if {tab}="inactive"]is-active[/if]">{lang key="shop.customers_list.tabs.inactive"} <span class="tab-count">{tab_counts.inactive}</span></a>
</div>

[if {customers}]
<div class="table-wrap">
  <table class="table table-customers">
    <thead>
      <tr>
        <th></th>
        <th>{lang key="shop.customers_list.col.name"}</th>
        <th>{lang key="shop.customers_list.col.orders"}</th>
        <th>{lang key="shop.customers_list.col.spent"}</th>
        <th>{lang key="shop.customers_list.col.last"}</th>
        <th>{lang key="shop.customers_list.col.city"}</th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      [foreach var="customers" as="c"]
        <tr>
          <td><div class="cust-avatar">{c.initials}</div></td>
          <td>
            <a href="/admin/shop/customers/{c.id}" class="row-link">
              <div class="cust-name">{c.name} [if {c.is_vip}]<span class="cust-vip-tag">VIP</span>[/if]</div>
              <small class="muted">{c.email}[if {c.phone}] · {c.phone}[/if]</small>
            </a>
          </td>
          <td><b>{c.orders_count}</b></td>
          <td><b>{c.total_spent_fmt}</b></td>
          <td class="muted">{c.last_order_short}</td>
          <td class="muted">{c.city}</td>
          <td><a href="/admin/shop/customers/{c.id}" class="btn btn-link btn-sm">{lang key="shop.customers_list.open"}</a></td>
        </tr>
      [/foreach]
    </tbody>
  </table>
</div>
{include file="_partials/pagination.tpl"}
[else]
<div class="empty-state">
  {icon name="users" size="48"}
  <h3>Клиентов пока нет</h3>
  <p class="muted">База ведётся автоматически: каждый оформленный заказ создаёт или обновляет карточку клиента.</p>
</div>
[/if]

{include file="_partials/foot.tpl"}
