{$layout}

<div class="http-config-container">
  <form class="ui form http-config-form" data-tea-action="$" data-tea-success="success">
    <csrf-token></csrf-token>

    <div class="ui message" v-if="!canVerify">
      <i class="icon warning circle"></i>
      系统暂未开通绑定邮箱功能。
    </div>
    
    <div v-show="canVerify">
      <div class="config-section">
        <div class="section-title">
          <i class="icon envelope"></i>
          邮箱验证
        </div>
        
        <div class="config-item" v-if="verifiedEmail.length > 0">
          <div class="item-label">
            <i class="icon check circle"></i>
            已绑定电子邮箱
          </div>
          <div class="item-content">
            <span>{{verifiedEmail}}</span>
          </div>
        </div>
        
        <div class="config-item" v-if="latestVerification != null">
          <div class="item-label">
            <i class="icon hourglass half"></i>
            等待绑定邮箱
          </div>
          <div class="item-content">
            {{latestVerification.email}}
            <p class="comment" v-if="!latestVerification.isSent">系统正在发送激活链接到此邮箱中，请耐心等待。</p>
            <p class="comment" v-if="latestVerification.isSent"><span class="red">请在{{latestVerification.expiresTime}}前点击邮件中的激活链接进行绑定。</span></p>
          </div>
        </div>
        
        <div class="config-item">
          <div class="item-label">
            <i class="icon at"></i>
            <span v-if="verifiedEmail.length > 0">新</span>绑定电子邮箱 *
          </div>
          <div class="item-content">
            <input type="text" name="email" maxlength="100" ref="focus"/>
          </div>
        </div>
      </div>
      
      <div class="margin"></div>
      <submit-btn>提交</submit-btn> &nbsp; <a href="/settings/profile" v-if="verifiedEmail.length > 0">不修改</a>
    </div>
  </form>
</div>