docbrown/app/views/listings/_form.html.erb

<%= form_with(model: listing, local: true) do |form| %>
  <div class="crayons-card p-6 mb-6 grid gap-6">
    <%= render partial: "form_errors", locals: { listing: listing } %>

    <div id="listingform-data"
      data-listing="<%= listing.to_json(only: %i[id title body_markdown listing_category_id category cached_tag_list]) %>"
      data-organizations="<%= @organizations.to_json(only: %i[id name]) %>"
      data-categories-for-select="<%= select_options_for_categories.to_json %>"
      data-categories-for-details="<%= categories_available.transform_values { |value_hash| value_hash.except(:cost) }.values.to_json %>">
      <div class="grid gap-6">
        <div class="crayons-field">
          <%= form.label "title", class: "crayons-label" %>
          <%= form.text_field "title", placeholder: t("views.listings.form.title.placeholder"), class: "crayons-textfield" %>
        </div>

        <div class="crayons-field">
          <%= form.label "body_markdown", class: "crayons-field__label" %>
          <%= form.text_area "body_markdown", placeholder: t("views.listings.form.body_markdown.placeholder"), class: "crayons-textfield" %>
          <p class="crayons-field__description"><%= t("views.listings.form.body_markdown.description") %></p>
        </div>

        <div>
          <div class="crayons-field mb-4">
            <label class="crayons-field__label" id="listing_category_placeholder"><%= t("views.listings.form.category.label") %></label>
            <select class="crayons-select" id="listing_category_placeholder">
              <option>
                <%= t("views.listings.form.category.placeholder") %>
              </option>
            </select>
          </div>

          <details>
            <summary><%= t("views.listings.form.category.summary") %></summary>
          </details>
        </div>
        <%# The following tag_list field is overridden by the Tags JS component
        from the listingForm. We keep this form field in place to facilitate
        SSR. By having the form field loaded on the DOM first with this view,
        we prevent the screen from "jumping" once the deferred JS is loaded
        and executed. %>
        <div class="crayons-field">
          <%= form.label "tag_list", class: "crayons-field__label" %>
          <%= form.text_field "tag_list", placeholder: t("views.listings.form.tags.placeholder"), class: "crayons-textfield" %>
        </div>

        <div class="crayons-field">
          <label class="crayons-field__label" for="expires_at_placeholder">
            <%= t("helpers.label.listing.expires_at") %>
            <p class="crayons-field__description">
              <%= t("views.listings.form.expiry.description") %>
            </p>
          </label>
          <input
            type="date"
            class="crayons-textfield m:max-w-50"
            id="expires_at_placeholder" />
        </div>

        <% if @organizations.present? && @organizations.size > 0 %>
          <div class="crayons-field">
            <%= form.label "organization_id", class: "crayons-field__label" %>
            <%= form.select :organization_id, { t("views.listings.form.organization.none") => "None" }, {}, { class: "crayons-select m:max-w-50" } %>
            <p class="crayons-field__description"><%= t("views.listings.form.organization.description") %></p>
          </div>
        <% end %>
      </div>
    </div>

    <% unless @organizations.present? %>
      <%= javascript_include_tag "listingForm", defer: true %>
    <% end %>

    <div class="crayons-field">
      <%= form.label "location", t("views.listings.form.location.label"), class: "crayons-field__label" %>
      <%= form.text_field "location", placeholder: t("views.listings.form.location.placeholder"), class: "crayons-textfield m:max-w-50" %>
      <p class="crayons-field__description"><%= t("views.listings.form.location.description") %></p>
    </div>
  </div>

  <div class="px-4 m:px-0">
    <% unless @credits.size > 0 || (@organizations.present? && @organizations.sum(:unspent_credits_count) > 0) %>
      <div class="crayons-notice mb-4" aria-live="polite"><%= t("views.listings.form.no_credit") %></div>
    <% end %>
    <div class="flex mb-4 items-center">
      <% if @credits.size > 0 || (@organizations.present? && @organizations.sum(:unspent_credits_count) > 0) %>
        <%= form.submit t("views.listings.form.publish"), class: "crayons-btn mr-2" %>
      <% else %>
        <a href="/credits/new" class="crayons-btn mr-2" data-no-instant><%= t("views.listings.form.purchase") %></a>
      <% end %>
      <%= form.button t("views.listings.form.save"), type: "submit", name: "listing[action]", class: "crayons-btn crayons-btn--secondary", value: "draft" %>
    </div>

    <p class="fs-s color-base-70 mb-6"><%= t("views.listings.form.save_notice") %></p>
  </div>
<% end %>