<%= form_with(model: expense, class: "contents") do |form| %>
  <% if expense.errors.any? %>
    <div id="error_explanation" class="bg-red-50 text-red-500 px-3 py-2 font-medium rounded-lg mt-3">
      <h2><%= pluralize(expense.errors.count, "error") %> prohibited this expense from being saved:</h2>

      <ul>
        <% expense.errors.each do |error| %>
          <li><%= error.full_message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="my-5">
    <%= form.label :description %>
    <%= form.text_field :description, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
  </div>

  <div class="my-5">
    <%= form.label :payment %>
    <%= form.text_field :payment, class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full" %>
  </div>

  <div class="my-5">
    <%= form.label :period %>
    <%=
      form.select :period,
        options_for_select(expense_periods, expense.period),
        {},
        class: "block shadow rounded-md border border-gray-200 outline-none px-3 py-2 mt-2 w-full"
    %>
  </div>

  <div class="my-5">
    <%= form.label :credit_card %>
    <%= form.check_box :credit_card, class: "block mt-2 h-5 w-5" %>
  </div>

  <div class="my-5">
    <%= form.label :estimated %>
    <%= form.check_box :estimated, class: "block mt-2 h-5 w-5" %>
  </div>

  <div class="inline">
    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
  </div>
<% end %>