{{ form_start(form, {
  'action': path('add_user'),
  'method': 'POST',
  'attr' : {
    'class': 'm-form m-form--fit m-form--label-top crm-user-modal',
    'id': 'user_add'
  }
}) }}

<style>
  /* === Aligné au style crm-product-modal (compact + simple) === */
  .crm-user-modal .modal-dialog { max-width: 1100px; }
  .crm-user-modal .modal-body {
    max-height: calc(100vh - 180px);
    overflow-y: auto;
    padding: .85rem;
    background: #f8fafc;
  }

  /* Labels: au-dessus + pas gras */
  .crm-user-modal .form-label{
    display:block;
    margin-bottom: .2rem;
    font-size: .83rem;
    font-weight: 400; /* pas gras */
    color: #495057;
  }

  /* Champs: taille confortable */
  .crm-user-modal .form-control,
  .crm-user-modal .form-select{
    min-height: 40px;
    font-size: .92rem;
  }

  /* Rows compact */
  .crm-user-modal .compact-row{
    --bs-gutter-x: .6rem;
    --bs-gutter-y: .45rem; /* moins d'espace vertical */
  }

  /* Sections légères */
  .crm-user-modal .crm-section{
    border: 1px solid #dee2e6;
    background: #fff;
    border-radius: 10px;
    padding: .75rem;
    margin-bottom: .65rem;
  }
  .crm-user-modal .crm-section-title{
    margin: 0 0 .55rem 0;
    font-size: .9rem;
    font-weight: 400; /* pas gras */
    color: #212529;
    display:flex;
    align-items:center;
    gap:.45rem;
  }

  /* Civilité */
  .crm-user-modal .crm-radio-row{
    display:flex;
    flex-wrap:wrap;
    gap: .6rem 1rem;
    padding: .45rem .55rem;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
  }
  .crm-user-modal .mt-radio{ margin:0; }

  /* Footer sticky comme produit */
  .crm-user-modal .modal-footer{
    position: sticky; bottom: 0; z-index: 2;
    background: #fff; border-top: 1px solid #dee2e6;
    padding: .65rem .9rem;
  }

  /* Erreur */
  .crm-user-modal .crm-alert{
    border-radius: 8px;
    padding: .45rem .6rem;
    margin: 0 0 .6rem 0;
  }

  /* Select2 (hauteur/alignement) */
  .crm-user-modal .select2-container{ width:100% !important; }
  .crm-user-modal .select2-container .select2-selection--single{
    min-height: 40px !important;
    border: 1px solid #ced4da !important;
    border-radius: .375rem !important;
    display:flex !important;
    align-items:center !important;
  }
  .crm-user-modal .select2-container .select2-selection__rendered{
    padding-left: .75rem !important;
    line-height: 1.8 !important;
    font-size: .92rem !important;
    color: #212529 !important;
  }
  .crm-user-modal .select2-container .select2-selection__arrow{
    height: 38px !important;
  }

  @media (max-width: 768px) {
    .crm-user-modal .modal-dialog { margin: .35rem; max-width: calc(100% - .7rem); }
    .crm-user-modal .modal-body { max-height: calc(100vh - 140px); padding: .65rem; }
    .crm-user-modal .modal-footer .btn { width: 100%; }
    .crm-user-modal .modal-footer { gap: .45rem; }
  }
</style>

<input type="hidden" name="type" value="{{ type }}">

<div class="modal-header py-2">
  <h5 class="modal-title mb-0 flex-grow-1">Créer un nouveau {{ type }}</h5>
  <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Fermer"></button>
</div>


