canine/app/views/projects/services/new.html.erb

<%= turbo_frame_tag "new_service" do %>
  <div>
    <%= form_with(model: [@project, @service], url: project_services_path) do |form| %>
      <div class="form-group">
        <%= form.label :name %>
        <%= form.text_field :name, class: "input input-bordered w-full max-w-sm", required: true, placeholder: "ex: web" %>
      </div>

      <div class="form-group">
        <%= form.label :description %>
        <%= form.text_area :description, class: "textarea textarea-bordered w-full max-w-sm", required: false, placeholder: "Enter your description here... (supports markdown)" %>
        <label class="label">
          <span class="label-text-alt">Optional</span>
        </label>
      </div>

      <div data-controller="card-select">
        <div class="form-group">
          <div class="flex gap-4">
            <%= form.select(
              :service_type,
              Service.service_types.keys.map { |type| [type.titleize, type] },
              {},
              class: "select select-bordered hidden",
              data: { 'card-select-target': "input" }
            ) %>
            <div
              class="cursor-pointer card w-64 bg-base-200"
              data-card-name="web_service"
              data-action="click->card-select#selectCard"
              data-card-select-target="card"
            >
              <div class="card-body">
                <iconify-icon icon="lucide:globe"></iconify-icon>
                <h2 class="card-title">Web service</h2>
                <p class="text-sm">
                  Useful for publicly accessible services like web applications.
                </p>
              </div>
            </div>
            <div
              class="cursor-pointer card w-64 bg-base-200"
              data-card-name="background_service"
              data-action="click->card-select#selectCard"
              data-card-select-target="card"
            >
              <div class="card-body">
                <iconify-icon icon="lucide:cpu"></iconify-icon>
                <h2 class="card-title">Background worker</h2>
                <p class="text-sm">
                  Useful for services that don't require exposing a port, such as background workers that run continuously.
                </p>
              </div>
            </div>

            <div
              class="cursor-pointer card w-64 bg-base-300"
              data-card-name="cron_job"
              data-action="click->card-select#selectCard"
              data-card-select-target="card"
            >
              <div class="card-body">
                <iconify-icon icon="lucide:clock"></iconify-icon>
                <h2 class="card-title">Cron job</h2>
                <p class="text-sm">
                  Useful for running tasks at a specific time like backups.
                </p>
              </div>
            </div>
          </div>
        </div>

        <div class="my-4 text-warning italic text-sm">
          Do not create any databases here, create an <%= link_to "add on", add_ons_path %> and then connect it to your project.
        </div>

        <div class="form-group">
          <%= form.label :command %>
          <%= form.text_field :command, class: "input input-bordered w-full max-w-sm font-mono text-sm", required: false %>
          <label class="label">
            <span class="label-text-alt">Optional: A blank command will run the default command from the Dockerfile</span>
          </label>
        </div>

        <div class="card-form hidden card-web_service">
          <h3 class="text-lg font-bold">Networking</h3>
          <div class="form-group">
            <%= form.label :container_port %>
            <%= form.number_field :container_port, class: "input input-bordered w-full max-w-sm", placeholder: "3000" %>
          </div>
          <div class="form-group">
            <%= form.label :healthcheck_url %>
            <%= form.text_field :healthcheck_url, class: "input input-bordered w-full max-w-sm", placeholder: "/health" %>
          </div>
          <div class="form-control rounded-lg bg-base-200 p-2 px-4 max-w-sm">
            <label class="label mt-1">
              <span class="label-text cursor-pointer">Allow public networking</span>
              <%= form.check_box :allow_public_networking, class: "checkbox" %>
            </label>
          </div>
          <span class="label-text-alt">Checking this allows your service to be accessible from the public internet</span>
        </div>

        <div class="card-form hidden card-web_service card-background_service">
          <h3 class="text-lg font-bold mt-4">Resources</h3>
          <div class="form-group">
            <%= form.label :replicas %>
            <%= form.number_field :replicas, class: "input input-bordered w-full max-w-sm", placeholder: "1" %>
          </div>
        </div>

        <div class="card-form hidden card-cron_job">
          <div class="form-group">
            <h3 class="text-lg font-bold">Cron job</h3>
            <%= form.fields_for :cron_schedule do |cron_schedule_form| %>
              <%= cron_schedule_form.label :schedule %>
              <%= cron_schedule_form.text_field :schedule, class: "input input-bordered w-full max-w-sm font-mono text-sm", placeholder: "0 0 * * *" %>
            <% end %>
            <label class="label">
              <span class="label-text-alt">Use <a href="https://crontab.guru/" target="_blank">crontab.guru</a> to schedule your cron job</span>
            </label>
          </div>
        </div>
      </div>

      <div class="form-footer">
        <%= form.button "Submit", class: "btn btn-primary", data: { turbo: "false", disable_with: "Submitting..." } %>
        <%= link_to "Cancel", project_services_path(@project), class: "btn btn-outline" %>
      </div>
    <% end %>
  </div>
<% end %>