{{/* The demo application's record: demo-request.html, one request
open. Rastrillo's demo, written in the markup of the Fiesta examples
that document each piece: back-nav, page-header, status-pill, badge,
detail-list, field-textarea, form-foot and callout. The callout's body
is Fiesta's own words. */}}
<section class="app-view" id="view-request">
<nav rst-back-nav><a data-gallery-nav href="{{.Requests}}">← Requests</a></nav>
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Invoice #4471 never arrived</h1>
    <p rst-page-header-sub>Reported by Fiona Reid, and still waiting on us.</p>
  </div>
</header>
<p><span rst-status rst-tone="warning">Waiting</span> <span rst-badge>Billing</span></p>
<div rst-box-head><h2>Details</h2></div>
<section rst-box><dl rst-detail>
  <dt>Reference</dt>
  <dd class="rst-mono">REQ-4471</dd>
  <dt>Reported by</dt>
  <dd>fiona@example.com</dd>
  <dt>Queue</dt>
  <dd>Billing</dd>
  <dt>Opened</dt>
  <dd><time datetime="2026-08-14T09:12">14 August, 09:12</time></dd>
</dl></section>
<div rst-box-head><h2>Reply</h2></div>
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="reply">Your reply</label>
  <textarea rst-textarea id="reply" name="reply" rows="4" aria-describedby="reply-hint"></textarea>
  <small rst-field-hint id="reply-hint">The person who reported this gets it by email.</small>
</div>
<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">Send reply</button>
  <a rst-btn="lg" data-gallery-nav href="{{.Requests}}">Cancel</a>
</div></form></section>
<div rst-callout rst-tone="info"><span rst-callout-ic aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg></span><div rst-callout-body><strong>Every screen has its own address</strong><p>{{.Callout}}</p></div></div>
<p><a rst-btn data-gallery-nav href="{{.Overview}}">{{.Back}}</a></p>
</section>