You want to compartmentalize your forms and styling into their own function components. For example, you templates should look something like this:
<.form let={f} for={@changeset}>
<.input f={f} field={:email} type="email" value={@card.email} />
<.input f={f} field={:title} type="text />
</.form>
and you can define input functions which wraps all your styling and error tags:
def input(%{type: "email"} = assigns) do
~H"""
<%= label @f, @field, class: ["block text-sm font-medium text-gray-700"] %>
<div class="mt-1 sm:mt-0 sm:col-span-2 relative rounded-md shadow-sm">
<%= email_input @f, @field, required: true, autocomplete: false, value: @value, class: ["mt-1 block w-full shadow-sm sm:text-sm rounded-md"] ++ [(if f.errors[:email], do: "pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500", else: "focus:ring-indigo-500 focus:border-indigo-500 shadow-sm border-gray-300")] %>
<%= if @f.errors[@field] do %>
<div class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
<svg class="h-5 w-5 text-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
</svg>
</div>
<% end %>
</div>
"""
end
def input(%{type: "text"} = assigns) do
...
end
