<Layouts.app flash={@flash} current_scope={@current_scope}>
  <div class="mx-auto max-w-2xl">
    <div class="flex flex-wrap items-center gap-2">
      <span class="badge badge-outline">{@notice.reference}</span>
      <span class={[
        "badge",
        @notice.status == :urgent_review && "badge-error",
        @notice.status != :urgent_review && "badge-primary"
      ]}>
        {status_label(@notice.status)}
      </span>
    </div>
    <h1 class="mt-4 text-3xl font-black">{gettext("Content-removal notice")}</h1>
    <p class="mt-2 text-sm text-base-content/55">{category_label(@notice.category)}</p>
    <section class="mt-6 rounded-2xl bg-base-200 p-5">
      <h2 class="font-bold">{gettext("Reported locations")}</h2>
      <ul class="mt-3 list-disc space-y-1 pl-5 text-sm">
        <li
          :for={url <- WhoNeedHelp.ContentRemoval.Notice.content_urls(@notice)}
          class="break-all"
        >
          {url}
        </li>
      </ul>
    </section>
    <section
      :if={@notice.resolution_note not in [nil, ""]}
      class="mt-5 rounded-2xl border border-primary/30 p-5"
    >
      <h2 class="font-bold">{gettext("Decision or request for information")}</h2>
      <p class="mt-2 whitespace-pre-wrap">{@notice.resolution_note}</p>
    </section>
    <p class="mt-5 text-xs text-base-content/55">
      {gettext(
        "Keep this status link private. The submitter identity is not shown publicly or automatically disclosed to the person who posted the reported content."
      )}
    </p>
  </div>
</Layouts.app>
