{% 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>
  <script src="{% static 'admin/js/admin/RelatedObjectLookups.js' %}"></script>
  <style>
    #id_user, #user_filter {
      width: 300px;
      max-width: 100%;
      box-sizing: border-box;
    }
    .field-user {
      margin-bottom: 20px;
      display: flex;
      align-items: flex-start;
      gap: 1em;
    }
  </style>
{% endblock %}

{% block content %}
  <h1>Dupliquer la configuration de {{ orig_config.user.username }}</h1>
  <form method="post" id="duplicate-userconfig-form">{% csrf_token %}
    <div class="field-user">
      {{ form.user.label_tag }}
      <div>
        <select name="user" id="id_user" required>
          <option value="">---------</option>
          {% for user in form.user.field.queryset %}
            <option value="{{ user.id }}">{{ user.username }}</option>
          {% endfor %}
        </select>
      </div>
      <a href="/admin/auth/user/add/?_to_field=id&_popup=1" class="add-another" id="add_id_user" title="Ajouter un nouvel utilisateur" onclick="return showAddAnotherPopup(this);">
        <img src="/static/admin/img/icon-addlink.svg" alt="Ajouter" style="vertical-align: middle;"/>
      </a>
    </div>
    <br>
    <button type="submit" class="button" style="margin-right: 1em;padding: 4px 5px;">
      <img src="/static/admin/img/icon-yes.svg" alt="Dupliquer" style="vertical-align: middle; margin-right: 4px;"/>
      Dupliquer
    </button>
    <a href=".." class="button">Annuler</a>
  </form>
  <script>
    django.jQuery(document).ready(function($) {
      // Ajouter un filtre de recherche simple au select
      var $select = $('#id_user');
      var $filter = $('<input type="text" id="user_filter" placeholder="Rechercher un utilisateur..." style="padding: 5px; margin-bottom: 5px; display: block;">');
      
      $select.before($filter);
      
      $filter.on('keyup', function() {
        var searchText = $(this).val().toLowerCase();
        $select.find('option').each(function() {
          var text = $(this).text().toLowerCase();
          if (text.indexOf(searchText) > -1 || $(this).val() === '') {
            $(this).show();
          } else {
            $(this).hide();
          }
        });
      });
    });
  </script>
{% endblock %}