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

    <nav class="mc-crumb" aria-label="面包屑">
      <a href="{$entry_prefix}/">首页</a><span>/</span><a href="{$entry_prefix}/members">会员列表</a><span>/</span><b>{$profile.nickname}</b>
    </nav>

    {* ---------------- 个人主页头部 ---------------- *}
    <section class="mc-profile">
      <div class="mc-profile-cover">
        <span class="mc-profile-cover-deco"></span>
      </div>

      <div class="mc-profile-head">
        <div class="mc-profile-avatar">
          <span>{$avatar_char}</span>
          {if !empty($profile.avatar)}
          <img src="{$profile.avatar}" alt="{$profile.nickname}" onerror="this.remove()">
          {/if}
        </div>

        <div class="mc-profile-id">
          <h1 class="mc-profile-name">{$profile.nickname}</h1>
          <p class="mc-profile-meta">
            <span class="mc-meta-item">
              <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M12 21s7-5.5 7-11a7 7 0 10-14 0c0 5.5 7 11 7 11z" fill="none" stroke="currentColor" stroke-width="1.8"/><circle cx="12" cy="10" r="2.4" fill="none" stroke="currentColor" stroke-width="1.8"/></svg>
              {if !empty($profile.region_text)}{$profile.region_text}{else}未填写地区{/if}
            </span>
            {if $profile.register_at_format}
            <span class="mc-meta-item">加入于 {$profile.register_at_format}</span>
            {/if}
            <span class="mc-meta-item">{$followers} 位粉丝</span>
          </p>

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

        <div class="mc-profile-actions">
          {if $is_self}
          <a class="mc-btn mc-btn-primary" href="{$entry_prefix}/member/center">进入会员中心</a>
          <a class="mc-btn mc-btn-ghost" href="{$entry_prefix}/member/profile">编辑资料</a>
          {else}
          {if !empty($appt.enabled)}
          <button class="mc-btn mc-btn-primary" type="button" data-appt-open data-member-id="{$profile.user_id}">预约 TA</button>
          {/if}
          <button class="mc-btn{if $is_following} is-following{else} mc-btn-ghost{/if}" type="button"
            data-member-action="follow" data-user-id="{$profile.user_id}" data-url="{$entry_prefix}/member/follow">
            {if $is_following}已关注{else}关注 TA{/if}
          </button>
          {/if}
          {if $is_self && !empty($appt.enabled)}
          <a class="mc-btn mc-btn-ghost" href="{$entry_prefix}/member/appointments">我的预约</a>
          {/if}
        </div>
      </div>

      <div class="mc-profile-stats">
        <div class="mc-pstat"><b>{$earning.count}</b><span>发布作品</span></div>
        <div class="mc-pstat"><b>{$profile.total_points}</b><span>累计积分</span></div>
        <div class="mc-pstat"><b>{$earning.points}</b><span>投稿收益</span></div>
        <div class="mc-pstat"><b>{$followers}</b><span>粉丝</span></div>
      </div>
    </section>

    {* ---------------- 正文双栏 ---------------- *}
    <div class="mc-body">
      <main class="mc-main">

        <section class="mc-panel">
          <div class="mc-panel-head">
            <h2>作品</h2>
            <span class="mc-panel-sub">{if $is_self}已发布 {$earning.count} 篇，累计 {$earning.points} 积分{else}TA 的公开作品{/if}</span>
          </div>

          {if !empty($submits)}
          <div class="mc-works-grid">
            {loop $submits as $s}
            <a class="mc-work" href="{$s.url}">
              <span class="mc-work-cover">
                {if !empty($s.thumb)}
                <img src="{$s.thumb}" alt="{$s.title}" loading="lazy">
                {else}
                <span class="mc-work-ph">{$s.title_char}</span>
                {/if}
              </span>
              <span class="mc-work-body">
                <span class="mc-work-title">{$s.title}</span>
                {if !empty($s.summary)}<span class="mc-work-desc">{$s.summary}</span>{/if}
                <span class="mc-work-meta">
                  <span>{if $s.date}{$s.date}{else}—{/if}</span>
                  {if $s.points > 0}<i>+{$s.points} 积分</i>{/if}
                </span>
              </span>
            </a>
            {/loop}
          </div>
          {if $is_self && $earning.count > 10}
          <p class="mc-panel-more"><a class="mc-btn mc-btn-ghost" href="{$entry_prefix}/member/submits">查看我的全部投稿 →</a></p>
          {/if}
          {else}
          <div class="mc-empty mc-empty-inner">
            <svg viewBox="0 0 64 64" width="52" height="52" aria-hidden="true"><rect x="10" y="14" width="44" height="36" rx="5" fill="#eef2f9"/><path d="M18 24h28M18 32h20M18 40h14" stroke="#c9d6ea" stroke-width="3" stroke-linecap="round"/></svg>
            <p class="mc-empty-title">{if $is_self}还没有通过审核的作品{else}TA 还没有发布作品{/if}</p>
            {if $is_self}<a class="mc-btn mc-btn-primary" href="{$entry_prefix}/member/submit">去投稿</a>{/if}
          </div>
          {/if}
        </section>

        <section class="mc-panel">
          <div class="mc-panel-head"><h2>关于 {$profile.nickname}</h2></div>
          <div class="mc-about">
            <p class="mc-about-bio{if empty($profile.bio)} is-empty{/if}">{if !empty($profile.bio)}{$profile.bio}{else}这位会员还没有填写简介。{/if}</p>

            <dl class="mc-facts">
              <div class="mc-fact"><dt>所在地区</dt><dd>{if !empty($profile.region_text)}{$profile.region_text}{else}未填写{/if}</dd></div>
              {if !empty($profile.tag_items)}
              {loop $profile.tag_items as $t}
              <div class="mc-fact"><dt>{$t.label}</dt><dd>{$t.value}</dd></div>
              {/loop}
              {/if}
              {if !empty($profile.website)}
              <div class="mc-fact"><dt>个人网站</dt><dd><a href="{$profile.website}" rel="nofollow noopener" target="_blank">{$profile.website}</a></dd></div>
              {/if}
            </dl>
          </div>
        </section>

      </main>

      <aside class="mc-side">
        <section class="mc-panel mc-cta">
          {if $is_self}
          <h3>这是你的主页</h3>
          <p>完善资料、发布作品，让更多人认识你。</p>
          <a class="mc-btn mc-btn-primary mc-btn-block" href="{$entry_prefix}/member/profile">完善资料</a>
          {else}
          <h3>联系 {$profile.nickname}</h3>
          <p>留下联系方式与需求，TA 会尽快与你沟通。</p>
          {if !empty($appt.enabled)}
          <button class="mc-btn mc-btn-primary mc-btn-block" type="button" data-appt-open data-member-id="{$profile.user_id}">立即预约</button>
          {else}
          <p class="mc-cta-hint">该会员暂时不接受在线预约。</p>
          {/if}
          <button class="mc-btn mc-btn-ghost mc-btn-block{if $is_following} is-following{/if}" type="button"
            data-member-action="follow" data-user-id="{$profile.user_id}" data-url="{$entry_prefix}/member/follow">
            {if $is_following}已关注{else}关注 TA{/if}
          </button>
          {/if}
        </section>

        <section class="mc-panel mc-contact">
          <h3>基本信息</h3>
          <ul class="mc-info">
            <li><span>所在地</span><b>{if !empty($profile.region_text)}{$profile.region_text}{else}未填写{/if}</b></li>
            <li><span>加入时间</span><b>{if $profile.register_at_format}{$profile.register_at_format}{else}—{/if}</b></li>
            <li><span>发布作品</span><b>{$earning.count} 篇</b></li>
            <li><span>粉丝</span><b>{$followers}</b></li>
          </ul>
        </section>

        <a class="mc-back" href="{$entry_prefix}/members">
          <svg viewBox="0 0 24 24" width="14" height="14" aria-hidden="true"><path d="M14 6l-6 6 6 6" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
          返回会员列表
        </a>
      </aside>
    </div>

  </div>
</div>

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