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 text-xs md:text-sm lg:text-base"
    >
      {gettext("Sort by Subject")}
    </button>
    <a class="invisible lg:visible">|</a>
    <button
      phx-click="sort"
      phx-value-by="date"
      class="font-light text-xs md:text-sm lg:text-base"
    >
      {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 text-xs md:text-sm lg:text-base">{exam.subject}</div>
      <div class="text-xs md:text-sm lg:text-base">
        {exam.date} |
        <b class="text-xs md:text-sm lg:text-base">
          {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 p-1 text-xs md:text-sm lg:py-2 lg: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 p-1 text-xs md:text-sm lg:py-2 lg: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>

<div>
  <!-- Navigation -->
  <!-- <div class="flex justify-between mb-4"> -->
  <!--   <button phx-click="previous_month" class="px-2 py-1 bg-blue-200">Previous</button> -->
  <!--   <h2>{@current_month |> Date.to_string() |> String.replace("-", " ")}</h2> -->
  <!--   <button phx-click="next_month" class="px-2 py-1 bg-blue-200">Next</button> -->
  <!-- </div> -->

  <!-- Calendar -->
  <div class="grid grid-cols-7 gap-1" id="calendar-container" phx-update="replace">
    <!-- Weekdays -->
    <%= for weekday <- ~w(#{gettext("Sun")} #{gettext("Mon")} #{gettext("Tue")} #{gettext("Wed")} #{gettext("Thu")}
      #{gettext("Fri")} #{gettext("Sat")}) do %>
      <div class="font-bold text-center">{weekday}</div>
    <% end %>
    
<!-- Empty spaces for previous month -->
    <%= for _ <- 1..(Date.day_of_week(Date.new!(@current_month.year, @current_month.month, 1))) do %>
      <div></div>
    <% end %>
    
<!-- Days of the month -->
    <%= for day <- 1..Date.days_in_month(@current_month) do %>
      <% {:ok, date} = Date.new(@current_month.year, @current_month.month, day) %>

      <div
        id={"day-#{Date.to_string(date)}"}
        class={[
          "border rounded p-0.5 md:p-2 lg:p-3 w-full h-12 md:h-20 hover:scale-125 transition-transform ease-in-out duration-100",
          @current_month == date &&
            "bg-zinc-200 dark:bg-zinc-800  border-green-500 dark:border-green-300",
          @current_month != date &&
            "bg-white dark:bg-zinc-950 dark:border-zinc-400 "
        ]}
      >
        <div class="text-xs md:text-sm lg:text-base font-bold">{day}</div>
        <!-- Render events for the current day -->

        <%= if Map.has_key?(@events, date) do %>
          <ul class="text-xs">
            <%= for event <- @events[date] do %>
              <li id={"event-#{event.id}"}>{event.subject}</li>
            <% end %>
          </ul>
        <% end %>
      </div>
    <% end %>
  </div>
</div>