<div>
  <.form
    :let={f}
    for={@changeset}
    id="embed-form"
    phx-target={@myself}
    phx-change="validate"
    phx-submit="save"
  >
    <div class="my-3 mb-10">
      <ClaperWeb.Component.Input.text
        form={f}
        key={:title}
        name={gettext("Title")}
        labelClass={if @dark, do: "text-white"}
        fieldClass={if @dark, do: "bg-gray-700 text-white"}
        autofocus="true"
        required="true"
      />

      <div class="mt-3 flex gap-x-2 items-center">
        <ClaperWeb.Component.Input.select
          form={f}
          key={:provider}
          name={gettext("Provider")}
          array={@providers}
          labelClass={if @dark, do: "text-white"}
          fieldClass={if @dark, do: "bg-gray-700 text-white h-full"}
          required="true"
        />
        <div class="flex-1">
          <p></p>
          <ClaperWeb.Component.Input.text
            form={f}
            key={:content}
            name={
              if Ecto.Changeset.get_field(@changeset, :provider) == "custom",
                do: gettext("Iframe code"),
                else: gettext("Link to the content")
            }
            labelClass={if @dark, do: "text-white"}
            fieldClass={if @dark, do: "bg-gray-700 text-white"}
            autofocus="true"
            required="true"
          />
        </div>
      </div>

      <p class="text-gray-700 text-xl font-semibold mt-5"><%= gettext("Options") %></p>

      <div class="flex gap-x-2 mb-5 mt-3">
        <%= checkbox(f, :attendee_visibility, class: "h-4 w-5") %>
        <%= label(
          f,
          :attendee_visibility,
          gettext("Attendees can view the web content on their device"),
          class: "text-sm font-medium"
        ) %>
      </div>
    </div>

    <div class="flex space-x-3">
      <button
        type="submit"
        phx_disable_with="Loading..."
        class="w-full lg:w-auto px-6 text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-primary-500 to-secondary-500 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
      >
        <%= case @live_action do
          :new -> gettext("Create")
          :edit -> gettext("Save")
        end %>
      </button>
      <%= if @live_action == :edit do %>
        <%= link(gettext("Delete"),
          to: "#",
          phx_click: "delete",
          phx_target: @myself,
          phx_value_id: @embed.id,
          data: [
            confirm: gettext("This will delete the web content, are you sure?")
          ],
          class:
            "w-full lg:w-auto px-6 text-center text-white py-2 rounded-md tracking-wide font-bold focus:outline-none focus:shadow-outline bg-gradient-to-tl from-supporting-red-600 to-supporting-red-400 bg-size-200 bg-pos-0 hover:bg-pos-100 transition-all duration-500"
        ) %>
      <% end %>
    </div>
  </.form>
</div>
