{% extends "django_admin_action_forms/action_form.html" %}
{% load i18n %}

{% block extrahead %}
  {{ block.super }}
  <style>
    input[type="radio"][name="work_selection"] { margin-right: 0.4em; }
    .group-nominations-list { list-style-type: none; padding-left: 0; }
    .group-nominations-list li { list-style-type: none; margin-bottom: 0.3em; }
    .section-divider { color: #999; margin: 1em 0 0.5em; }
    .autocomplete-row { display: flex; align-items: center; gap: 0.4em; margin-bottom: 0.3em; }
  </style>
{% endblock %}

{% block action_form %}
  <form method="post">
    <h2>{% translate "Create from a Raw Nomination" %}</h2>
    <ul class="group-nominations-list">
      {% for object in queryset %}
        <li>
          <label>
            <input type="radio" name="work_selection" value="nomination:{{ object.pk }}">
            {{ object }}
          </label>
        </li>
      {% endfor %}
    </ul>

    <p class="section-divider">&mdash; or &mdash;</p>

    <h2>{% translate "Suggested Canonical Works" %}</h2>
    {% if matching_works %}
      <ul class="group-nominations-list">
        {% for work in matching_works %}
          <li>
            <label>
              <input type="radio" name="work_selection" value="work:{{ work.pk }}">
              {{ work }} ({{ work.category }})
            </label>
          </li>
        {% endfor %}
      </ul>
    {% else %}
      <p>{% translate "No matching canonicalized works found." %}</p>
    {% endif %}

    <p class="section-divider">&mdash; or &mdash;</p>

    <h2>{% translate "Search Canonical Works" %}</h2>
    <div class="autocomplete-row">
      <input type="radio" name="work_selection" id="autocomplete-radio"
        value="search">
      {{ form.work_search }}
    </div>

    {% csrf_token %}
    {{ form.work_selection.errors }}
    <input type="hidden" name="action" value="{{ action }}" />
    <input type="hidden" name="select_across" value="{{ select_across }}" />
    {% for item in selected_action %}
      <input type="hidden" name="_selected_action" value="{{ item }}" />
    {% endfor %}
    <input type="submit" value="{{ confirm_button_text }}">
    <a href="#" class="button cancel-link">{{ cancel_button_text }}</a>
  </form>

  <script>
    (function ($) {
      const radio = $('#autocomplete-radio');
      const $select = $('#id_work_search');

      // Check the radio when an option is selected
      $select.on('select2:select', function () {
        radio.prop('checked', true);
      });

      // Uncheck the radio when the selection is cleared
      $select.on('select2:clear select2:unselect', function () {
        radio.prop('checked', false);
      });

      // Clear autocomplete when another radio is chosen
      $('input[name="work_selection"]:not(#autocomplete-radio)').on('change', function () {
        $select.val(null).trigger('change');
      });
    }(django.jQuery));
  </script>
{% endblock %}