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

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

  <div class="text-4xl mb-10">
    Local Network Settings
  </div>
  <% unless @editing %>
    <div class="w-1/2 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 ml-10 space-x-2">

    <input type="hidden" name="local_network[id]" value="<%= @local_network.id %>">
  
    <div class="flex flex-col items-center">
        <input class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>' type="text" id="local_network_name" name="local_network[name]" value="<%= @local_network.name %>" <%= 'readonly' if @editing %> >
        <div class='<%= "text-[##{@accent_hex}]" if @editing %>'>Name</div>
    </div>

    <div class="flex flex-col items-center">
        <input class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>' type="text" id="local_network_subnet" name="local_network[subnet]" value="<%= @local_network.subnet %>" <%= 'readonly' if @editing %> >
        <div class='<%= "text-[##{@accent_hex}]" if @editing %>'>Subnet</div>
    </div>

    <div class="flex flex-col items-center">
        <input class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= "text-[##{@accent_hex}]" if !@editing %>' type="text" id="local_network_tld" name="local_network[tld]" value="<%= @local_network.tld %>" <%= 'readonly' if @editing %> >
        <div class='<%= "text-[##{@accent_hex}]" if @editing %>'>Top Level Domain</div>
    </div>

    <div class="flex flex-col items-center">
        <input class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= @editing ? "text-[##{@local_network.primary_dark_hex}] bg-white" : "text-[##{@accent_hex}]" %>' type="text" id="local_network_primary_dark_hex" name="local_network[primary_dark_hex]" value="<%= @local_network.primary_dark_hex %>" <%= 'readonly' if @editing %> >
        <div class='<%= "text-[##{@accent_hex}]" if @editing %>'>Site Primary Dark Hex</div>
    </div>

    <div class="flex flex-col items-center">
        <input class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= @editing ? "text-[##{@local_network.primary_light_hex}]" : "text-[##{@accent_hex}]" %>' type="text" id="local_network_primary_light_hex" name="local_network[primary_light_hex]" value="<%= @local_network.primary_light_hex %>" <%= 'readonly' if @editing %> >
        <div class='<%= "text-[##{@accent_hex}]" if @editing %>'>Site Primary Light Hex</div>
    </div>

    <div class="flex flex-col items-center">
        <input class='h-8 border-2 border-[#<%= @light_hex %>] rounded-lg text-center <%= @editing ? "text-[##{@local_network.accent_hex}]" : "text-[##{@accent_hex}]" %>' type="text" id="local_network_accent_hex" name="local_network[accent_hex]" value="<%= @local_network.accent_hex %>" <%= 'readonly' if @editing %> >
        <div class='<%= "text-[##{@accent_hex}]" if @editing %>'>Site Accent Hex</div>
    </div>

  </div>

  <div class="flex flex-col space-y-2 mt-10">
    <% if @editing %>
        <div class="w-1/2 flex ml-10 space-x-5">
            <a href="/admin/local_network/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 Local Network
            </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-1/2 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 Local Network
            </button>
            <a href="/admin/local_network" 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>