dawarich/app/views/imports/_form.html.erb

<%= form_with model: import, class: "contents" do |form| %>
  <div class="form-control w-full">
    <label class="label">
      <span class="label-text">Select source</span>
    </label>
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <div class="card bordered shadow-lg p-3 hover:shadow-blue-500/50">
        <div class="form-control">
          <label class="label cursor-pointer space-x-3">
            <%= form.radio_button :source, 0, class: "radio radio-primary" %>
            <span class="label-text">Google Semantic History</span>
          </label>
          <p class="text-sm mt-2">JSON files from your Takeout/Location History/Semantic Location History/YEAR</p>
        </div>
      </div>
      <div class="card bordered shadow-lg p-3 hover:shadow-blue-500/50">
        <div class="form-control">
          <label class="label cursor-pointer space-x-3">
            <%= form.radio_button :source, :owntracks, class: "radio radio-primary" %>
            <span class="label-text">Owntracks</span>
          </label>
          <p class="text-sm mt-2">A JSON file you exported by pressing Download button in top right corner of OwnTracks web interface</p>
        </div>
      </div>
      <div class="card bordered shadow-lg p-3 hover:shadow-blue-500/50">
        <div class="form-control">
          <label class="label cursor-pointer space-x-3">
            <%= form.radio_button :source, 3, class: "radio radio-primary" %>
            <span class="label-text">Google Phone Takeout</span>
          </label>
          <p class="text-sm mt-2">A JSON file you received after your request for Takeout from your mobile device</p>
        </div>
      </div>
      <div class="card bordered shadow-lg p-3 hover:shadow-blue-500/50">
        <div class="form-control">
          <label class="label cursor-pointer space-x-3">
            <%= form.radio_button :source, 4, class: "radio radio-primary" %>
            <span class="label-text">GPX</span>
          </label>
          <p class="text-sm mt-2">GPX track file</p>
        </div>
      </div>
    </div>
  </div>

  <label class="form-control w-full max-w-xs my-5">
    <div class="label">
      <span class="label-text">Select one or multiple files</span>
    </div>
    <%= form.file_field :files, multiple: true, class: "file-input file-input-bordered w-full max-w-xs" %>
  </label>

  <div class="inline">
    <%= form.submit class: "rounded-lg py-3 px-5 bg-blue-600 text-white inline-block font-medium cursor-pointer" %>
  </div>
<% end %>