{% extends "admin/base_site.html" %}
{% load static %}

{% block extrahead %}
  {{ block.super }}
  <script src="{% static 'admin/js/vendor/jquery/jquery.js' %}"></script>
  <script src="{% static 'admin/js/jquery.init.js' %}"></script>
  <style>
    .source-field {
      margin: 1.2em 0;
      display: flex;
      align-items: flex-start;
      gap: 1em;
    }
    .source-field label {
      font-weight: bold;
      min-width: 180px;
    }
    .source-field select {
      width: 320px;
      max-width: 100%;
      box-sizing: border-box;
    }
    #company_filter {
      width: 320px;
      max-width: 100%;
      padding: 5px;
      margin-bottom: 5px;
      display: block;
      box-sizing: border-box;
    }
    .target-list {
      margin: 1em 0;
      padding-left: 1.5em;
    }
    .target-list li { margin-bottom: 4px; }
    .errorlist { color: #ba2121; padding-left: 1em; }
  </style>
{% endblock %}

{% block content %}
  <h1>Assigner une société aux utilisateurs sélectionnés</h1>

  <p><strong>Utilisateurs cibles ({{ queryset.count }}) :</strong></p>
  <ul class="target-list">
    {% for obj in queryset %}
      <li>{{ obj.user.username }}{% if obj.user.get_full_name %} ({{ obj.user.get_full_name }}){% endif %}
        {% if obj.company %} — actuellement : {{ obj.company }}{% endif %}
      </li>
    {% endfor %}
  </ul>

  <form method="post" id="assign-company-form">
    {% csrf_token %}
    {% for obj in queryset %}
      <input type="hidden" name="{{ action_checkbox_name }}" value="{{ obj.pk }}">
    {% endfor %}
    <input type="hidden" name="action" value="assign_company_action">
    <input type="hidden" name="assign_company" value="1">

    <div class="source-field">
      <label for="id_company">{{ form.company.label }} :</label>
      <div>
        <input type="text" id="company_filter" placeholder="Rechercher une société...">
        <select name="company" id="id_company">
          <option value="">— Aucune (retirer la société) —</option>
          {% for company in form.company.field.queryset %}
            <option value="{{ company.pk }}"
              {% if form.company.value == company.pk|stringformat:"s" %}selected{% endif %}>
              {{ company.name }}
            </option>
          {% endfor %}
        </select>
        {% if form.company.errors %}
          <ul class="errorlist">{% for e in form.company.errors %}<li>{{ e }}</li>{% endfor %}</ul>
        {% endif %}
        <p class="help">{{ form.company.help_text }}</p>
      </div>
    </div>

    <br>
    <button type="submit" class="button default" style="margin-right: 1em; padding: 4px 10px;">
      <img src="/static/admin/img/icon-yes.svg" alt="" style="vertical-align: middle; margin-right: 4px;">
      Assigner la société
    </button>
    <a href="../" class="button">Annuler</a>
  </form>

  <script>
    django.jQuery(document).ready(function($) {
      var $select = $('#id_company');
      var allOptions = $select.find('option').clone();

      $('#company_filter').on('keyup', function() {
        var searchText = $(this).val().toLowerCase();
        $select.empty();
        allOptions.each(function() {
          if ($(this).val() === '' || $(this).text().toLowerCase().indexOf(searchText) > -1) {
            $select.append($(this).clone());
          }
        });
      });
    });
  </script>
{% endblock %}