{{define "interactplus_tasks"}}
<style>
.interactplus-wrap{margin:10px 0 40px}
.ip-hero{background:linear-gradient(135deg,#2E6BE6 0%,#5B8CFF 100%);color:#fff;border-radius:18px;padding:34px 30px 30px;margin:18px 0 26px;box-shadow:0 12px 30px rgba(46,107,230,.20);position:relative;overflow:hidden}
.ip-hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.12)}
.ip-hero h1{margin:0 0 8px;font-size:26px;font-weight:700;letter-spacing:.5px}
.ip-hero .slogan{margin:0 0 20px;font-size:15px;opacity:.95}
.ip-hero .ip-sum{display:flex;flex-wrap:wrap;gap:16px;align-items:center}
.ip-points{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:7px 18px;font-size:14px}
.ip-points b{font-size:18px;margin:0 2px}
.ip-login{display:inline-block;background:#fff;color:#2E6BE6;font-weight:600;border-radius:999px;padding:8px 20px;font-size:14px;text-decoration:none;box-shadow:0 4px 12px rgba(0,0,0,.10)}
.ip-login:hover{background:#EFF4FF}
.ip-flash{background:#EFF4FF;border:1px solid #C9DBFF;color:#2E6BE6;border-radius:12px;padding:12px 18px;margin:0 0 22px;font-size:14px;font-weight:600}
.ip-group{background:#fff;border-radius:16px;padding:22px 24px 18px;margin:0 0 22px;box-shadow:0 4px 18px rgba(70,96,150,.08);border:1px solid #E8EEFB}
.ip-group-head{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding-bottom:14px;border-bottom:1px solid #EEF3FC}
.ip-group-icon{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#EEF4FF,#E3ECFF);color:#2E6BE6;display:flex;align-items:center;justify-content:center}
.ip-group-icon svg{width:22px;height:22px}
.ip-group-title{font-size:18px;font-weight:700;color:#1B2A4A}
.ip-group-progress{margin-left:auto;font-size:13px;color:#7A8BB5}
.ip-group-progress b{color:#2E6BE6}
.ip-progress-track{flex:0 0 auto;width:110px;height:6px;border-radius:3px;background:#E8EEFB;overflow:hidden;margin-left:14px}
.ip-progress-track i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#2E6BE6,#5B8CFF)}
.ip-tasks{display:flex;flex-direction:column;gap:12px}
.ip-task{display:flex;align-items:center;gap:16px;background:#F7FAFF;border:1px solid #E8EEFB;border-radius:14px;padding:14px 16px;transition:box-shadow .18s,border-color .18s}
.ip-task:hover{box-shadow:0 6px 16px rgba(46,107,230,.10);border-color:#C9DBFF}
.ip-task.is-locked{opacity:.82;background:#F4F6FA;border-style:dashed}
.ip-task-icon{width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid #E3ECFF;color:#2E6BE6;display:flex;align-items:center;justify-content:center;flex:none}
.ip-task-icon svg{width:20px;height:20px}
.ip-task-main{flex:1;min-width:0}
.ip-task-title{font-size:15px;font-weight:700;color:#22304F;display:flex;align-items:center;gap:8px}
.ip-task-title svg{width:14px;height:14px;color:#B7C6E8}
.ip-tag-paid{background:linear-gradient(135deg,#FFB547,#FF8A3D);color:#fff;font-size:11px;font-weight:700;border-radius:6px;padding:2px 7px;line-height:1.4;flex:none}
.ip-tag-done{background:#E6F7EE;color:#1FA45B;font-size:12px;font-weight:600;border-radius:999px;padding:4px 12px;white-space:nowrap}
.ip-tag-checkin{background:linear-gradient(135deg,#2E6BE6,#5B8CFF);color:#fff;font-size:12px;font-weight:600;border-radius:999px;padding:4px 12px;white-space:nowrap}
.ip-task-desc{font-size:13px;color:#6B7CA3;margin:3px 0 0}
.ip-task-meta{font-size:12px;color:#9AABCF;margin-top:5px}
.ip-task-meta b{color:#FF8A3D}
.ip-task-act{flex:none;display:flex;align-items:center;gap:8px}
.ip-btn{display:inline-block;background:#2E6BE6;color:#fff;border:none;border-radius:10px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s,transform .1s}
.ip-btn:hover{background:#2158C8}
.ip-btn:active{transform:translateY(1px)}
.ip-btn-ghost{background:#fff;color:#2E6BE6;border:1px solid #C9DBFF;border-radius:10px;padding:7px 15px;font-size:13px;font-weight:600;cursor:pointer;text-decoration:none;transition:background .15s}
.ip-btn-ghost:hover{background:#EEF4FF}
.ip-locked-note{color:#9AABCF;font-size:12px;background:#F0F3F9;border-radius:999px;padding:6px 12px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ip-locked-note svg{width:13px;height:13px}
.ip-empty{color:#9AABCF;font-size:13px;padding:8px 0}
@media (max-width:720px){.ip-progress-track{display:none}.ip-task{flex-wrap:wrap}.ip-task-act{width:100%;justify-content:flex-end}}
</style>
<div class="interactplus-wrap">
  <div class="ip-hero">
    <h1>任务中心</h1>
    <p class="slogan">把想法落成文字，把文字写给看得懂的人</p>
    <div class="ip-sum">
      {{if .User}}
      <span class="ip-points">我的积分 <b>{{.Data.Points}}</b></span>
      {{else}}
      <a class="ip-login" href="/login?next=/tasks">登录后开始做任务</a>
      {{end}}
    </div>
  </div>
  {{if .Data.Flash}}
  <div class="ip-flash">{{.Data.Flash}}</div>
  {{end}}
  {{range .Data.Groups}}
  <section class="ip-group">
    <div class="ip-group-head">
      <span class="ip-group-icon">{{ico .Icon}}</span>
      <span class="ip-group-title">{{.Label}}</span>
      <span class="ip-group-progress">已完成 <b>{{.Done}}</b> / {{.Total}}</span>
      <span class="ip-progress-track"><i style="width:{{if eq .Done .Total}}100{{else if gt .Done 0}}50{{else}}0{{end}}%"></i></span>
    </div>
    <div class="ip-tasks">
      {{range .Tasks}}
      <div class="ip-task{{if and .IsPaid (not $.Data.Unlocked)}} is-locked{{end}}">
        <div class="ip-task-icon">{{ico .Icon}}</div>
        <div class="ip-task-main">
          <div class="ip-task-title">
            {{.Title}}{{if .IsPaid}}<span class="ip-tag-paid">完整版</span>{{end}}
          </div>
          <div class="ip-task-desc">{{.Description}}</div>
          <div class="ip-task-meta">奖励 <b>+{{.RewardPoints}} 积分</b>{{if eq .TaskType "daily"}} · 每日任务，当天签到按日去重{{end}}</div>
        </div>
        <div class="ip-task-act">
          {{if and .IsPaid (not $.Data.Unlocked)}}
            <span class="ip-locked-note">{{ico "lock"}} 需解锁付费扩展</span>
          {{else if eq .Status "rewarded"}}
            {{if eq .TaskType "daily"}}<span class="ip-tag-checkin">已签到</span>{{else}}<span class="ip-tag-done">已完成</span>{{end}}
          {{else if not $.User}}
            <a class="ip-btn-ghost" href="/login?next=/tasks">登录后开始</a>
          {{else if eq .Status "doing"}}
            <form method="post" action="/tasks/{{.ID}}/reward">
              {{if $.CSRF}}<input type="hidden" name="csrf" value="{{$.CSRF}}">{{end}}
              <button class="ip-btn" type="submit">完成领取</button>
            </form>
          {{else if eq .Status "claimed"}}
            <form method="post" action="/tasks/{{.ID}}/finish">
              {{if $.CSRF}}<input type="hidden" name="csrf" value="{{$.CSRF}}">{{end}}
              <button class="ip-btn-ghost" type="submit">去完成</button>
            </form>
          {{else}}
            <form method="post" action="/tasks/{{.ID}}/claim">
              {{if $.CSRF}}<input type="hidden" name="csrf" value="{{$.CSRF}}">{{end}}
              <button class="ip-btn" type="submit">开始</button>
            </form>
          {{end}}
        </div>
      </div>
      {{end}}
    </div>
  </section>
  {{else}}
  <div class="ip-empty">暂无任务。</div>
  {{end}}
</div>
{{end}}