<section data-block="noir:case_dossier" class="py-12">
  <div class="mx-auto grid max-w-6xl grid-cols-1 gap-10 px-4 md:grid-cols-[16rem_1fr]">
    <aside class="self-start md:sticky md:top-6">
      <div class="noir-file p-5">
        {% if status == "cold" %}<span class="noir-stamp" style="color:hsl(var(--muted-foreground));">Cold</span>{% elif status == "closed" %}<span class="noir-stamp" style="color:hsl(var(--destructive));">Closed</span>{% elif status == "active" %}<span class="noir-stamp" style="color:hsl(var(--primary));">Active</span>{% else %}<span class="noir-stamp" style="color:hsl(var(--primary));">Open</span>{% endif %}
        <dl class="mt-6 space-y-4">
          {% if caseNumber %}<div><dt class="noir-label" style="color:hsl(var(--muted-foreground));">Case No.</dt><dd class="noir-mono mt-1 text-sm" style="color:hsl(var(--foreground));">{{ caseNumber }}</dd></div>{% endif %}
          {% if opened %}<div><dt class="noir-label" style="color:hsl(var(--muted-foreground));">Opened</dt><dd class="noir-mono mt-1 text-sm" style="color:hsl(var(--foreground));">{{ opened }}</dd></div>{% endif %}
          {% if location %}<div><dt class="noir-label" style="color:hsl(var(--muted-foreground));">Location</dt><dd class="noir-mono mt-1 text-sm" style="color:hsl(var(--foreground));">{{ location }}</dd></div>{% endif %}
          {% if lead %}<div><dt class="noir-label" style="color:hsl(var(--muted-foreground));">Lead</dt><dd class="noir-mono mt-1 text-sm" style="color:hsl(var(--foreground));">{{ lead }}</dd></div>{% endif %}
        </dl>
      </div>
    </aside>
    <div class="min-w-0">
      {% if title %}<h1 class="noir-heading text-3xl leading-tight md:text-4xl" style="color:hsl(var(--foreground));">{{ title }}</h1>{% endif %}
      {% if summary %}<p class="noir-body mt-6 text-lg leading-relaxed" style="color:hsl(var(--muted-foreground));">{{ summary }}</p>{% endif %}
      {% if images %}
      <div class="mt-8 space-y-8">
        {% for img in images %}{% if img %}<figure class="noir-file p-2"><div class="overflow-hidden bg-muted">{% img img alt=title|default:"" class="block h-auto w-full object-cover" %}</div></figure>{% endif %}{% endfor %}
      </div>
      {% else %}
      <div class="mt-8 noir-hairline p-12 text-center noir-label" style="color:hsl(var(--muted-foreground));">Add photographs to the case spread.</div>
      {% endif %}
    </div>
  </div>
</section>
