dawarich/app/views/families/edit.html.erb

<div class="container mx-auto px-4 py-8">
  <div class="max-w-2xl mx-auto">
    <div class="bg-white dark:bg-gray-800 shadow dark:shadow-gray-700 rounded-lg p-6">
      <div class="flex items-center justify-between mb-6">
        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100">
          <%= t('families.edit.title', default: 'Edit Family') %>
        </h1>
        <%= link_to family_path(@family),
              class: "text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200 font-medium" do %>
          <%= t('families.edit.back', default: '← Back to Family') %>
        <% end %>
      </div>

      <%= form_with model: @family, local: true, class: "space-y-6" do |form| %>
        <% if @family.errors.any? %>
          <div class="bg-red-50 dark:bg-red-900/50 border border-red-200 dark:border-red-700 rounded-md p-4">
            <div class="flex">
              <div class="ml-3">
                <h3 class="text-sm font-medium text-red-800 dark:text-red-200">
                  <%= t('families.edit.error_title', default: 'There were problems with your submission:') %>
                </h3>
                <div class="mt-2 text-sm text-red-700 dark:text-red-300">
                  <ul class="list-disc pl-5 space-y-1">
                    <% @family.errors.full_messages.each do |message| %>
                      <li><%= message %></li>
                    <% end %>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        <% end %>

        <div>
          <%= form.label :name, t('families.form.name', default: 'Family Name'), class: "block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2" %>
          <%= form.text_field :name,
                class: "w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500",
                placeholder: t('families.form.name_placeholder', default: 'Enter your family name') %>
          <p class="mt-1 text-sm text-gray-500 dark:text-gray-400">
            <%= t('families.edit.name_help', default: 'Choose a name that all family members will recognize.') %>
          </p>
        </div>

        <div class="bg-gray-50 dark:bg-gray-700 p-4 rounded-md">
          <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-2">
            <%= t('families.edit.family_info', default: 'Family Information') %>
          </h3>
          <dl class="grid grid-cols-1 gap-x-4 gap-y-2 sm:grid-cols-2">
            <div>
              <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                <%= t('families.edit.creator', default: 'Created by') %>
              </dt>
              <dd class="text-sm text-gray-900 dark:text-gray-100"><%= @family.creator.email %></dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                <%= t('families.edit.created_on', default: 'Created on') %>
              </dt>
              <dd class="text-sm text-gray-900 dark:text-gray-100"><%= @family.created_at.strftime('%B %d, %Y') %></dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                <%= t('families.edit.members_count', default: 'Members') %>
              </dt>
              <dd class="text-sm text-gray-900 dark:text-gray-100">
                <%= pluralize(@family.members.count, 'member') %>
              </dd>
            </div>
            <div>
              <dt class="text-sm font-medium text-gray-500 dark:text-gray-400">
                <%= t('families.edit.last_updated', default: 'Last updated') %>
              </dt>
              <dd class="text-sm text-gray-900 dark:text-gray-100"><%= @family.updated_at.strftime('%B %d, %Y') %></dd>
            </div>
          </dl>
        </div>

        <div class="flex items-center justify-between pt-4">
          <div class="flex space-x-3">
            <%= form.submit t('families.edit.save_changes', default: 'Save Changes'),
                  class: "bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white px-6 py-2 rounded-md font-medium transition-colors duration-200" %>
            <%= link_to family_path(@family),
                  class: "bg-gray-300 hover:bg-gray-400 dark:bg-gray-600 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-200 px-6 py-2 rounded-md font-medium transition-colors duration-200" do %>
              <%= t('families.edit.cancel', default: 'Cancel') %>
            <% end %>
          </div>

          <% if policy(@family).destroy? %>
            <%= link_to family_path(@family),
                  method: :delete,
                  data: { turbo_confirm: 'Are you sure you want to delete this family? This action cannot be undone and will remove all members.' },
                  class: "text-red-600 hover:text-red-800 dark:text-red-400 dark:hover:text-red-300 font-medium" do %>
              Delete Family
            <% end %>
          <% end %>
        </div>
      <% end %>
    </div>
  </div>
</div>