{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">
          </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">在线预约</h1>
            <p class="ms-subtitle">选择项目与时段，我们会尽快与你确认</p>
          </div>
          <div class="ms-head-actions">
            <a class="ms-btn" href="{$entry_prefix}/member/appointments">我的预约</a>
          </div>
        </div>

        {if !$enabled}
        <div class="ms-card"><div class="ms-card-body">
          <div class="ms-empty" style="padding:32px">
            <div class="ms-empty-title">预约功能暂未开放</div>
          </div>
        </div></div>
        {else}
        <div class="ms-split" style="grid-template-columns:minmax(0,1fr) 300px;align-items:start">
          <div class="ms-card">
            <div class="ms-card-head"><span class="ms-card-title">填写预约信息</span></div>
            <div class="ms-card-body">
              <form method="post" action="{$entry_prefix}/member/appointment">
                <input type="hidden" name="_token" value="{$csrf}">
                <input type="hidden" name="_form_token" value="{$form_token}">

                {loop $fields as $f}
                <div class="ms-field" style="margin-bottom:16px">
                  <label class="ms-label" for="af_{$f.name}">{$f.label}{if $f.required} <span style="color:#dc2626">*</span>{/if}</label>

                  {if $f.type == 'textarea'}
                  <textarea class="ms-textarea" id="af_{$f.name}" name="{$f.name}" rows="3" placeholder="{$f.placeholder}">{$prefill[$f.name]}</textarea>

                  {elseif $f.type == 'select'}
                  <select class="ms-select" id="af_{$f.name}" name="{$f.name}">
                    <option value="">请选择{$f.label}</option>
                    {loop $f.options as $opt}
                    <option value="{$opt}">{$opt}</option>
                    {/loop}
                  </select>

                  {elseif $f.type == 'date'}
                  <input class="ms-input" id="af_{$f.name}" type="date" name="{$f.name}" min="{$today}" max="{$max_date}" value="{$today}">

                  {else}
                  <input class="ms-input" id="af_{$f.name}" type="{$f.type}" name="{$f.name}" value="{$prefill[$f.name]}" placeholder="{$f.placeholder}" maxlength="60">
                  {/if}

                  {if !empty($f.hint)}<p class="ms-field-hint">{$f.hint}</p>{/if}
                </div>
                {/loop}

                <div class="ms-savebar">
                  <button class="ms-btn ms-btn-primary ms-btn-block" type="submit" style="width:auto">提交预约</button>
                </div>
              </form>
            </div>
          </div>

          <aside>
            <div class="ms-notice">
              <p class="ms-notice-title">预约须知</p>
              {if !empty($notice)}
              <p>{$notice}</p>
              {else}
              <p>请按预约时段到店，如需改期请提前在「我的预约」中取消后重新预约。</p>
              {/if}
              <p style="margin-top:10px">每日最多可预约 {if !empty($daily_limit)}{$daily_limit}{else}2{/if} 次。</p>
            </div>
          </aside>
        </div>
        {/if}

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

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