
<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' %}
		<br/>	
	<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="{{ url_for('add_bloc', page=page) }}" id="addBloc" method="POST" class="" >
    <input id="csrf_token" name="csrf_token" type="hidden" value="{{ csrf_token() }}">  
    <h3>Créer 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>
	{% for bloc_type in type_blocs %}
	<option value="{{bloc_type}}"> {{ bloc_type }} </option>
      {% endfor %}
    </select>
    <br/>
    <button type="submit" class="btn btn-success"
			  onclick="valid_nameBloc()"
	    		> 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>




