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

<%= render MainSimpleComponent.new do %>
  <%= render WalletSummaryComponent.new(balance: @balance) %>

  <%= render partial: "shared/tabnav_lightning" %>

  <section>
    <h3 class="hidden">Transactions</h3>

    <% if @transactions.any? %>
      <ul class="list-none">
        <% @transactions.each do |tx| %>
          <li class="py-4 md:py-4 grid gap-y-1 gap-x-2 grid-cols-4 border-b border-dotted border-gray-300">
            <h3 class="col-span-2 md:col-span-3 mb-0">
              <% if tx["type"] == "bitcoind_tx" %>
                <span class="inline-block">
                  <%= render partial: "icons/link-2", locals: { custom_class: "text-emerald-500 h-4 w-4 mr-0.5" } %>
                </span>
              <% else %>
                <span class="inline-block">
                  <%= render partial: "icons/zap", locals: { custom_class: "text-amber-500 h-4 w-4 mr-0.5" } %>
                </span>
              <% end %>
              <%= tx["title"] %>
            </h3>
            <p class="col-span-2 md:col-span-1 mb-0 text-right">
              <span class="text-xl font-mono <%= tx["received"] ? "text-emerald-600" : "" %>">
                <%= tx["received"] ? "+" : "" %><%= number_with_delimiter tx["amount_sats"]  %>
                <span class="text-base md:text-lg">sats</span>
              </span>
            </p>
            <p class="col-span-4 md:col-span-3 mb-0 text-gray-500">
              <%= tx["description"].present? ? tx["description"] : raw("<span class='text-gray-400'>No memo</span>") %>
            </p>
            <p class="col-span-4 md:col-span-1 md:text-right mb-0">
              <span class="col-span-2 md:col-span-1 text-sm text-gray-500">
                <%= tx["datetime"].strftime("%B %e, %H:%M") -%>
                <% if tx["fee"] && (tx["fee"] > 0) %>
                  ~ Fee: <%= pluralize tx["fee"], "sat" %>
                <% end %>
              </span>
            </p>
          </li>
        <% end %>
      </ul>
    <% else %>
      <div class="text-center">
        <p class="mt-4 mb-12 inline-flex align-center items-center">
          <%= image_tag("/img/illustrations/undraw_digital_currency_qpak.svg", class: 'h-48') %>
        </p>
        <h3>
          No transactions yet
        </h3>
        <p class="text-gray-500">
          As soon as you start receiving sats, you will find some entries here.
        </p>
      </div>
    <% end %>
  </section>
<% end %>
