<%= form_with(model: global_state, class: "space-y-4") do |form| %>
  <% if global_state.errors.any? %>
    <div class="rounded-md bg-red-50 p-4">
      <div class="flex">
        <div class="flex-shrink-0">
          <i class="fas fa-exclamation-circle text-red-400"></i>
        </div>
        <div class="ml-3">
          <h3 class="text-sm font-medium text-red-800">
            <%= pluralize(global_state.errors.count, "error") %> prohibited this global state from being saved:
          </h3>
          <div class="mt-2 text-sm text-red-700">
            <ul class="list-disc space-y-1 pl-5">
              <% global_state.errors.each do |error| %>
                <li><%= error.full_message %></li>
              <% end %>
            </ul>
          </div>
        </div>
      </div>
    </div>
  <% end %>

  <div>
    <%= form.label :key, class: "block text-sm font-medium text-slate-700" %>
    <div class="mt-1">
      <%= form.text_field :key, class: "block w-full rounded-md border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm" %>
    </div>
    <p class="mt-2 text-sm text-slate-500">A unique identifier for this global state.</p>
  </div>

  <div>
    <%= form.label :value_type, class: "block text-sm font-medium text-slate-700" %>
    <div class="mt-1">
      <%= form.select(
        :value_type,
        GlobalState.value_types.keys.map { |t| [t.titleize, t] },
        {},
        class: "block w-full rounded-md border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm",
        ) %>
    </div>
    <p class="mt-2 text-sm text-slate-500">
      The type of value:
      <ul class="list-disc pl-5">
        <li><strong>String:</strong> Any text value</li>
        <li><strong>Count:</strong> A whole number (e.g., "42")</li>
        <li><strong>Duration:</strong> Time duration with unit (e.g., "30s", "5m", "2h", "1d")</li>
        <li><strong>Password:</strong> Sensitive data that will be masked in the UI</li>
      </ul>
    </p>
  </div>

  <div>
    <%= form.label :value, class: "block text-sm font-medium text-slate-700" %>
    <div class="mt-1">
      <%= form.text_field :value, class: "block w-full rounded-md border-slate-300 shadow-sm focus:border-sky-500 focus:ring-sky-500 sm:text-sm" %>
    </div>
    <p class="mt-2 text-sm text-slate-500">The value to store, format depends on the selected type.</p>
  </div>

  <div class="pt-5">
    <div class="flex justify-end space-x-3">
      <%= link_to "Cancel", global_states_path, class: "rounded-md border border-slate-300 bg-white py-2 px-4 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2" %>
      <%= form.submit class: "inline-flex justify-center rounded-md border border-transparent bg-sky-600 py-2 px-4 text-sm font-medium text-white shadow-sm hover:bg-sky-700 focus:outline-none focus:ring-2 focus:ring-sky-500 focus:ring-offset-2" %>
    </div>
  </div>
<% end %>
