_form.html.erb

<%= simple_form_for(@tutorial, html: { multipart: true }) do |f| %>
  <%= render 'shared/errors', resource: @tutorial if @tutorial.errors.any? %>

  <div class="p-3">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
      <div>
        <%= f.input :title, as: :text,
                    input_html: { rows: 2,
                                  value: f.object.title } %>
      </div>
      <div class="admin-only bg-blue-100 rounded grid grid-cols-2 items-center mt-6 md:mt-0 p-3">
        <%= f.input :type, as: :select, collection: ['Tutorial', 'Podcast', 'Intro'], prompt: 'Select type' %>
        <%= f.input :published, as: :boolean %>
        <%= f.input :featured, as: :boolean %>
        <%= f.input :publicly_visible, as: :boolean %>
        <%= f.input :publicly_featured, as: :boolean %>
      </div>
    </div>

    <div class="flex gap-4 mb-6">
      <div class="flex-1">
        <%= f.input :youtube_url,
                    as: :text,
                    hint: "Embed a youtube video",
                    input_html: { rows: 1, value: f.object.youtube_url } %>
      </div>
      <div class="flex-1">
        <%= f.input :position,
                    as: :integer,
                    hint: "Order to display videos in (lower numbers display first)" %>
      </div>
    </div>

    <%= render "shared/form_image_fields", f: f, include_primary_asset: true %>

    <div class="mb-3">
      <%= f.input :body, as: :text,
                  input_html: { rows: 10, value: f.object.body } %>
    </div>

    <!-- Accordions -->
    <div class="space-y-4 mt-8">
      <div class="tags-section" data-controller="dropdown">
        <button
          type="button"
          id="tags_button"
          class="
            flex items-center justify-between cursor-pointer w-full
            bg-gray-500 text-white hover:bg-gray-300 px-3 py-2 rounded-t-md"
          data-action="dropdown#toggle"
          data-dropdown-payload-param='[{"tags":"hidden"}, {"tags_arrow":"rotate-180"}, {"tags_button":"rounded-md rounded-t-md"}]'>
          Tags
          <svg
            id="tags_arrow"
            class="w-6 h-6 shrink-0 rotate-180"
            fill="currentColor"
            viewBox="0 0 20 20"
            xmlns="http://www.w3.org/2000/svg">
            <path
              fill-rule="evenodd"
              d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
              clip-rule="evenodd"
            ></path>
          </svg>
        </button>

        <div id="tags" class="border border-gray-300 p-4 rounded-b-md">
          <!-- Sectors -->
          <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm mb-6">
            <h3 class="text-base font-semibold text-gray-800 mb-3">Which sectors apply?</h3>

            <div class="flex flex-wrap gap-3">
              <% @sectors.each do |sector| %>
                <% id = "tutorial_sector_ids_#{sector.id}" %>

                <label
                  for="<%= id %>"
                  class="
                    flex items-center gap-2 p-3 cursor-pointer w-auto min-w-[180px] bg-white border border-gray-200
                    rounded-lg shadow-sm hover:bg-gray-100 transition">
                  <%= hidden_field_tag "tutorial[sector_ids][]", "" %>
                  <%= check_box_tag "tutorial[sector_ids][]",
                                    sector.id,
                                    @tutorial.sector_ids.include?(sector.id),
                                    id: id,
                                    class: "h-4 w-4 text-blue-600 rounded" %>

                  <span class="text-sm text-gray-700 whitespace-nowrap"><%= sector.name %></span>
                </label>
              <% end %>
            </div>
          </div>

          <!-- Categories -->
          <div class="form-group space-y-6">
            <% @categories_grouped.each do |type, cats| %>
              <div class="rounded-lg border border-gray-200 bg-gray-50 p-4 shadow-sm">
                <h3 class="text-base font-semibold text-gray-800 mb-3"><%= type.display_label %></h3>

                <div class="flex flex-wrap gap-3">
                  <% cats.each do |category| %>
                    <% id = "tutorial_category_ids_#{category.id}" %>

                    <label
                      for="<%= id %>"
                      class="
                        flex items-center gap-2 p-3 cursor-pointer w-auto min-w-[180px] bg-white border
                        border-gray-200 rounded-lg shadow-sm hover:bg-gray-100 transition">
                      <%= hidden_field_tag "tutorial[category_ids][]", "" %>
                      <%= check_box_tag "tutorial[category_ids][]",
                                        category.id,
                                        @tutorial.category_ids.include?(category.id),
                                        id: id,
                                        class: "h-4 w-4 text-blue-600 rounded" %>

                      <span class="text-sm text-gray-700 whitespace-nowrap"><%= category.name %></span>
                    </label>
                  <% end %>
                </div>
              </div>
            <% end %>
          </div>
        </div>
      </div>
    </div>

    <div class="action-buttons mt-8 flex justify-center gap-3">
      <% if allowed_to?(:destroy?, f.object) %>
        <%= link_to "Delete", @tutorial, class: "btn btn-danger-outline",
                    data: { turbo_method: :delete, turbo_confirm: "Are you sure you want to delete?" } %>
      <% end %>
      <%= link_to "Cancel", tutorials_path, class: "btn btn-secondary-outline ms-2" %>
      <%= f.button :submit, class: "btn btn-primary" %>
    </div>
  </div>
<% end %>