<%= render HeaderComponent.new(title: "Services") %>

<%= render MainSimpleComponent.new do %>
  <section>
    <div class="services grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
      <% if Setting.ejabberd_enabled? %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400
                    bg-cover bg-[center_top_-50px] bg-no-repeat
                    bg-[url(/img/logos/icon_xmpp.svg)]">
          <%= link_to services_chat_path,
                class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">Chat</h3>
            <p class="text-gray-600">
              Federated chat rooms and instant messaging
            </p>
          <% end %>
        </div>
      <% end %>
      <% if Setting.mastodon_enabled? %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400
                    bg-[length:80%] bg-[right_top_-30px] bg-no-repeat
                    bg-[url(/img/logos/icon_mastodon.svg)]">
          <%= link_to services_mastodon_path, class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">Mastodon</h3>
            <p class="text-gray-600">
              Your account on the Open Social Web
            </p>
          <% end %>
        </div>
      <% end %>
      <% if Setting.email_enabled? &&
            Flipper.enabled?(:email, current_user) %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400">
          <%= link_to services_email_path, class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">E-Mail</h3>
            <p class="text-gray-600">
              A no-bullshit email account
            </p>
          <% end %>
        </div>
      <% end %>
      <% if Setting.discourse_enabled? %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400
                    bg-[length:95%] bg-center bg-no-repeat
                    bg-[url(/img/logos/icon_discourse.svg)]">
          <%= link_to "#{Setting.discourse_public_url}/session/sso?return_path=/",
                class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">Discourse</h3>
            <p class="text-gray-600">
              Kosmos community forums and user support/help site
            </p>
          <% end %>
        </div>
      <% end %>
      <% if Setting.lndhub_enabled? %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400
                    bg-cover bg-center sm:bg-[center_top_-140px] bg-no-repeat
                    bg-[url(/img/logos/icon_lightning.svg)]">
          <%= link_to services_lightning_index_path,
                class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">Lightning Network</h3>
            <p class="text-gray-600">
              Send and receive sats over the Bitcoin Lightning Network
            </p>
          <% end %>
        </div>
      <% end %>
      <% if Setting.remotestorage_enabled? &&
            Flipper.enabled?(:remotestorage, current_user) %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400">
          <%= link_to services_storage_path,
                class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">Storage</h3>
            <p class="text-gray-600">
              Sync your data between apps and devices
            </p>
          <% end %>
        </div>
      <% end %>
      <% if Setting.gitea_enabled? %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400
                    bg-cover bg-center bg-no-repeat
                    bg-[url(/img/logos/icon_gitea.png)]">
          <%= link_to Setting.gitea_public_url,
                class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">Gitea</h3>
            <p class="text-gray-600">
              Code hosting and collaboration for software projects
            </p>
          <% end %>
        </div>
      <% end %>
      <% if Setting.droneci_enabled? %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400
                    bg-cover bg-[center_top_-70px] bg-no-repeat
                    bg-[url(/img/logos/icon_droneci.svg)]">
          <%= link_to Setting.droneci_public_url,
                class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">Drone CI</h3>
            <p class="text-gray-600">
              Continuous integration for software projects on Gitea
            </p>
          <% end %>
        </div>
      <% end %>
      <% if Setting.mediawiki_enabled? %>
        <div class="border border-gray-300 rounded-md hover:border-gray-400
                    bg-cover bg-[center_top_-20px] bg-no-repeat
                    bg-[url(/img/logos/icon_mediawiki.svg)]">
          <%= link_to Setting.mediawiki_public_url,
                class: "block h-full px-6 py-6 rounded-md" do %>
            <h3 class="mb-3.5">Wiki</h3>
            <p class="text-gray-600">
              Kosmos documentation and knowledge base
            </p>
          <% end %>
        </div>
      <% end %>
    </div>
  </section>
<% end %>
