{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-welcome">
          <h1 class="ms-welcome-title">欢迎回来，{$profile.nickname}</h1>
          <p class="ms-welcome-sub">{if !empty($level)}{$level.name} · {/if}今天也要元气满满 ✦</p>
          <div class="ms-welcome-stats">
            <div class="ms-welcome-stat"><b>{$profile.points}</b><span>可用积分</span></div>
            <div class="ms-welcome-stat"><b>{$profile.total_points}</b><span>累计积分</span></div>
            <div class="ms-welcome-stat"><b>{$unread}</b><span>未读消息</span></div>
          </div>
        </div>

        {if empty($my_vip)}
        <div class="ms-card">
          <div class="ms-card-body">
            <div class="ms-section-title">开通 VIP，解锁付费内容与专属特权</div>
            <a class="ms-btn ms-btn-accent ms-btn-sm" style="margin-top:14px" href="{$entry_prefix}/member/vip">查看套餐</a>
          </div>
        </div>
        {/if}

        <div class="ms-card">
          <div class="ms-card-head">
            <span class="ms-card-title">快捷入口</span>
          </div>
          <div class="ms-card-body">
            <div class="ms-quick">
              <a href="{$entry_prefix}/member/submit">我要投稿</a>
              <a href="{$entry_prefix}/member/favorites">我的收藏</a>
              <a href="{$entry_prefix}/member/messages">消息通知</a>
              {if !empty($appt_enabled)}<a href="{$entry_prefix}/member/appointment">在线预约</a>{/if}
              <a href="{$entry_prefix}/member/vip">我的 VIP</a>
              <a href="{$entry_prefix}/members">会员列表</a>
            </div>
          </div>
        </div>

        <div class="ms-card">
          <div class="ms-card-head">
            <span class="ms-card-title">每日签到</span>
            <span class="ms-card-sub">连续签到可得更多积分</span>
          </div>
          <div class="ms-card-body">
            <div class="ms-activity" style="border:0;padding:0">
              <div class="ms-activity-main">
                <p class="ms-activity-title">
                  {if $signin.signed}今日已签到{else}今日未签到{/if}
                  {if $signin.streak > 0}<span class="ms-card-sub">已连续 {$signin.streak} 天</span>{/if}
                </p>
                <p class="ms-activity-time">累计积分 {$profile.total_points}</p>
              </div>
              <button class="ms-btn ms-btn-primary" id="memberSignin" type="button" {if $signin.signed}disabled{/if}>
                {if $signin.signed}已签到{else}签到 +{$signin_points}{/if}
              </button>
            </div>
          </div>
        </div>

        <div class="ms-card">
          <div class="ms-card-head">
            <span class="ms-card-title">我的投稿</span>
            <a class="ms-card-sub" href="{$entry_prefix}/member/submits">查看全部 →</a>
          </div>
          <div class="ms-card-body">
            <p class="ms-section-desc">已通过 {$earning.count} 篇，累计获得 {$earning.points} 积分</p>
            {if !empty($submits.items)}
            <div class="ms-feed">
              {loop $submits.items as $s}
              <li>
                <div class="ms-activity-main">
                  <p class="ms-activity-title">
                    {if $s.url}<a href="{$s.url}">{$s.title}</a>{else}{$s.title}{/if}
                  </p>
                  <p class="ms-activity-time">{$s.created_at_format} · {$s.status_name}</p>
                </div>
                {if $s.points > 0}<span class="ms-amount is-plus">+{$s.points}</span>{/if}
              </li>
              {/loop}
            </div>
            {else}
            <div class="ms-empty" style="padding:24px 0">
              <div class="ms-empty-title">还没有投稿</div>
              去发布你的第一篇内容吧，<a href="{$entry_prefix}/member/submit">立即投稿</a>
            </div>
            {/if}
          </div>
        </div>

        {if !empty($appt_enabled)}
        <div class="ms-card">
          <div class="ms-card-head">
            <span class="ms-card-title">我的预约</span>
            <a class="ms-card-sub" href="{$entry_prefix}/member/appointments">全部预约 →</a>
          </div>
          <div class="ms-card-body">
            {if !empty($appt.pending)}
            <p class="ms-section-desc">你有 <b>{$appt.pending}</b> 笔待处理的预约</p>
            {if !empty($appt.upcoming)}
            <div class="ms-appt-list">
              <div class="ms-appt">
                <div class="ms-appt-date">
                  <span class="ms-appt-day">{$appt.upcoming.day}</span>
                  <span class="ms-appt-month">{$appt.upcoming.month} 月</span>
                </div>
                <div class="ms-appt-main">
                  <p class="ms-appt-service">{$appt.upcoming.service}
                    <span class="ms-st ms-st-{$appt.upcoming.status}">{$appt.upcoming.status_name}</span>
                  </p>
                  <p class="ms-appt-meta">{$appt.upcoming.appoint_date} {$appt.upcoming.appoint_time}</p>
                </div>
              </div>
            </div>
            {/if}
            {else}
            <div class="ms-empty" style="padding:24px 0">
              <div class="ms-empty-title">还没有预约</div>
              <a href="{$entry_prefix}/member/appointment">立即预约</a>
            </div>
            {/if}
          </div>
        </div>
        {/if}

        <div class="ms-card">
          <div class="ms-card-head">
            <span class="ms-card-title">最近积分明细</span>
          </div>
          <div class="ms-card-body">
            {if !empty($point_logs.items)}
            <div class="ms-feed">
              {loop $point_logs.items as $log}
              <li>
                <div class="ms-activity-main">
                  <p class="ms-activity-title">{$log.scene_name}</p>
                  <p class="ms-activity-time">{$log.created_at_format} · 余额 {$log.balance}</p>
                </div>
                {if $log.change > 0}
                <span class="ms-amount is-plus">+{$log.change}</span>
                {else}
                <span class="ms-amount is-minus">{$log.change}</span>
                {/if}
              </li>
              {/loop}
            </div>
            {else}
            <div class="ms-empty" style="padding:24px 0">暂无积分记录</div>
            {/if}
          </div>
        </div>
      </main>

    </div>
  </div>
</div>
<script src="/plugin/member/static/member.js" defer></script>