budget/app/views/credit_card_bills/_credit_card_bill.html.erb

<div id="<%= dom_id credit_card_bill %>">
  <p class="my-5">
    <strong class="block font-medium mb-1">Description:</strong>
    <%= credit_card_bill.description %>
  </p>

  <p class="my-5">
    <strong class="block font-medium mb-1">Amount:</strong>
    <%= credit_card_bill.amount %>
  </p>

  <p class="my-5">
    <strong class="block font-medium mb-1">Accounted For:</strong>
    <%= Expense.credit_card_monthly_total %>
  </p>

  <p class="my-5">
    <strong class="block font-medium mb-1">Unpaid:</strong>
    <%= credit_card_bill.unpaid %>
  </p>

  <p class="my-5">
    <table class="min-w-full mb-8">
      <thead class="border-b">
        <tr>
          <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Member</th>
          <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Burden Percent</th>
          <th scope="col" class="text-sm font-medium text-gray-900 px-6 py-4 text-left">Burden Amount</th>
        </tr>
      </thead>
      <tbody>
        <% Member.all.each do |member| %>
          <tr class="even:bg-gray-50 border-b">
            <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= member.name %></td>
            <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= member.burden_percent * 100 %>%</td>
            <td class="text-sm text-gray-900 font-light px-6 py-4 whitespace-nowrap"><%= number_to_currency(member.burden_amount(total_amount: credit_card_bill.unpaid)) %></td>
          </tr>
        <% end %>
      </tbody>
    </table>
  </p>

  <% if action_name != "show" %>
    <%= link_to "Show this credit card bill", credit_card_bill, class: "rounded-lg py-3 px-5 bg-gray-100 inline-block font-medium" %>
    <%= link_to 'Edit this credit card bill', edit_credit_card_bill_path(credit_card_bill), class: "rounded-lg py-3 ml-2 px-5 bg-gray-100 inline-block font-medium" %>
    <hr class="mt-6">
  <% end %>
</div>