<div class="flex items-center gap-4">
  <div class="h-16 w-16 flex-none">
    <% if @web_app.icon.attached? %>
    <%= image_tag s3_image_url(@web_app.icon), class: "h-full w-full" %>
    <% elsif @web_app.apple_touch_icon.attached? %>
    <%= image_tag s3_image_url(@web_app.apple_touch_icon), class: "h-full w-full" %>
    <% else %>
    <%= render partial: "icons/remotestorage", locals: { custom_class: "h-full w-full p-0.5 text-gray-200" } %>
    <% end %>
  </div>
  <div class="flex-grow">
    <h4 class="mb-1 text-lg font-bold">
      <%= @web_app.name %>
    </h4>
    <p class="text-sm text-gray-500">
      <%= @auth.client_id %>
    </p>
  </div>
  <%= render DropdownComponent.new do %>
    <%= render DropdownLinkComponent.new(
          href: launch_app_services_storage_rs_auth_url(@auth)
        ) do %>
      Launch app
    <% end %>
    <%= render DropdownLinkComponent.new(
          href: revoke_services_storage_rs_auth_url(@auth),
          separator: true, add_class: "text-red-700"
        ) do %>
      Revoke access
    <% end %>
  <% end %>
</div>
