directory/app/views/admin/services/index.erb

<form action="/admin/services" method="POST">

<div class="text-4xl mb-10">
    Services
  </div>
  <% unless @editing %>
    <div class="w-19/20 flex flex-none items-center justify-between ml-5 mb-2">
        <div class="flex-none text-xl text-[#<%= @accent_hex %>]">Edit</div>
        <div class="grow h-[1px] mt-1 bg-[#<%= @accent_hex %>]"></div>
    </div>
  <% end %>
  <div class="flex flex-col ml-10 space-y-2">
    <% @services.each_with_index do |serv, index| %>
      <div class="flex space-x-2">
            <input type="hidden" name="services[][id]" value="<%= serv.id %>">

            <div class="flex flex-col items-center">
                <input type="text" 
                        class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>'
                        id="serv_<%= index %>_name" 
                        name="services[][name]" 
                        value="<%= serv.name %>"
                        <%= 'readonly' if @editing %> >
                <% if index == @services.length - 1 %>
                    <div class="<%= "text-[##{@accent_hex}]" if @editing %>">Name</div>  
                <% end %>
            </div>
            
            <div class="flex flex-col items-center">
                <select class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>'name="services[][service_type_id]" id="service_type_select" <%= 'disabled' if @editing %> >
                    <option value="">Select a Service Type</option>
                    <% @service_types.each do |service_type| %>
                        <option value="<%= service_type.id %>"  <%= "selected" if serv.service_type_id == service_type.id %>><%= service_type.name %></option>
                    <% end %>
                </select>
                <% if index == @services.length - 1 %>
                    <div class="<%= "text-[##{@accent_hex}]" if @editing %>">Service Type</div>  
                <% end %>
            </div>

            <div class="flex flex-col items-center">
                <select class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>'name="services[][machine_id]" id="machine_select" <%= 'disabled' if @editing %> >
                    <option value="">Select a Service Type</option>
                    <% @machines.each do |machine| %>
                        <option value="<%= machine.id %>"  <%= "selected" if serv.machine_id == machine.id %>><%= machine.name %></option>
                    <% end %>
                </select>
                <% if index == @services.length - 1 %>
                    <div class="<%= "text-[##{@accent_hex}]" if @editing %>">Machine</div>  
                <% end %>
            </div>

            <div class="flex flex-col items-center">
                <input type="text" 
                        class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>'
                        id="serv_<%= index %>_subdomain"
                        name="services[][subdomain]" 
                        value="<%= serv.subdomain%>"
                        <%= 'readonly' if @editing %> >
                <% if index == @services.length - 1 %>
                    <div class="<%= "text-[##{@accent_hex}]" if @editing %>">Subdomain</div>  
                <% end %>
            </div>

            <div class="flex flex-col items-center">
                <input type="text" 
                        class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>'
                        id="serv_<%= index %>_port"
                        name="services[][port]" 
                        value="<%= serv.port%>"
                        <%= 'readonly' if @editing %> >
                <% if index == @services.length - 1 %>
                    <div class="<%= "text-[##{@accent_hex}]" if @editing %>">Port</div>  
                <% end %>
            </div>

            <div class="flex flex-col items-center">
                <input type="text" 
                        class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>'
                        id="serv_<%= index %>_url_path"
                        name="services[][url_path]" 
                        value="<%= serv.url_path%>"
                        <%= 'readonly' if @editing %> >
                <% if index == @services.length - 1 %>
                    <div class="<%= "text-[##{@accent_hex}]" if @editing %>">URL Path (optional)</div>  
                <% end %>
            </div>

      </div>
    <% end %>
  </div>


  <div class="flex flex-col space-y-2 mt-10">
    <% if @editing %>
        <div class="w-19/20 flex ml-10 space-x-5">
            <a href="/admin/services/edit" class="inline-block w-50 px-3 py-1 mt-20 text-center font-semibold text-[#<%= @dark_hex %>] bg-[#<%= @light_hex %>] border-2 border-[#<%= @light_hex %>] rounded-lg hover:text-[#<%= @accent_hex %>] hover:bg-[#<%= @dark_hex %>] hover:border-[#<%= @accent_hex %>] transition-colors duration-200">
                Edit/Add Services
            </a>
            <a href="/admin" class="inline-block w-50 px-3 py-1 mt-20 text-center font-semibold text-[#<%= @dark_hex %>] bg-[#F80800] border-2 border-[#F80800] rounded-lg hover:text-[#F80800] hover:bg-[#<%= @dark_hex %>] hover:border-[#F80800] transition-colors duration-200">
                Back To Admin
            </a>
        </div>
    <% else %>
        <div class="w-19/20 flex flex-none items-center justify-between ml-5 mb-2">
            <div class="flex-none text-xl text-[#<%= @accent_hex %>]">New</div>
            <div class="grow h-[1px] mt-1 bg-[#<%= @accent_hex %>]"></div>
        </div>
        <div class="flex space-x-2 mb-10 ml-10"">
            <input type="hidden" name="services[][id]" value="">

            <div class="flex flex-col items-center">
                <input type="text" 
                        class="h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center" 
                        id="serv_new_name" 
                        name="services[][name]" 
                        value="">
                <div class="text-[#<%= @accent_hex %>]">Name</div>
            </div>

            <div class="flex flex-col items-center">
                <select class="h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center" name="services[][service_type_id]" id="service_type_select" <%= 'disabled' if @editing %> >
                    <option value="">Select a Service Type</option>
                    <% @service_types.each do |service_type| %>
                        <option value="<%= service_type.id %>"><%= service_type.name %></option>
                    <% end %>
                </select>
                <div class="text-[#<%= @accent_hex %>]">Service Type</div>  
            </div>

            <div class="flex flex-col items-center">
                <select class="h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center" name="services[][machine_id]" id="machine_select" <%= 'disabled' if @editing %> >
                    <option value="">Select a Service Type</option>
                    <% @machines.each do |machine| %>
                        <option value="<%= machine.id %>"><%= machine.name %></option>
                    <% end %>
                </select>
                <div class="text-[#<%= @accent_hex %>]">Machine</div>
            </div>

            <div class="flex flex-col items-center">
                <input type="text" 
                        class="h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center" 
                        id="serv_new_subdomain" 
                        name="services[][subdomain]" 
                        value="">
                <div class="text-[#<%= @accent_hex %>]">Subdomain</div>
            </div>

            <div class="flex flex-col items-center">
                <input type="text" 
                        class="h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center" 
                        id="serv_new_port"
                        name="services[][port]" 
                        value="">
                <div class="text-[#<%= @accent_hex %>]">Port</div>
            </div>

            <div class="flex flex-col items-center">
                <input type="text" 
                        class="h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center" 
                        id="serv_new_url_path"
                        name="services[][url_path]" 
                        value="">
                <div class="text-[#<%= @accent_hex %>]">URL Path (optional)</div>
            </div>

        </div>
        <div class="w-19/20 flex ml-10 space-x-5">
            <button type="submit" class="inline-block w-50 px-3 py-1 mt-20 text-center font-semibold text-[#<%= @dark_hex %>] bg-[#<%= @light_hex %>] border-2 border-[#<%= @light_hex %>] rounded-lg hover:text-[#<%= @accent_hex %>] hover:bg-[#<%= @dark_hex %>] hover:border-[#<%= @accent_hex %>] transition-colors duration-200">
                Save Services
            </button>
            <a href="/admin/services" class="inline-block w-50 px-3 py-1 mt-20 text-center font-semibold text-[#<%= @dark_hex %>] bg-[#F80800] border-2 border-[#F80800] rounded-lg hover:text-[#F80800] hover:bg-[#<%= @dark_hex %>] hover:border-[#F80800] transition-colors duration-200">
                Cancel
            </a>
        </div>
    <% end %>
  </div>
  
</form>