<%= form_with model: bubble, class: "flex flex-column gap full-width" do | form | %> <%= form.label :title, class: "flex flex-column justify-start align-start" do %> <%= form.text_field :title, class: "input full-width", required: true, placeholder: "Name it…" %> <% end %>

<% Bubble.colors.keys.each do | color | %> <%= form.radio_button :color, color %> <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24, class: "checked" %> <% end %>

<%= collection_check_boxes(:bubble, :tag_ids, Tag.all, :id, :title) do |f| %> <%= f.label(class: "btn txt-medium") { f.checkbox + tag.span(f.text) } %> <% end %> <%= image_tag "add.svg", aria: { hidden: "true" }, size: 24 %>

<%= image_tag bubble.image.presence || "default-picture.webp", alt: "Picture", data: { upload_preview_target: "image" } %> <%= form.file_field :image, class: "input", accept: "image/png, image/jpeg, image/jpg, image/webp", data: { upload_preview_target: "input", action: "upload-preview#previewImage" } %>

<%= form.button class: "btn btn--reversed" do %> <%= image_tag "check.svg", aria: { hidden: "true" }, size: 24%> <% end %> <% end %>