{% 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>
    .target-list {
      margin: 1em 0;
      padding-left: 1.5em;
    }
    .target-list li {
      margin-bottom: 4px;
    }
    .source-field {
      margin: 1.2em 0;
      display: flex;
      align-items: flex-start;
      gap: 1em;
    }
    .source-field label {
      font-weight: bold;
      min-width: 220px;
    }
    .source-field select {
      width: 320px;
      max-width: 100%;
      box-sizing: border-box;
    }
    #source_filter {
      width: 320px;
      max-width: 100%;
      padding: 5px;
      margin-bottom: 5px;
      display: block;
      box-sizing: border-box;
    }
    .warning-box {
      background: #fff3cd;
      border: 1px solid #ffc107;
      border-radius: 4px;
      padding: 10px 14px;
      margin-bottom: 1em;
    }
    .errorlist {
      color: #ba2121;
      padding-left: 1em;
    }
  </style>
{% endblock %}

{% block content %}
  <h1>Appliquer la configuration d'un utilisateur sur les sélectionnés</h1>

  <div class="warning-box">
    <strong>Attention :</strong> Cette action va <em>écraser</em> la configuration existante
    (rôles, vues, thématiques, contrats, équipes) des utilisateurs ci-dessous avec celle de
    l'utilisateur source choisi. L'utilisateur lui-même ne changera pas.
  </div>

  <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 %}</li>
    {% endfor %}
  </ul>

  <form method="post" id="apply-config-form">
    {% csrf_token %}
    {# Re-post the selected IDs so the queryset is reconstructed on submit #}
    {% for obj in queryset %}
      <input type="hidden" name="{{ action_checkbox_name }}" value="{{ obj.pk }}">
    {% endfor %}
    <input type="hidden" name="action" value="apply_config_from_action">
    <input type="hidden" name="apply_source" value="1">

    <div class="source-field">
      <label for="id_source">{{ form.source.label }} :</label>
      <div>
        <input type="text" id="source_filter" placeholder="Rechercher un utilisateur...">
        <select name="source" id="id_source" required>
          <option value="">---------</option>
          {% for config in form.source.field.queryset %}
            <option value="{{ config.pk }}"
              {% if form.source.value == config.pk|stringformat:"s" %}selected{% endif %}>
              {{ config.user.username }}{% if config.user.get_full_name %} — {{ config.user.get_full_name }}{% endif %}
            </option>
          {% endfor %}
        </select>
        {% if form.source.errors %}
          <ul class="errorlist">{% for e in form.source.errors %}<li>{{ e }}</li>{% endfor %}</ul>
        {% endif %}
        <p class="help">{{ form.source.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;">
      Appliquer la configuration
    </button>
    <a href="../" class="button">Annuler</a>
  </form>

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

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