exmr/lib/exmr_web/live/exam_live/index.html.heex

<.header>
  {gettext("Listing Exams")}
  <div>
    <button phx-click="sort" phx-value-by="subject" class="font-light">
      {gettext("Sort by Subject")}
    </button>
    <a>|</a>

    <button phx-click="sort" phx-value-by="date" class="font-light">
      {gettext("Sort by Date")}
    </button>
  </div>
  <:actions>
    <.link patch={~p"/exams/new"}>
      <.button class="dark:bg-sky-300 text-white dark:text-black/80 dark:hover:bg-sky-400">
        {gettext("New Exam")}
      </.button>
    </.link>
  </:actions>
</.header>

<div class="divide-y">
  <div :for={exam <- @exams} class="py-2 flex gap-2">
    <div class="grow">
      <div class="font-bold">{exam.subject}</div>
      <div class="font-sm">
        {exam.date} |
        <b>
          {case Date.diff(exam.date, Date.utc_today()) do
            0 -> gettext("Today")
            1 -> gettext("Tommorow")
            x when x > 1 -> ngettext("Tomorrow", "%{count} days left", x)
            x when x < 0 -> ngettext("Yesterday", "%{count} days passed", x * -1)
          end}
        </b>
      </div>
    </div>
    <button
      phx-click="edit"
      phx-value-id={exam.id}
      class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-3 rounded-md"
    >
      {gettext("Edit")}
    </button>
    <button
      phx-click="remove"
      phx-value-id={exam.id}
      class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-3 rounded-md"
    >
      {gettext("Remove")}
    </button>
  </div>
</div>

<.modal :if={@live_action in [:new, :edit]} id="exam-modal" show on_cancel={JS.patch(~p"/exams")}>
  <.live_component
    module={ExmrWeb.ExamLive.FormComponent}
    id={@exam.id || :new}
    title={@page_title}
    action={@live_action}
    exam={@exam}
    patch={~p"/exams"}
  />
</.modal>