chronoscope/lib/chronoscope_web/live/index_live.html.heex

<table class="mx-auto border-collapse table-auto min-w-full divide-y divide-zinc-200 dark:divide-zinc-700 text-left">
    <thead>
        <tr>
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
                Host
            </th>
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
                Status
            </th>
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
                Algorithm
            </th>
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
                Cookies
            </th>
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
                Cookie Length
            </th>
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
                Certificate Expiration
            </th>
            <th scope="col" class="py-3 px-6 whitespace-nowrap">
                Last Check
            </th>
        </tr>
    </thead>
    <tbody>
        <tr :for={server <- @servers} class="hover:bg-zinc-100 dark:hover:bg-zinc-700">
            <% {status, response} = server.key_establishment_response %>

            <%= if (status == :ok) do %>
            <td class="py-4 px-6 whitespace-nowrap">
                <%= server.server.host %>:<%= server.server.port %>
            </td>
            <td class="py-4 px-6 whitespace-nowrap">
                <%= status %>
            </td>
            <td class="py-4 px-6 whitespace-nowrap">
                <%= Enum.at(response.aead_algorithms, 0) %>
            </td>
            <td class="py-4 px-6 whitespace-nowrap">
                <%= length(response.cookies) %>
            </td>
            <td class="py-4 px-6 whitespace-nowrap">
                <%= response.cookie_length %>
            </td>
            <td class="py-4 px-6 whitespace-nowrap">
                <%= response.cert_expiration %>
            </td>
            <td class="py-4 px-6 whitespace-nowrap">
                <%= server.last_key_establishment %>
            </td>

            <% else %>
            <td class="py-4 px-6 whitespace-nowrap">
                <%= server.server.host %>:<%= server.server.port %>
            </td>
            <td class="py-4 px-6 whitespace-nowrap">
                <span class="group relative">
                    <%= status %>
                    <span class="pointer-events-none absolute -top-9 left-0 w-max p-1 rounded-lg bg-zinc-300 dark:bg-zinc-600 opacity-0 transition-opacity group-hover:opacity-100">
                        <%= response %>
                    </span>
                </span>
            </td>
            <td class="py-4 px-6 whitespace-nowrap"> - </td>
            <td class="py-4 px-6 whitespace-nowrap"> - </td>
            <td class="py-4 px-6 whitespace-nowrap"> - </td>
            <td class="py-4 px-6 whitespace-nowrap"> - </td>

            <td class="py-4 px-6 whitespace-nowrap">
                <%= server.last_key_establishment %>
            </td>
            <% end %>
        </tr>
    </tbody>
</table>