{{define "requests.html"}}
{{template "shell-start" .}}
<header class="page-head">
  <div><p class="eyebrow">PLANNING</p><h1>My requests</h1><p>Ask for time off or a remote work day.</p></div>
</header>
{{template "notice" .}}
<div class="two-column">
  <section class="card form-card">
    <p class="eyebrow">NEW REQUEST</p><h2>Plan a day away</h2>
    <form method="post" action="/requests" class="stack-form">
      <input type="hidden" name="csrf" value="{{.CSRF}}">
      <fieldset class="choice-cards">
        <label><input type="radio" name="kind" value="leave" checked><span><b>☼</b><strong>Time off</strong><small>Holiday or personal leave</small></span></label>
        <label><input type="radio" name="kind" value="remote"><span><b>⌂</b><strong>Remote day</strong><small>Work away from the office</small></span></label>
      </fieldset>
      <div class="form-row">
        <label>From <small>Persian date</small><span class="jalali-field"><input name="start_date" data-jalali-picker data-jalali-role="start" required autocomplete="off" inputmode="numeric" placeholder="1405-05-06" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"><button type="button" class="jalali-trigger" aria-label="Choose start date" title="Open Persian calendar">▦</button></span></label>
        <label>To <small>Persian date</small><span class="jalali-field"><input name="end_date" data-jalali-picker data-jalali-role="end" required autocomplete="off" inputmode="numeric" placeholder="1405-05-06" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}"><button type="button" class="jalali-trigger" aria-label="Choose end date" title="Open Persian calendar">▦</button></span></label>
      </div>
      <label>Note <small>Optional</small><textarea name="reason" rows="4" maxlength="500" placeholder="Anything your manager should know?"></textarea></label>
      <button class="button primary full">Send for approval</button>
    </form>
  </section>
  <section class="card">
    <header class="section-head"><div><p class="eyebrow">HISTORY</p><h2>All requests</h2></div></header>
    {{if .Requests}}
    <div class="request-list">
      {{range .Requests}}
      <div class="request-row request-detail">
        <span class="request-icon {{.Kind}}">{{if eq .Kind "remote"}}⌂{{else}}☼{{end}}</span>
        <div><strong>{{kindLabel .Kind}}</strong><small>{{dateFA .StartDate}}{{if ne .StartDate .EndDate}} — {{dateFA .EndDate}}{{end}} · {{.DayCount}} day(s)</small>{{if .Reason}}<p>{{.Reason}}</p>{{end}}{{if .AdminNote}}<p class="admin-note">Manager: {{.AdminNote}}</p>{{end}}</div>
        <div class="request-end"><span class="badge {{.Status}}">{{statusLabel .Status}}</span>
          {{if eq .Status "pending"}}<form method="post" action="/requests/{{.ID}}/cancel"><input type="hidden" name="csrf" value="{{$.CSRF}}"><button class="text-button">Cancel</button></form>{{end}}
        </div>
      </div>
      {{end}}
    </div>
    {{else}}<div class="empty"><span>◌</span><p>You haven’t made any requests.</p></div>{{end}}
  </section>
</div>
{{template "shell-end" .}}
{{end}}