---
export { minimal as layout } from "../layouts/questions.tsx";
import { PendingQuestion } from "../db.ts";
import { useInlineScript } from "../framework/page-resources";
import {
  formatQuestionISOTimestamp,
  formatQuestionTimestamp,
} from "../q+a/QuestionRender";

<const/questions = PendingQuestion.getAll() />
<Script src="backend-inbox.client.ts" />

<h1>inbox</h1>
<for|q| of=questions>
  <div
    data-q=q.id
    style="border-bottom: 2px solid #fff7; margin-bottom: 1rem"
  >
    <time datetime={formatQuestionISOTimestamp(q.date)}>
      ${formatQuestionTimestamp(q.date)} ${q.id}
    </time>
    <div style="color: dodgerblue; margin-bottom: 0.25rem">
      ${q.sourceName}
      ${q.sourceLocation !== "unknown" ? `from ${q.sourceLocation}` : null}
      ${q.sourceVPN ? `(VPN: ${q.sourceVPN})` : null}
    </div>
    <p style="white-space: pre-wrap">${q.prompt}</p>
    <p>
      <button onclick=`onReply("${q.id}") style="color: lime">
        reply
      </button>
      <button onclick=`onDelete("${q.id}")` style="color: red">
        reject
      </button>
      <button onclick=`onDeleteFull("${q.id}")` style="color: red">
        DELETE
      </button>
    </p>
  </div>
</>