<div class="modal-body">
  <div id="user-add-error" class="alert alert-danger d-none crm-alert" role="alert">
    <i class="fa fa-exclamation-circle me-1"></i>
    <span id="user-add-error-text"></span>
  </div>

  {# ===== Contact ===== #}
    <fieldset class="crm-section crm-fieldset p-3">
        <legend class="crm-legend">
            <i class="fa fa-user text-primary me-2"></i> Informations du contact
        </legend>

        <div class="row compact-row">
            <div class="col-12">
                <div class="crm-radio-row">
                {% for gend in form.civility %}
                    <label class="mt-radio">
                    {{ form_widget(gend, {'attr': {'class': 'm-radio m-radio--solid'}}) }}
                    {{ form_label(gend) }}
                    <span></span>
                    </label>
                {% endfor %}
                </div>
            </div>

            <div class="col-12 col-md-4">
                <label class="form-label">Référence</label>
                {{ form_widget(form.username, {'attr': {'class': 'form-control m-input','placeholder':'Référence','maxlength':180}}) }}
            </div>

            <div class="col-12 col-md-8">
                <label class="form-label">Nom et prénom</label>
                {{ form_widget(form.firstName, {'attr': {'class': 'form-control m-input','placeholder':'Nom et Prénom','maxlength':255}}) }}
            </div>

            <div class="col-12 col-md-6">
                <label class="form-label">Téléphone 1</label>
                {{ form_widget(form.phone, {'attr': {'class':'form-control m-input','placeholder':'Téléphone 1','required':'required','maxlength':20}}) }}
            </div>

            <div class="col-12 col-md-6">
                <label class="form-label">Téléphone 2</label>
                {{ form_widget(form.second_phone, {'attr': {'class':'form-control m-input','placeholder':'Téléphone 2','maxlength':30}}) }}
            </div>

            <div class="col-12">
                <label class="form-label">Email</label>
                {{ form_widget(form.email, {'attr': {'class':'form-control m-input','placeholder':'Email','type':'email','maxlength':255}}) }}
            </div>

            <div class="col-12">
                <label class="form-label">Note</label>
                {{ form_widget(form.description, {'attr': {'class':'form-control m-input','placeholder':'Note','maxlength':5000}}) }}
            </div>
        </div>
    </fieldset>

  {# ===== Adresse ===== #}
  <fieldset class="crm-fieldset crm-section px-3">
    <legend class="crm-legend ">
        <i class="fa fa-map-marker text-primary me-1"></i> Adresse
    </legend>

    <div class="row compact-row">
      <div class="col-12">
        <label class="form-label">Adresse</label>
        {{ form_widget(form.adress, {'attr': {'class':'form-control m-input','placeholder':'Adresse','maxlength':5000}}) }}
      </div>

      <div class="col-12 col-md-6">
        <label class="form-label">Pays</label>
        {{ form_widget(form.country, {
          attr: {
            'class': 'form-control m-input select2',
            'data-country-select': '1',
            'data-default-country-code': 'TN',
            'data-region-template': path('ajax_regions_by_country', { id: '__COUNTRY_ID__' }),
            'data-current-country-id': '',
            'maxlength': 100
          }
        }) }}
      </div>

      <div class="col-12 col-md-6">
        <label class="form-label">Région</label>
        {{ form_widget(form.region, {
          attr: {
            'class': 'form-control m-input select2',
            'data-region-select': '1',
            'maxlength': 100
          }
        }) }}
      </div>

      <div class="col-12 col-md-6">
        <label class="form-label">Ville</label>
        {{ form_widget(form.city, {'attr': {'class':'form-control m-input','placeholder':'Ville','maxlength':255}}) }}
      </div>

      <div class="col-12 col-md-6">
        <label class="form-label">Code postal</label>
        {{ form_widget(form.zip, {'attr': {'class':'form-control m-input','placeholder':'Code postal','maxlength':255}}) }}
      </div>
    </div>
  </fieldset>

  {# ===== Réseaux sociaux ===== #}
   <fieldset class="crm-fieldset crm-section px-3">
        <legend class="crm-legend ">
            <i class="fa fa-share-alt me-1 text-primary"></i> Lien réseaux sociaux
        </legend>

        <div class="col-12" id="newRow"></div>

        <div class="text-center mt-2">
        <button type="button" class="btn btn-success btn-sm" id="addRowLink">
            <i class="fa fa-plus-circle me-1"></i> Ajouter un lien
        </button>
        </div>
  </fieldset>
</div>

<div class="modal-footer d-flex align-items-center gap-2 flex-nowrap">
  <input type="hidden" name="action" id="user_form_action" value="save">

  <button type="button"
          class="btn btn-secondary"
          data-bs-dismiss="modal">
    Fermer
  </button>

  <div class="ms-auto d-flex align-items-center gap-2 flex-nowrap">
    <button type="button"
            class="btn btn-primary"
            data-action="save_and_doc">
      Enregistrer et créer document
    </button>

    <button type="button"
            class="btn btn-dark"
            data-action="save_user">
      Enregistrer
    </button>
  </div>
</div>


{{ form_errors(form) }}
{{ form_rest(form) }}
{{ form_end(form) }}

<script>
  window.LINK_SOURCES = [
    {% for ls in linkSources %}
      { id: {{ ls.id }}, icon: '{{ ls.icon|e('js') }}', name: '{{ ls.name|e('js') }}' }{{ not loop.last ? ',' : '' }}
    {% endfor %}
  ];


(function () {
  var $scope = $('#user_add, #edit_add').first();
  if (!$scope.length) return;

  if (typeof $ !== 'undefined' && $.fn && $.fn.select2) {
    var $modal = $scope.closest('.modal');
    if (!$modal.length) $modal = $('#m_modal_user, #modalEditUser').first();
    if (!$modal.length) $modal = $(document.body);

    $scope.find('select.select2').each(function () {
      var $el = $(this);
      if ($el.hasClass('select2-hidden-accessible')) {
        $el.select2('destroy');
      }
      $el.select2({
        width: '100%',
        dropdownParent: $modal
      });
    });
  }

  if (typeof initCountryRegionLoader === 'function') {
    initCountryRegionLoader($scope.get(0));
  }

  var $country = $scope.find('[data-country-select]').first();
  if (!$country.length) return;

  var currentId = String($country.data('current-country-id') || '').trim();
  var defaultCode = String($country.data('default-country-code') || 'TN').toUpperCase();

  if (!$country.val() && currentId) {
    $country.val(currentId);
  }

  if (!$country.val()) {
    var $opt = $country.find('option[data-country-code="' + defaultCode + '"]').first();
    if (!$opt.length) {
      $opt = $country.find('option').filter(function () {
        var t = ($(this).text() || '').trim().toLowerCase();
        return t === 'tunisie' || t === 'tunisia';
      }).first();
    }
    if ($opt.length) $country.val($opt.val());
  }

  $country.trigger('change');
})();
</script>