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 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: "128 characters max, plain text", class: "crayons-textfield" %>
        </div>

        <div class="crayons-field">
          <%= form.label "body_markdown", "Body Markdown", class: "crayons-field__label" %>
          <%= form.text_area "body_markdown", placeholder: "...", class: "crayons-textfield" %>
          <p class="crayons-field__description">400 characters max, 12 line break max, no images allowed, *markdown is encouraged*</p>
        </div>

        <div>
          <div class="crayons-field mb-4">
            <label class="crayons-field__label" id="listing_category_placeholder">Category</label>
            <select class="crayons-select" id="listing_category_placeholder">
              <option>
                Conference CFP (1 Credit)
              </option>
            </select>
          </div>

          <details>
            <summary>Category details/rules</summary>
          </details>
        </div>
        <%# The following tag_list field is overriden 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", "Tags", class: "crayons-field__label" %>
          <%= form.text_field "tag_list", placeholder: "Add up to 8 tags...", class: "crayons-textfield" %>
        </div>

        <div class="crayons-field">
          <label class="crayons-field__label" for="expires_at_placeholder">
            Custom Expire Date
            <p class="crayons-field__description">
              If applicable for time sensitive events, deadlines, etc.
            </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", "Post under an organization", class: "crayons-field__label" %>
            <%= form.select :organization_id, { "None" => "None" }, {}, { class: "crayons-select m:max-w-50" } %>
            <p class="crayons-field__description">Posting on behalf of an organization spends the organization's credits.</p>
          </div>
        <% end %>

        <div class="crayons-field crayons-field--checkbox">
          <input
            type="checkbox"
            class="crayons-checkbox"
            id="contact_via_connect_placeholder"
            checked=true />

          <label class="crayons-field__label" for="contact_via_connect_placeholder">
            Connect messaging
            <p class="crayons-field__description">Allow Users to message me via Connect.</p>
          </label>
        </div>
      </div>
    </div>

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

    <div class="crayons-field">
      <%= form.label "location", "Location (If applicable for events, etc.)", class: "crayons-field__label" %>
      <%= form.text_field "location", placeholder: "New York", class: "crayons-textfield m:max-w-50" %>
      <p class="crayons-field__description">32 characters max, plain text</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">You need at least one credit to create a listing.</div>
    <% end %>
    <div class="flex mb-4 items-center">
      <% if @credits.size > 0 || (@organizations.present? && @organizations.sum(:unspent_credits_count) > 0) %>
        <%= form.submit "Publish listing", class: "crayons-btn mr-2" %>
      <% else %>
        <a href="/credits/new" class="crayons-btn mr-2" data-no-instant>Purchase credits</a>
      <% end %>
      <%= form.button "Save draft", type: "submit", name: "listing[action]", class: "crayons-btn crayons-btn--secondary", value: "draft" %>
    </div>

    <p class="fs-s color-base-70 mb-6">You will not be charged credits to save a draft.</p>
  </div>
<% end %>