
<div>
	<form  action="{{ url_for('sortblocs', page=page) }}" method="POST" id="myblocs">  
   		<input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}">
  		{% include 'admin/_blocs-list.html' %}
	
	<button class="btn btn-success" type="submit" form="myblocs"> Enregister </button>


	</form>

	<hr/>

<button class="btn btn-outline-success" onclick="printForm()">+</button>

<div class="formAddBloc" id="addBloc">
	<form action="/{{page}}/addBloc" id="addBloc" method="POST" class="" >
    <input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}">  
    <h3>Créé un nouveau bloc</H3>
    <br>
   <label for="blocName">Nom du bloc (caractères sans accents uniquement) </label>
      <div class="input-group">
	      <input type="text"
	      name="blocName" 
	      class="form-control" 
	      id="blocName" 
	      placeholder="Bloc1" 
	      required>
       <div class="invalid-feedback">
         Entrez le nom du bloc sans espaces ni caractères spéciaux  
        </div>
      </div> 
    <br>
    <label for="link"><b>Type de bloc</b></label>
    <br/>
   <select id="blocType" name="blocType" size="8" required>
      <option value="presentation"> Ecran d'Accueil </option>
      <option value="presentation"> Image En-tête d'article </option>
      <option value="text">Texte libre</option>
      <option value="simple_article">Article Simple</option>
      <option value="gallery">Galerie</option>
      <option value="external_link">Lien externe</option>
      <option value="contact">Contact</option>
    </select>
    <br/>
    <button type="submit" class="btn btn-success"
			  onclick="valid_nameBloc()"
			  hx-post="{{ url_for('add_bloc', page=page) }}"
	    		hx-swap="outerHTML"
	    		hx-target="#myblocs"> Créer le bloc </button>
  </form>
</div>
<hr/>

   
</div>

<script>

function valid_nameBloc()
  {
	var blocName = document.getElementById("blocName"); 
    	let name_field = blocName.value.trim();
	let Valid = /^[a-z0-9]+$/i.test(name_field);
	  console.log(Valid);
        if (!Valid)  {
		  document.getElementById("blocName").setAttribute("class", "form-control is-invalid");
    	} 
  }

</script>




