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

<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
  <section>
    <% if @donations.any? %>
      <p class="mb-12">
        Your financial contributions to the development and upkeep of Kosmos
        software and services.
      </p>
      <ul class="list-none">
        <% @donations.each do |donation| %>
          <li class="mb-8 grid gap-y-2 gap-x-8 grid-cols-2 items-center">
            <h3 class="mb-0">
              <%= donation.paid_at.strftime("%B %d, %Y") %>
            </h3>
            <p class="row-span-2 font-mono text-right mb-0">
              <span class="text-xl">
                <%= number_with_delimiter donation.amount_sats %> sats
              </span>
              <br>
              <span class="text-sm text-gray-500">
                (~ <%= number_to_currency donation.amount_eur / 100, unit: "" %> EUR)
              </span>
            </p>
            <p class="mb-0">
              <% if donation.public_name.present? %>
                Public name: <%= donation.public_name %>
              <% else %>
                Anonymous
              <% end %>
            </p>
          </li>
        <% end %>
      </ul>
    <% else %>
      <div class="text-center">
        <p class="mt-8 mb-12 inline-flex align-center items-center">
          <%= image_tag("/img/illustrations/undraw_savings_re_eq4w.svg", class: 'h-48') %>
        </p>
        <h3>
          No donations yet
        </h3>
        <p class="text-gray-500">
          The donation process is not automated yet.<br>Please
          <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved" class="ks-text-link" target="_blank">contact us</a>
          if you'd like to contribute this way right now.
        </p>
      </div>
    <% end %>
  </section>
<% end %>
