{layout layout}
<link rel="stylesheet" href="{$asset_member_system}">
<link rel="stylesheet" href="{$asset_community_css}">
<div class="mc-page">
  <div class="container">

    {* ---------------- 页头：标题 + 搜索 ---------------- *}
    <header class="mc-pagehead">
      <div class="mc-pagehead-copy">
        <p class="mc-eyebrow">MEMBERS</p>
        <h1 class="mc-h1">会员列表</h1>
        <p class="mc-lead">
          共 <b>{$total_members}</b> 位会员{if $list.total != $total_members}，当前筛选 <b>{$list.total}</b> 位{/if}{if $vip_only}（仅展示 VIP 会员）{/if}
        </p>
      </div>

      <form class="mc-search" method="get" action="{$entry_prefix}/members" role="search">
        {loop $preserve as $pf}
        <input type="hidden" name="{$pf.name}" value="{$pf.value}">
        {/loop}
        <label class="mc-search-field">
          <svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><circle cx="11" cy="11" r="7" fill="none" stroke="currentColor" stroke-width="2"/><path d="M16.5 16.5L21 21" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
          <input type="text" name="keyword" value="{$filters.keyword}" placeholder="搜索昵称 / 简介" autocomplete="off">
        </label>
        <select class="mc-select" name="order" onchange="this.form.submit()" aria-label="排序方式">
          <option value="points_desc"{if $filters.order == 'points_desc'} selected{/if}>积分从高到低</option>
          <option value="points_asc"{if $filters.order == 'points_asc'} selected{/if}>积分从低到高</option>
          <option value="newest"{if $filters.order == 'newest'} selected{/if}>最新加入</option>
          <option value="oldest"{if $filters.order == 'oldest'} selected{/if}>最早加入</option>
        </select>
        <button class="mc-btn mc-btn-primary" type="submit">搜索</button>
      </form>
    </header>

    {* ---------------- 筛选面板 ---------------- *}
    <section class="mc-filters" aria-label="筛选条件">
      <div class="mc-filter-row">
        <span class="mc-filter-label">地区</span>
        <div class="mc-chips">
          <a class="mc-chip{if $filters.province == ''} is-active{/if}" href="{$chips.province_all}">全部</a>
          {loop $chips.province as $c}
          <a class="mc-chip{if $c.active} is-active{/if}" href="{$c.url}">{$c.name}{if $c.count > 0}<i>{$c.count}</i>{/if}</a>
          {/loop}
        </div>
      </div>

      {if !empty($chips.city)}
      <div class="mc-filter-row">
        <span class="mc-filter-label">城市</span>
        <div class="mc-chips">
          <a class="mc-chip{if $filters.city == ''} is-active{/if}" href="{$chips.city_all}">全部</a>
          {loop $chips.city as $c}
          <a class="mc-chip{if $c.active} is-active{/if}" href="{$c.url}">{$c.name}{if $c.count > 0}<i>{$c.count}</i>{/if}</a>
          {/loop}
        </div>
      </div>
      {/if}

      {if !empty($chips.district)}
      <div class="mc-filter-row">
        <span class="mc-filter-label">区县</span>
        <div class="mc-chips">
          <a class="mc-chip{if $filters.district == ''} is-active{/if}" href="{$chips.district_all}">全部</a>
          {loop $chips.district as $c}
          <a class="mc-chip{if $c.active} is-active{/if}" href="{$c.url}">{$c.name}{if $c.count > 0}<i>{$c.count}</i>{/if}</a>
          {/loop}
        </div>
      </div>
      {/if}

      {if !empty($chips.industry)}
      <div class="mc-filter-row">
        <span class="mc-filter-label">行业</span>
        <div class="mc-chips">
          <a class="mc-chip{if empty($filters.custom.industry)} is-active{/if}" href="{$chips.industry_all}">全部</a>
          {loop $chips.industry as $c}
          <a class="mc-chip{if $c.active} is-active{/if}" href="{$c.url}">{$c.name}</a>
          {/loop}
        </div>
      </div>
      {/if}

      {if $has_filter}
      <div class="mc-filter-row mc-filter-foot">
        <span class="mc-filter-label">已筛选</span>
        <div class="mc-chips">
          <a class="mc-chip is-clear" href="{$entry_prefix}/members">
            <svg viewBox="0 0 24 24" width="12" height="12" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"/></svg>
            清除全部筛选
          </a>
        </div>
      </div>
      {/if}
    </section>

    {* ---------------- 会员卡片 ---------------- *}
    {if !empty($list.items)}
    <div class="mc-grid">
      {loop $list.items as $m}
      <article class="mc-card">
        <a class="mc-card-cover" href="{$entry_prefix}/member/{$m.user_id}" tabindex="-1" aria-hidden="true">
          {if !empty($m.cover)}
          <img src="{$m.cover}" alt="" loading="lazy">
          {else}
          <span class="mc-card-cover-ph">{$m.avatar_char}</span>
          {/if}
        </a>

        <div class="mc-card-body">
          <a class="mc-avatar" href="{$entry_prefix}/member/{$m.user_id}" aria-hidden="true" tabindex="-1">
            <span class="mc-avatar-ph">{$m.avatar_char}</span>
            {if !empty($m.avatar)}<img src="{$m.avatar}" alt="{$m.nickname}" loading="lazy" onerror="this.remove()">{/if}
          </a>

          <div class="mc-card-head">
            <h2 class="mc-name"><a href="{$entry_prefix}/member/{$m.user_id}">{$m.nickname}</a></h2>
            {if !empty($m.region_text)}<p class="mc-loc">{$m.region_text}</p>{/if}
          </div>

          <p class="mc-bio{if empty($m.bio)} is-empty{/if}">{if !empty($m.bio)}{$m.bio}{else}这位会员还没有填写简介{/if}</p>

          {if !empty($m.tag_items)}
          <div class="mc-tags">
            {loop $m.tag_items as $t}
            <span class="mc-tag">{$t.value}</span>
            {/loop}
          </div>
          {/if}

          <div class="mc-stats">
            <div class="mc-stat"><b>{$m.submit_count}</b><span>投稿</span></div>
            <div class="mc-stat"><b>{$m.total_points}</b><span>累计积分</span></div>
            <div class="mc-stat"><b>{if $m.register_at_format}{$m.register_at_format}{else}—{/if}</b><span>加入时间</span></div>
          </div>

          {if !empty($m.submits)}
          <div class="mc-works">
            <p class="mc-works-title">近期作品</p>
            <ul>
              {loop $m.submits as $s}
              <li>
                <a href="{$s.url}" title="{$s.title}">{$s.title}</a>
                {if $s.points > 0}<i>+{$s.points}</i>{/if}
              </li>
              {/loop}
            </ul>
          </div>
          {/if}
        </div>

        <div class="mc-card-actions">
          {if !empty($appt.enabled)}
          <button class="mc-btn mc-btn-primary" type="button" data-appt-open data-member-id="{$m.user_id}">预约 TA</button>
          {/if}
          <a class="mc-btn mc-btn-ghost" href="{$entry_prefix}/member/{$m.user_id}">查看主页</a>
        </div>
      </article>
      {/loop}
    </div>

    {if $pager.last_page > 1}
    <nav class="mc-pager" aria-label="分页">
      {if $pager.has_prev}<a href="{$pager.prev_url}">上一页</a>{else}<span class="is-disabled">上一页</span>{/if}
      {loop $pager.items as $it}
      {if $it == 0}<span class="is-disabled">…</span>
      {elseif $it.current}<span class="is-current">{$it.page}</span>
      {else}<a href="{$it.url}">{$it.page}</a>{/if}
      {/loop}
      {if $pager.has_next}<a href="{$pager.next_url}">下一页</a>{else}<span class="is-disabled">下一页</span>{/if}
    </nav>
    {/if}

    {else}
    <div class="mc-empty">
      <svg viewBox="0 0 64 64" width="56" height="56" aria-hidden="true"><circle cx="32" cy="32" r="30" fill="#eef2f9"/><circle cx="32" cy="26" r="10" fill="#c9d6ea"/><path d="M14 52c2-10 9-15 18-15s16 5 18 15" fill="#c9d6ea"/></svg>
      <p class="mc-empty-title">{if $has_filter}没有符合条件的会员{else}暂无会员{/if}</p>
      <p class="mc-empty-sub">{if $has_filter}换个筛选条件试试，或清除全部条件查看所有会员。{else}还没有会员入驻，稍后再来看看。{/if}</p>
      {if $has_filter}<a class="mc-btn mc-btn-primary" href="{$entry_prefix}/members">清除筛选</a>{/if}
    </div>
    {/if}

  </div>
</div>

{include community/_appt_modal}
<script src="/plugin/member-community/static/community.js" defer></script>