{{define "updates.html"}}
{{template "shell-start" .}}
<header class="page-head">
  <div><p class="eyebrow">TEAM REPORTING</p><h1>Work updates</h1><p>Share completed tasks, pending work, and anything blocking progress.</p></div>
</header>
{{template "notice" .}}
<div class="two-column updates-layout">
  <section class="card form-card update-form-card">
    <p class="eyebrow">NEW UPDATE</p><h2>What did you work on?</h2>
    <form method="post" action="/updates" class="stack-form">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <fieldset class="choice-cards update-status-choices">
        <label><input type="radio" name="status" value="done" checked><span><b>✓</b><strong>Done</strong><small>Completed work</small></span></label>
        <label><input type="radio" name="status" value="blocked"><span><b>!</b><strong>Blocked</strong><small>Needs attention</small></span></label>
        <label><input type="radio" name="status" value="pending"><span><b>…</b><strong>Pending</strong><small>Still in progress</small></span></label>
      </fieldset>
      <div class="form-row">
        <label>Period start <small>Persian date</small><span class="jalali-field"><input name="period_start" value="{{.TodayJalali}}" data-jalali-picker data-jalali-role="start" required autocomplete="off" inputmode="numeric" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"><button type="button" class="jalali-trigger" aria-label="Choose period start" title="Open Persian calendar">▦</button></span></label>
        <label>Period end <small>Persian date</small><span class="jalali-field"><input name="period_end" value="{{.TodayJalali}}" data-jalali-picker data-jalali-role="end" required autocomplete="off" inputmode="numeric" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"><button type="button" class="jalali-trigger" aria-label="Choose period end" title="Open Persian calendar">▦</button></span></label>
      </div>
      <label>Update <small>Required</small><textarea name="note" rows="7" maxlength="4000" required placeholder="Example: Completed task ABC and deployed the API. Task XYZ is pending review. Blocked on access to the staging server."></textarea></label>
      <button class="button primary full">Share update</button>
    </form>
  </section>

  <section class="card update-feed-card">
    <header class="section-head"><div><p class="eyebrow">TEAM FEED</p><h2>Latest updates</h2></div><span class="feed-count">{{len .WorkUpdates}} reports</span></header>
    {{if .WorkUpdates}}
    <div class="update-feed">
      {{range .WorkUpdates}}
      <article class="update-entry">
        <div class="update-author">
          {{if .AvatarURL}}<img class="avatar" src="{{.AvatarURL}}" alt="">{{else}}<span class="avatar">{{initial .UserName}}</span>{{end}}
          <div><strong>{{.UserName}}</strong><small>@{{.Username}}</small></div>
          <span class="badge {{.Status}}">{{statusLabel .Status}}</span>
        </div>
        <p class="update-period">{{dateFA .PeriodStart}}{{if ne .PeriodStart .PeriodEnd}} — {{dateFA .PeriodEnd}}{{end}}</p>
        <p class="update-note">{{.Note}}</p>
        {{if eq .UserID $.User.ID}}
        <form method="post" action="/updates/{{.ID}}/delete" class="update-delete">
          <input type="hidden" name="csrf" value="{{$.CSRF}}">
          <button class="text-button" type="submit">Remove my update</button>
        </form>
        {{end}}
      </article>
      {{end}}
    </div>
    {{else}}
    <div class="empty roomy"><span>✎</span><h3>No updates yet</h3><p>Share the first update with your team.</p></div>
    {{end}}
  </section>
</div>
{{template "shell-end" .}}
{{end}}