swornforged/lib/swornforged_web/controllers/page_html/home.html.heex

<.srd_header title="Swornforged" />
<div>
  <div class="p-4 grid gap-4 place-content-center
              grid-cols-[repeat(2,180px)] grid-rows-[repeat(2,180px)]
              md:grid-cols-[repeat(2,320px)] md:grid-rows-[repeat(2,128px)]
              lg:grid-cols-[repeat(2,420px)] lg:grid-rows-[repeat(2,240px)]">
    <.srd_category_card category={:asset_types} title="Asset Types" />
    <.srd_category_card category={:oracle_categories} title="Oracle Categories" />
    <.srd_category_card category={:move_categories} title="Move Categories" />
    <.srd_category_card category={:encounters} title="Encounters" />
  </div>
</div>
<div class="flex flex-col gap-6 p-6">
  <.srd_type_container>
    <.srd_type_title>Assets</.srd_type_title>
    <div :for={asset_type <- @dataforged["Asset Types"]} id={asset_type["$id"]}>
      <.srd_subtype_title>
        <a href={"#" <> asset_type["$id"]}><%= get_in(asset_type, ["Display", "Title"]) %></a>
      </.srd_subtype_title>
      <ul class="flex flex-col gap-6">
        <li :for={asset <- asset_type["Assets"]} id={asset["$id"]}>
          <.srd_item item={asset}>
            <:title><%= get_in(asset, ["Display", "Title"]) %></:title>
            <ol class="flex flex-col gap-2">
              <li :for={ability <- asset["Abilities"]} id={ability["$id"]}>
                <div class="flex gap-6">
                  <input type="checkbox" disabled={true} checked={ability["Enabled"]} />
                  <div class="prose dark:prose-invert text-justify">
                    <%= raw(Earmark.as_html!(ability["Text"], compact_output: true)) %>
                  </div>
                </div>
              </li>
            </ol>
          </.srd_item>
        </li>
      </ul>
    </div>
  </.srd_type_container>
  <.srd_type_container>
    <.srd_type_title>Oracles</.srd_type_title>
    <div :for={oracle_category <- @dataforged["Oracle Categories"]} id={oracle_category["$id"]}>
      <.srd_subtype_title>
        <a href={"#" <> oracle_category["$id"]}>
          <%= get_in(oracle_category, ["Display", "Title"]) %>
        </a>
      </.srd_subtype_title>
      <ul class="flex flex-col gap-6">
        <li :for={oracle <- oracle_category["Oracles"]} id={oracle["$id"]}>
          <.srd_item item={oracle}>
            <:title><%= get_in(oracle, ["Display", "Title"]) %></:title>
            <div :if={oracle["Table"]} class="prose dark:prose-invert prose-p:m-0">
              <div :if={str = oracle["Description"]} class="text-justify">
                <%= raw(Earmark.as_html!(str, compact_output: true)) %>
              </div>
              <table>
                <thead>
                  <tr>
                    <th>Roll</th>
                    <th>Result</th>
                  </tr>
                </thead>
                <tbody>
                  <tr :for={row <- get_in(oracle, ["Table"], [])} id={row["$id"]}>
                    <td style="text-align: left;"><%= row["Floor"] %>-<%= row["Ceiling"] %></td>
                    <td style="text-align: left;">
                      <%= raw(Earmark.as_html!(row["Result"], compact_output: true)) %>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div :if={oracle["Oracles"]}>
              <div
                :for={inner_oracle <- oracle["Oracles"]}
                class="prose dark:prose-invert prose-p:m-0"
              >
                <.srd_item_inner_title>
                  <%= get_in(inner_oracle, ["Display", "Title"]) %>
                </.srd_item_inner_title>
                <hr class="h-px my-4 bg-slate-200 border-0 dark:bg-slate-600" />
                <div :if={str = inner_oracle["Description"]} class="text-justify">
                  <%= raw(Earmark.as_html!(str, compact_output: true)) %>
                </div>
                <table>
                  <thead>
                    <tr>
                      <th>Roll</th>
                      <th>Result</th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr :for={row <- get_in(inner_oracle, ["Table"], [])} id={row["$id"]}>
                      <td style="text-align: left;"><%= row["Floor"] %>-<%= row["Ceiling"] %></td>
                      <td style="text-align: left;">
                        <%= raw(Earmark.as_html!(row["Result"], compact_output: true)) %>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </.srd_item>
        </li>
      </ul>
    </div>
  </.srd_type_container>
  <.srd_type_container>
    <.srd_type_title>Moves</.srd_type_title>
    <div :for={move_category <- @dataforged["Move Categories"]} id={move_category["$id"]}>
      <.srd_subtype_title>
        <a href={"#" <> move_category["$id"]}>
          <%= get_in(move_category, ["Display", "Title"]) %>
        </a>
      </.srd_subtype_title>
      <ul class="flex flex-col gap-6">
        <li :for={move <- move_category["Moves"]} id={move["$id"]}>
          <.srd_item item={move}>
            <:title><%= get_in(move, ["Display", "Title"]) %></:title>
            <div class="prose dark:prose-invert">
              <%= raw(
                Earmark.as_html!(move["Text"], gfm: true, gfm_tables: true, compact_output: true)
              ) %>
            </div>
          </.srd_item>
        </li>
      </ul>
    </div>
  </.srd_type_container>
</div>