<div class="flex flex-col justify-center items-stretch mx-auto space-y-4 max-w-lg">
  <h1 class="text-xl title text-primary-400">
    {gettext("memEx")}
  </h1>

  <ul class="flex flex-col space-y-4">
    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        {gettext("notes:")}
      </b>
      <p>
        {gettext("document notes about individual items or concepts")}
      </p>
    </li>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        {gettext("contexts:")}
      </b>
      <p>
        {gettext("provide context around a single topic and hotlink to your notes")}
      </p>
    </li>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        {gettext("pipelines:")}
      </b>
      <p>
        {gettext("document your processes, attaching contexts to each step")}
      </p>
    </li>

    <li class="flex flex-col justify-center items-center space-y-2 text-right">
      <.link navigate={~p"/faq"} class="btn btn-primary">
        {gettext("read more on how to use memEx")}
      </.link>
    </li>
  </ul>

  <hr class="hr" />

  <ul class="flex flex-col space-y-4">
    <h2 class="text-lg title text-primary-400">
      {gettext("features")}
    </h2>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        {gettext("multi-user:")}
      </b>
      <p>
        {gettext("built with sharing and collaboration in mind")}
      </p>
    </li>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        {gettext("privacy:")}
      </b>
      <p>
        {gettext("privacy controls on a per-note, context or pipeline basis")}
      </p>
    </li>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        {gettext("convenient:")}
      </b>
      <p>
        {gettext("accessible from any internet-capable device")}
      </p>
    </li>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b class="whitespace-nowrap">
        {gettext("backlinks:")}
      </b>
      <p>
        {gettext("view referencing items from the referenced item")}
      </p>
    </li>
  </ul>

  <hr class="hr" />

  <ul class="flex flex-col justify-center space-y-4">
    <h2 class="text-lg title text-primary-400">
      {gettext("instance information")}
    </h2>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b>
        {gettext("admins:")}
      </b>
      <p class="flex flex-col justify-center items-center space-y-2">
        <%= if @admins |> Enum.empty?() do %>
          <.link href={~p"/users/register"} class="link">
            {dgettext("prompts", "register to setup memEx")}
          </.link>
        <% else %>
          <.link :for={%{email: email} <- @admins} class="link" href={"mailto:#{email}"}>
            {email}
          </.link>
        <% end %>
      </p>
    </li>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b>{gettext("registration:")}</b>
      <p>
        {case Accounts.registration_mode() do
          :public -> gettext("public signups")
          :invite_only -> gettext("invite only")
        end}
      </p>
    </li>

    <li class="flex flex-col justify-center items-center space-y-2">
      <b>{gettext("version:")}</b>
      <.link
        href="https://gitea.bubbletea.dev/shibao/memEx/src/branch/stable/changelog.md"
        class="flex flex-row justify-center items-center space-x-2 link"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p>{@version}</p>
        <i class="fas fa-md fa-info-circle"></i>
      </.link>
    </li>
  </ul>

  <hr class="hr" />

  <ul class="flex flex-col space-y-2">
    <h2 class="text-lg title text-primary-400">
      {gettext("get involved")}
    </h2>

    <li class="flex flex-col justify-center items-center space-y-2">
      <.link
        href="https://gitea.bubbletea.dev/shibao/memEx"
        class="flex flex-row justify-center items-center space-x-2 link"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p>{gettext("view the source code")}</p>
        <i class="fas fa-md fa-code"></i>
      </.link>
    </li>
    <li class="flex flex-col justify-center items-center space-y-2">
      <.link
        href="https://weblate.bubbletea.dev/engage/memEx"
        class="flex flex-row justify-center items-center space-x-2 link"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p>{gettext("help translate")}</p>
        <i class="fas fa-md fa-language"></i>
      </.link>
    </li>
    <li class="flex flex-col justify-center items-center space-y-2">
      <.link
        href="https://gitea.bubbletea.dev/shibao/memEx/issues/new"
        class="flex flex-row justify-center items-center space-x-2 link"
        target="_blank"
        rel="noopener noreferrer"
      >
        <p>{gettext("report bugs or request features")}</p>
        <i class="fas fa-md fa-spider"></i>
      </.link>
    </li>
  </ul>
</div>