_allocation_modal.html.erb

<%# locals: (allocation:, scenario:, color: nil) %>
<% klass = allocation.class %>
<% editing = allocation.persisted? %>
<% suffix = editing ? dom_id(allocation) : klass.model_name.element %>
<% remaining_percentage = klass == Allocation::Ongoing ? remaining_ongoing_percentage(scenario, allocation) : nil %>
<% percentage = allocation.percentage || [ 20, remaining_percentage.to_i ].min %>
<% color ||= ScenariosHelper::CHART_COLORS.first %>
<dialog data-dialog-target="dialog" data-action="click->dialog#backdropClose" class="m-auto w-full max-w-lg rounded-2xl p-0 shadow-lg backdrop:bg-[rgba(20,18,14,0.48)]">
  <%= form_with url: (editing ? scenario_allocation_path(scenario, allocation) : scenario_allocations_path(scenario)), method: (editing ? :patch : :post), class: "p-8" do |form| %>
    <%= hidden_field_tag "allocation[type]", klass.name %>
    <h2 class="font-serif font-medium text-2xl text-ink"><%= editing ? "Edit allocation" : "Create allocation" %></h2>

    <%= render "scenarios/category_picker", allocation: allocation, scenario: scenario %>

    <% if klass == Allocation::Ongoing %>
      <div class="mt-6" data-controller="allocation-slider" data-allocation-slider-limit-value="<%= remaining_percentage %>">
        <div class="flex items-center justify-between">
          <span class="text-sm text-ink-soft">Giving percentage %</span>
          <span id="allocation_headroom_<%= suffix %>" class="text-sm text-ink-faint"><%= remaining_percentage %>% remaining</span>
        </div>
        <p class="mt-1 text-lg font-medium text-ink" data-allocation-slider-target="percent"><%= percentage %>%</p>
        <%# max stays at 100 (see allocation_slider_controller.js); the headroom the
            slider actually stops at is announced through the description instead. %>
        <%= range_field_tag "allocation[percentage]", percentage, min: 0, max: 100, step: 1,
              style: "--slider-color: #{color}; --slider-value: #{percentage.to_i}; --slider-limit: #{remaining_percentage}",
              aria: { describedby: "allocation_headroom_#{suffix}" },
              data: { allocation_slider_target: "input", action: "input->allocation-slider#update" },
              class: [ "allocation-slider block mt-2", ("allocation-slider--capped" if remaining_percentage < 100) ] %>
      </div>
    <% else %>
      <% max_amount = allocation.max_amount(scenario) if klass == Allocation::OneTime %>
      <div class="mt-6">
        <%= label_tag "allocation_amount_#{suffix}", "Amount", class: "block text-sm text-ink-soft" %>
        <div class="relative mt-1">
          <span class="absolute left-3 top-1/2 -translate-y-1/2 text-ink-faint">$</span>
          <%= number_field_tag "allocation[amount]", allocation.amount.to_i, id: "allocation_amount_#{suffix}", min: 0, max: max_amount, step: "1", required: true, placeholder: "0",
                inputmode: "numeric",
                data: max_amount.present? ? { controller: "integer-input one-time-amount", action: "input->integer-input#transform", one_time_amount_max_value: max_amount } : { controller: "integer-input", action: "input->integer-input#transform" },
                class: "block w-full rounded-md border border-line bg-surface pl-7 pr-3 py-2 shadow-sm focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/10" %>
        </div>
      </div>
    <% end %>

    <%= render "scenarios/additional_preferences", allocation: allocation, scenario: scenario, suffix: suffix %>

    <div class="mt-6">
      <%= label_tag "allocation_note_#{suffix}", "Note (optional)", class: "block text-sm text-ink-soft" %>
      <%= text_area_tag "allocation[note]", allocation.note, id: "allocation_note_#{suffix}", rows: 3, placeholder: "Extra preferences, restrictions, e.g. need-based scholarships only, exclude specific orgs…",
            class: "mt-1 block w-full rounded-md border border-line bg-surface px-3 py-2 shadow-sm focus:border-accent focus:outline-none focus:ring-2 focus:ring-accent/10" %>
    </div>

    <div class="mt-8 flex justify-end gap-3">
      <button type="button" data-action="dialog#close"
              class="rounded-md border border-line bg-surface px-5 py-2.5 font-medium text-ink-soft hover:bg-canvas cursor-pointer transition">
        Cancel
      </button>
      <%= form.submit (editing ? "Save" : "Create"), class: "rounded-md px-5 py-2.5 bg-accent hover:bg-[#444] text-white font-medium cursor-pointer transition" %>
    </div>
  <% end %>
</dialog>