{layout layout}
<link rel="stylesheet" href="/plugin/member/static/member-system.css">
<link rel="stylesheet" href="/plugin/member/static/member.css">
<div class="ms-page">
  <div class="container">
    <div class="ms-layout">

      <aside class="ms-aside">
        <div class="ms-profile-card">
          <div class="ms-avatar ms-avatar-lg" style="{$avatar_style}">
            {if !empty($profile.avatar)}
            <img src="{$profile.avatar}" alt="{$profile.nickname}">
            {else}
            {$avatar_char}
            {/if}
          </div>
          <p class="ms-profile-name">{$profile.nickname}</p>
          <p class="ms-profile-meta">
            {if !empty($level)}<span class="ms-level" style="background:{$level.color}">{$level.name}</span>{/if}
          </p>
          <div class="ms-points">
            <div class="ms-points-num">{if !empty($profile)}{$profile.points}{else}0{/if}</div>
            <div class="ms-points-label">可用积分</div>
          </div>
        </div>

        <ul class="ms-nav">
          <li><a href="{$entry_prefix}/member/center" class="{if $nav_active=='center'}is-active{/if}">会员中心</a></li>
          <li><a href="{$entry_prefix}/member/profile" class="{if $nav_active=='profile'}is-active{/if}">资料设置</a></li>
          {if !empty($appt_enabled)}
          <li><a href="{$entry_prefix}/member/appointments" class="{if $nav_active=='appointments'}is-active{/if}">我的预约</a></li>
          {/if}
          <li><a href="{$entry_prefix}/member/vip" class="{if $nav_active=='vip'}is-active{/if}">我的 VIP</a></li>
          <li><a href="{$entry_prefix}/member/submit" class="{if $nav_active=='submit'}is-active{/if}">我要投稿</a></li>
          <li><a href="{$entry_prefix}/member/submits" class="{if $nav_active=='submits'}is-active{/if}">我的投稿</a></li>
          <li><a href="{$entry_prefix}/member/favorites" class="{if $nav_active=='favorites'}is-active{/if}">我的收藏</a></li>
          <li>
            <a href="{$entry_prefix}/member/messages" class="{if $nav_active=='messages'}is-active{/if}">
              消息通知{if !empty($unread) && $unread>0}<span class="ms-nav-badge">{$unread}</span>{/if}
            </a>
          </li>
          <li><a href="{$entry_prefix}/member/followers" class="{if $nav_active=='followers'}is-active{/if}">我的粉丝</a></li>
          <li><a href="{$entry_prefix}/members">会员列表</a></li>
          {if !empty($wallet_enabled)}<li><a href="{$entry_prefix}/member/wallet">我的资产</a></li>{/if}
          {if !empty($vip_enabled)}<li><a href="{$entry_prefix}/member/vip">我的 VIP</a></li>{/if}
          {if !empty($socialauth_enabled)}<li><a href="{$entry_prefix}/member/binds">社交账号</a></li>{/if}
        </ul>
      </aside>

      <main>
        <div class="ms-head">
          <div>
            <h1 class="ms-title">{$page_title}</h1>
            <p class="ms-subtitle">粉丝 {$count_followers} · 关注 {$count_following}</p>
          </div>
        </div>

        <div class="ms-tabs">
          <a href="{$entry_prefix}/member/followers?tab=followers" class="{if $tab == 'followers'}is-active{/if}">粉丝 {$count_followers}</a>
          <a href="{$entry_prefix}/member/followers?tab=following" class="{if $tab == 'following'}is-active{/if}">关注 {$count_following}</a>
        </div>

        {if empty($list)}
        <div class="ms-card"><div class="ms-card-body">
          <div class="ms-empty" style="padding:40px">
            <div class="ms-empty-title">{if $tab == 'followers'}还没有人关注你{else}你还没有关注任何人{/if}</div>
          </div>
        </div></div>
        {else}
        <div class="ms-people">
          {loop $list as $m}
          <a class="ms-person" href="{$entry_prefix}/member/{$m.user_id}">
            <span class="ms-avatar" style="background:#6b7280">
              {if !empty($m.avatar)}
              <img src="{$m.avatar}" alt="{$m.nickname}">
              {else}
              {$m.avatar_char}
              {/if}
            </span>
            <span class="ms-person-info">
              <span class="ms-person-name">{$m.nickname}</span>
              <span class="ms-person-meta">
                {if !empty($m.province)}{$m.province}{/if}
              </span>
            </span>
          </a>
          {/loop}
        </div>
        {/if}

        <p style="margin-top:22px"><a class="ms-btn ms-btn-ghost" href="{$entry_prefix}/member/center">返回会员中心</a></p>
      </main>

    </div>
  </div>
</div>