<% content_for :title, "Card providers" %>

<div class="w-full">
  <% if notice.present? %>
    <p class="py-2 px-3 bg-green-50 mb-5 text-green-500 font-medium rounded-md inline-block" id="notice"><%= notice %></p>
  <% end %>

  <div class="flex justify-between items-center">
    <h1 class="font-bold text-4xl">Card providers</h1>
    <%= link_to "New card provider", new_card_provider_path, class: "rounded-md px-3.5 py-2.5 bg-blue-600 hover:bg-blue-500 text-white block font-medium" %>
  </div>

  <div id="card_providers" class="min-w-full divide-y divide-gray-200 space-y-5">
    <% if @card_providers.any? %>
      <% @card_providers.each do |card_provider| %>
        <div class="flex flex-col sm:flex-row justify-between items-center pb-5 sm:pb-0">
          <%= render card_provider %>
          <div class="w-full sm:w-auto flex flex-col sm:flex-row space-x-2 space-y-2">
            <%= link_to "Show", card_provider, class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
            <%= link_to "Edit", edit_card_provider_path(card_provider), class: "w-full sm:w-auto text-center rounded-md px-3.5 py-2.5 bg-gray-100 hover:bg-gray-50 inline-block font-medium" %>
            <%= button_to "Destroy", card_provider, method: :delete, class: "w-full sm:w-auto rounded-md px-3.5 py-2.5 text-white bg-red-600 hover:bg-red-500 font-medium cursor-pointer", data: { turbo_confirm: "Are you sure?" } %>
          </div>
        </div>
      <% end %>
    <% else %>
      <p class="text-center my-10">No card providers found.</p>
    <% end %>
  </div>
</div>
