<div class="rounded-lg p-6 bg-emerald-50 hover:bg-emerald-100 transition-colors">
  <h3 class="mb-4 text-lg font-bold">Donate directly with Bitcoin</h3>
  <p class="mb-6">
    Open-source money for open-source services.
  </p>
  <div data-controller="modal" data-action="keydown.esc->modal#close">
    <button class="btn-md btn-emerald w-full lg:w-1/2" data-action="click->modal#open">
      Donate
    </button>
    <%= render ModalComponent.new(show_close_button: false) do %>
      <div>
        <h3>Your contribution</h3>

        <%= form_with(url: contributions_donations_url, method: :post) do |f| %>
          <%= f.hidden_field :donation_method, value: "btcpay" %>

          <div class="mb-6 flex gap-2">
            <%= f.number_field :amount, required: true %>
            <%= f.select :currency, options_for_select([
                  ["EUR", "EUR"], ["USD", "USD"], ["sats", "sats"]
                ], selected: "EUR"), class: "flex-none" %>
          </div>

          <%= render FormElements::FieldsetComponent.new(tag: "div", title: "Public name") do %>
            <%= f.text_field :public_name, class: "w-full", placeholder: "Anonymous"  %>
          <% end %>

          <p class="mt-12">
            <%= f.submit 'Continue', data: { turbo: false },
                  class: "btn-md btn-blue w-full" %>
          </p>
        <% end %>
      </div>
    <% end %>
  </div>
</div>
