<%# Editor de blocos de UM evento em UM canal. O estado vive num array JS; o HTML dos cards é desenhado a partir dele e serializado num hidden ao salvar. Desenhar a partir do estado (em vez de ler o DOM) é o que faz arrastar, remover e reordenar não perderem conteúdo. %> <% outro_canal = @canal == 'email' ? 'whatsapp' : 'email' %>

Mensagem — <%= @evento.nome %>

Canal: <%= @canal == 'email' ? 'E-mail' : 'WhatsApp' %> · Gatilho: <%= @evento.gatilho_label %>

<%= link_to "Editar #{outro_canal == 'email' ? 'e-mail' : 'WhatsApp'}", template_admin_evento_path(@evento, canal: outro_canal), data: { turbo: false }, class: 'px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500' %> <%= link_to 'Voltar', admin_eventos_path, data: { turbo: false }, class: 'px-4 py-2.5 rounded-xl text-sm bg-[#1a1a1a] text-gray-300 border border-white/10 hover:border-orange-500' %>
<% if @template.errors.any? %>
<% end %> <%= form_with url: template_admin_evento_path(@evento, canal: @canal), method: :patch, data: { turbo: false }, id: 'form-template' do |f| %> <%= hidden_field_tag :blocos, @template.blocos.to_json, id: 'campo-blocos' %>
<%# ── Paleta ──────────────────────────────────────────── %>

Blocos

Arraste para a mensagem — ou clique.

<% Notificacao::Blocos::CATALOGO.each do |tipo, meta| %>
⠿ <%= meta[:rotulo] %> <%= meta[:dica] %>
<% end %>
<%# ── Variáveis ─────────────────────────────────────── %>

Variáveis

Clique num campo da mensagem e depois numa variável para inseri-la ali.

<% @variaveis.each do |nome, meta| %> <% end %>
<%# ── Mensagem ────────────────────────────────────────── %>
<% if @canal == 'email' %>
<%= text_field_tag :assunto, @template.assunto, id: 'assunto', class: 'campo-editavel w-full bg-[#141414] border border-white/10 rounded-xl text-white text-sm px-3 py-2.5 focus:outline-none focus:border-orange-500' %>
<% end %>

Mensagem

Arraste um bloco para cá. Sem blocos, o evento continua usando o texto padrão do sistema.

<%= submit_tag 'Salvar mensagem', class: 'px-4 py-2.5 rounded-xl text-sm font-semibold bg-orange-500 text-black hover:bg-orange-400 cursor-pointer' %>
<%# ── Preview ─────────────────────────────────────────── %>

Preview

Com valores de exemplo, renderizado pelo mesmo código do envio.

<%# iframe sandbox: o HTML do e-mail é montado pelo nosso renderizador (que escapa tudo), mas exibir dentro de um sandbox sem scripts evita que os estilos do e-mail vazem para o admin — e vice-versa. %> 

      

    

  <% end %>