<%= form_with model: [:admin, variavel],
    url: (variavel.persisted? ? admin_variavel_path(variavel) : admin_variaveis_path),
    data: { turbo: false }, class: 'space-y-6' do |f| %>

  <% if variavel.errors.any? %>
    <div class="bg-red-500/10 border border-red-500/30 rounded-xl p-4">
      <ul class="text-red-300 text-sm list-disc list-inside space-y-0.5">
        <% variavel.errors.full_messages.each do |msg| %><li><%= msg %></li><% end %>
      </ul>
    </div>
  <% end %>

  <div class="bg-[#1a1a1a] border border-[#2a2a2a] rounded-2xl p-6 space-y-4">
    <div>
      <%= f.label :chave, 'Nome da variável', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
      <%= f.text_field :chave, required: true, placeholder: 'telefone_suporte',
          class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white font-mono
                  focus:outline-none focus:border-[#f97316]' %>
      <p class="text-gray-500 text-xs mt-1.5">
        Só letras minúsculas, números e <span class="font-mono">_</span>. Na mensagem você escreve
        <span class="font-mono text-orange-400">{{<%= variavel.chave.presence || 'telefone_suporte' %>}}</span>.
      </p>
    </div>

    <div>
      <%= f.label :valor, 'Valor', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
      <%= f.text_field :valor, required: true, placeholder: '(11) 4002-8922',
          class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
                  focus:outline-none focus:border-[#f97316]' %>
      <p class="text-gray-500 text-xs mt-1.5">É este texto que aparece no lugar da variável, em toda mensagem que a usar.</p>
    </div>

    <div>
      <%= f.label :descricao, 'Para que serve', class: 'block text-sm font-medium text-gray-300 mb-1.5' %>
      <%= f.text_field :descricao, placeholder: 'Telefone que atende o motorista',
          class: 'w-full px-4 py-3 bg-[#0a0a0a] border border-white/10 rounded-xl text-white
                  focus:outline-none focus:border-[#f97316]' %>
    </div>

    <div class="flex items-center justify-between">
      <div>
        <%= f.label :ativo, 'Variável ativa', class: 'block text-sm font-medium text-gray-300' %>
        <p class="text-gray-500 text-xs mt-0.5">Desativada, some do editor e sai vazia nas mensagens que já a usam.</p>
      </div>
      <%= f.check_box :ativo, class: 'w-5 h-5 accent-orange-500' %>
    </div>
  </div>

  <div class="flex flex-wrap gap-3">
    <%= f.submit variavel.persisted? ? 'Salvar' : 'Criar variável',
        class: 'bg-orange-500 hover:bg-orange-600 text-black font-bold px-6 py-3.5 rounded-xl min-h-[48px] cursor-pointer' %>
    <%= link_to 'Cancelar', admin_variaveis_path,
        class: 'px-5 py-3.5 text-gray-300 hover:text-white border border-[#2a2a2a] rounded-xl min-h-[48px] flex items-center' %>
  </div>
<% end %>
