<div>
  <.form
    :let={f}
    for={@changeset}
    id="form-quiz"
    phx-target={@myself}
    phx-change="validate"
    phx-submit="save"
  >
    <div class="my-3 mb-5">
      <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>

    <div>
      <div class="w-full bg-gray-300 text-gray-700 h-9 text-sm flex items-center rounded-t-md">
        <%= for i <- 0..(Ecto.Changeset.get_field(@changeset, :quiz_questions) |> length()) - 1 do %>
          <button
            type="button"
            phx-click="set_current_quiz_question_index"
            phx-value-index={i}
            phx-target={@myself}
            class={[
              "px-3 py-1 h-full",
              if(@current_quiz_question_index == i, do: "bg-white text-gray-800"),
              if(i == 0, do: "rounded-tl-md")
            ]}
          >
            <%= i + 1 %>
          </button>
        <% end %>
        <%= if Ecto.Changeset.get_field(@changeset, :quiz_questions) |> length() < 10 do %>
          <button
            type="button"
            phx-click="add_quiz_question"
            class="text-xs px-3"
            phx-target={@myself}
          >
            + <%= gettext("Add Question") %>
          </button>
        <% end %>
      </div>

      <%= inputs_for f, :quiz_questions, fn q -> %>
        <div class={[
          "mb-4 p-4 border rounded-b-md",
          if(@current_quiz_question_index != q.index, do: "hidden", else: "")
        ]}>
          <div class="flex gap-x-3 mt-3 items-center justify-start">
            <ClaperWeb.Component.Input.text
              form={q}
              labelClass={if @dark, do: "text-white"}
              fieldClass={if @dark, do: "bg-gray-700 text-white"}
              key={:content}
              name={gettext("Your question")}
              autofocus="true"
              required="true"
            />
          </div>

          <%= if Keyword.has_key?(q.errors, :quiz_question_opts) do %>
            <p class="text-supporting-red-500 text-sm my-2">
              <%= elem(Keyword.get(q.errors, :quiz_question_opts), 0) %>
            </p>
          <% end %>

          <div class="mt-5">
            <%= inputs_for q, :quiz_question_opts, fn o -> %>
              <div class="mt-2" id={"answer-#{o.index}"}>
                <div class="flex items-center gap-x-2">
                  <div class="flex-1">
                    <ClaperWeb.Component.Input.text
                      form={o}
                      labelClass={if @dark, do: "text-white"}
                      fieldClass={if @dark, do: "bg-gray-700 text-white"}
                      key={:content}
                      name={gettext("Answer %{index}", index: o.index + 1)}
                      required="true"
                    />
                  </div>
                  <div>
                    <%= label(class: "mt-6 cursor-pointer flex items-center text-white rounded-md px-2.5 py-2.5 h-full #{if (o.source.changes[:is_correct] != nil && o.source.changes[:is_correct]) || (!Map.has_key?(o.source.changes, :is_correct) && o.source.data.is_correct), do: "bg-green-500", else: "bg-red-500"}") do %>
                      <%= checkbox(o, :is_correct, class: "hidden") %>
                      <%= if (o.source.changes[:is_correct] != nil && o.source.changes[:is_correct]) || (!Map.has_key?(o.source.changes, :is_correct) && o.source.data.is_correct) do %>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke-width="2"
                          stroke="currentColor"
                          class="w-6 h-6"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="m4.5 12.75 6 6 9-13.5"
                          />
                        </svg>
                      <% else %>
                        <svg
                          xmlns="http://www.w3.org/2000/svg"
                          fill="none"
                          viewBox="0 0 24 24"
                          stroke-width="2"
                          stroke="currentColor"
                          class="w-6 h-6"
                        >
                          <path
                            stroke-linecap="round"
                            stroke-linejoin="round"
                            d="M6 18 18 6M6 6l12 12"
                          />
                        </svg>
                      <% end %>
                    <% end %>
                  </div>
                </div>

                <%= if o.index > 1 do %>
                  <label>
                    <div class="cursor-pointer mt-1 text-xs font-semibold text-red-600">
                      <%= gettext("Delete") %>
                    </div>
                    <input
                      type="checkbox"
                      name={
                        "quiz[quiz_questions][#{q.index}][quiz_question_opts_delete][]"
                      }
                      value={o.index}
                      class="hidden"
                    />
                  </label>
                <% end %>
              </div>
            <% end %>
          </div>

          <button
            type="button"
            phx-click="add_quiz_question_opt"
            phx-value-question_index={q.index}
            phx-target={@myself}
            class="mt-5 text-xs text-gray-700"
          >
            + <%= gettext("Add answer") %>
          </button>

          <%= if Ecto.Changeset.get_field(@changeset, :quiz_questions) |> length() > 1 do %>
            <label phx-click="remove_quiz_question" phx-target={@myself}>
              <div class="cursor-pointer mt-4 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">
                <%= gettext("Remove question") %>
              </div>
              <input
                type="checkbox"
                name="quiz[quiz_questions_delete][]"
                value={q.index}
                class="hidden"
              />
            </label>
          <% end %>
        </div>
      <% end %>
    </div>

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

    <div class="flex gap-x-2 mb-5 mt-3">
      <%= checkbox(f, :allow_anonymous, class: "h-4 w-4") %>
      <%= label(
        f,
        :allow_anonymous,
        gettext("Allow anonymous submissions"),
        class: "text-sm font-medium"
      ) %>
    </div>

    <div class="flex justify-between items-center">
      <div class="flex space-x-3">
        <button
          type="submit"
          phx_disable_with="Loading..."
          disabled={!@changeset.valid?}
          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 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          <%= 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: @quiz.id,
            data: [
              confirm:
                gettext(
                  "This will delete all responses associated and the quiz itself, 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>

      <%= if @live_action == :edit do %>
        <%= link to: ~p"/export/quizzes/#{@quiz.id}/qti", class: "text-xs text-primary-500 font-medium flex items-center gap-1", method: :post, target: "_blank" do %>
          <%= gettext("Export to QTI (XML)") %>
        <% end %>
      <% end %>
    </div>
  </.form>
</div>
