<div>

<div class="md:grid md:grid-cols-3 md:gap-6">
  <div class="md:col-span-1">
    <div class="px-4 sm:px-0">
    </div>
  </div>
  <div class="mt-5 md:mt-0 md:col-span-2">

<%%= form_with(model: <%= model_resource_name %>) do |form| %>

<%% if <%= singular_table_name %>.errors.any? %>
  <div class="bg-white text-red-600 rounded-lg py-2 px-2 shadow-lg border-solid border-2 border-red-500">
  <h2 class="font-bold text-lg"><%%= t :Errors %></h2>
  <%%= t "Please correct the following issue(s):"%>
  <dl>
    <%% <%= singular_table_name %>.errors.messages.each do |key,message| %>
      <div class="mt-1 bg-red-100 shadow-inner rounded-lg px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
        <dt class="text-sm font-medium text-red-500">
          <%%= t key.capitalize  %>
        </dt>
        <dd class="mt-1 text-sm text-red-900 sm:mt-0 sm:col-span-2">
          <%% message.each do |val| %>
          <%%= t val.capitalize %><BR>
          <%% end %>
        </dd>
      </div>
    <%% end %>
    </dl>
    </div>
  <%% end %>

<div class="shadow overflow-hidden sm:rounded-md">
  <div class="px-4 py-5 bg-white sm:p-6">
  <% attributes.each do |attribute| -%>
    <div class="grid grid-cols-6 gap-6">
     <div class="col-span-6 sm:col-span-3">
        <%% if <%= singular_table_name %>.errors.any? && <%= singular_table_name %>.errors.messages.include?(:<%= attribute.column_name %>) %>
          <div class="h-3 w-3">
            <div class="animate-ping inline-flex h-full w-full rounded-full bg-red-400 opacity-75"></div>
          </div>
        <%% end %>
        <% if attribute.password_digest? -%>
          <%%= form.label :password, :class=>"block text-sm font-extralight text-gray-700" %>
          <%%= form.password_field :password, :class=>"shadow-inner focus:shadow-lg bg-gray-100 focus:bg-yellow-100 px-1 py-1 focus:ring-yellow-300 focus:ring-1 focus:outline-none focus:border-0 block w-full sm:text-sm border-gray-300 rounded-md" %>
          </div>
          </div>
          <div class="grid grid-cols-6 gap-6">
          <div class="col-span-6 sm:col-span-3">
          <%%= form.label :password_confirmation, :class=>"block text-sm font-extralight text-gray-700" %>
          <%%= form.password_field :password_confirmation, :class=>"shadow-inner focus:shadow-lg bg-gray-100 focus:bg-yellow-100 px-1 py-1 focus:ring-yellow-300 focus:ring-1 focus:outline-none focus:border-0 block w-full sm:text-sm border-gray-300 rounded-md" %>
          </div>

        <% elsif attribute.attachments? -%>
          <%%= form.label :<%= attribute.column_name %>, :class=>"block text-sm font-extralight text-gray-700" %>
          <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>,multiple: true, :class=>"shadow-inner focus:shadow-lg bg-gray-100 focus:bg-yellow-100 px-1 py-1 focus:ring-yellow-300 focus:ring-1 focus:outline-none focus:border-0 block w-full sm:text-sm border-gray-300 rounded-md" %>
        <% elsif attribute.field_type == "datetime_select" -%>
          <%%= form.label :<%= attribute.column_name %>, :class=>"block text-sm font-extralight text-gray-700" %>
          <%%= form.<%= attribute.date_field %> :<%= attribute.column_name %>, { behavior: "flatpickr",:class=>"flatpickr shadow-inner focus:shadow-lg bg-gray-100 focus:bg-yellow-100 px-1 py-1 focus:ring-yellow-300 focus:ring-1 focus:outline-none focus:border-0 block w-full sm:text-sm border-gray-300 rounded-md" %>
        <% else -%>
          <%%= form.label :<%= attribute.column_name %>, :class=>"block text-sm font-extralight text-gray-700" %>
          <%%= form.<%= attribute.field_type %> :<%= attribute.column_name %>, :class=>"shadow-inner focus:shadow-lg bg-gray-100 focus:bg-yellow-100 px-1 py-1 focus:ring-yellow-300 focus:ring-1 focus:outline-none focus:border-0 block w-full sm:text-sm border-gray-300 rounded-md" %>
        <% end -%>
      </div>
    </div>
  <% end %>
    <div class="grid grid-cols-6 gap-6 py-10">
      <div class="col-span-6 sm:col-span-6">
    <%%= form.submit :class=>"object-right inline-flex shadow-lg items-center px-6 py-3 border border-transparent shadow-sm text-base font-medium rounded-md text-white bg-indigo-500 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"%>

      </div>
    </div>
  </div>

 </div>
</div>

<%% end %>

</div>

</div>