<%= form_with(model: [:admin, user], class: "space-y-6") do |form| %>
  <% if user.errors.any? %>
    <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4 dark:bg-red-900 dark:border-red-700 dark:text-red-300">
      <h2 class="font-bold"><%= pluralize(user.errors.count, "error") %> prohibited this user from being saved:</h2>
      <ul class="list-disc list-inside mt-2">
        <% user.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="columns-1 md:columns-2 gap-6 space-y-6">
    <!-- Account Information -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg break-inside-avoid mb-6">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">Account Information</h3>
    </div>
    <div class="px-4 py-5 sm:p-6 space-y-4">
      <div>
        <%= form.label :name, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
        <%= form.text_field :name, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" %>
      </div>

      <div>
        <%= form.label :email, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
        <%= form.email_field :email, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" %>
      </div>

      <div>
        <%= form.label :password, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
        <%= form.password_field :password, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" %>
        <% if user.persisted? %>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Leave blank if you don't want to change it</p>
        <% end %>
      </div>

      <div>
        <%= form.label :password_confirmation, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
        <%= form.password_field :password_confirmation, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" %>
      </div>

      <% if user.new_record? %>
        <div>
          <%= form.label :invitation_token, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
          <%= form.text_field :invitation_token, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white", value: fetch_credential("invitation_token") %>
          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Default invitation token</p>
        </div>
      <% end %>
    </div>
    </div>

    <!-- Communication Channels -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg break-inside-avoid mb-6">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">Communication Channels</h3>
    </div>
    <div class="px-4 py-5 sm:p-6 space-y-4">
      <div>
        <%= form.label :telegram_username, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
        <%= form.text_field :telegram_username, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" %>
      </div>
    </div>
    </div>

    <!-- Languages -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg break-inside-avoid mb-6">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">Languages</h3>
    </div>
    <div class="px-4 py-5 sm:p-6 space-y-4">
      <div>
        <%= form.label :languages_from, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
        <%= form.text_field :languages_from, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" %>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Comma-separated two-letter codes (e.g., en,de,fr)</p>
      </div>

      <div>
        <%= form.label :languages_to, class: "block text-sm font-medium text-gray-700 dark:text-gray-300" %>
        <%= form.text_field :languages_to, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white" %>
        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Comma-separated two-letter codes (e.g., en,de,fr)</p>
      </div>
    </div>
    </div>

    <!-- Roles -->
    <div class="bg-white dark:bg-gray-800 shadow overflow-hidden rounded-lg break-inside-avoid mb-6">
    <div class="px-4 py-5 sm:px-6 border-b border-gray-200 dark:border-gray-700">
      <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-white">Roles</h3>
    </div>
    <div class="px-4 py-5 sm:p-6">
      <div class="space-y-4">
        <% Role.all.each do |role| %>
          <div class="flex items-start">
            <div class="flex items-center h-5">
              <%= check_box_tag "user[role_ids][]", role.id, user.roles.include?(role), id: "user_role_#{role.id}", class: "h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded dark:bg-gray-700 dark:border-gray-600" %>
            </div>
            <div class="ml-3 text-sm">
              <%= label_tag "user_role_#{role.id}", role.name, class: "font-medium text-gray-700 dark:text-gray-300" %>
              <p class="text-gray-500 dark:text-gray-400"><%= role.description %></p>
            </div>
          </div>
        <% end %>
      </div>
      <%= hidden_field_tag "user[role_ids][]", "" %>
    </div>
    </div>
  </div>
<% end %>

<div class="flex justify-between pt-6">
  <div>
    <%= link_to "Cancel", admin_users_path, class: "btn btn-secondary" %>
  </div>
  <div>
    <%= submit_tag "Save User", class: "btn btn-primary" %>
  </div>
</div>