{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% block content %}
<div class="content-section col-6">
  <h3>Neuen Bereich anlegen</h3>
  <hr>  
  <form method="POST">
	  	{% csrf_token %}
	  	{{ form|crispy }}	
	  	<div class="form-group mb-2 mb-3">		    
	    <span>Farbe</span><input type="color" id="color-picker" name="areacolor " />
	  </div>  	
	  	<p>Nachdem Erstellen eines Bereichs können Mitarbeiter zugewiesen werden.</p>
	  <hr>	  	
	  	<button type="submit" class="btn btn-success"  href="{% url 'areas-addarea' %} ">Bereich anlegen</button>&nbsp;
	  	<a class="btn" href="{% url 'areas-management' %} ">Abbrechen</a>
  </form>
</div>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/themes/classic.min.css"/> <!-- 'classic' theme -->

<script src="https://cdn.jsdelivr.net/npm/@simonwep/pickr/dist/pickr.es5.min.js"></script>
<script type="text/javascript">

$(document).ready(function(){
	$("#div_id_color").hide();
})

const pickr1 = new Pickr({
  el: '#color-picker',
  default: "#000000",  
  components: {
    preview: false,
    hue: true
  }
});

pickr1.on('changestop', function(){
	var col = pickr1.getColor().toHEXA().toString();
	pickr1.setColor(col);
	$("#id_color").val(col);
});
</script>
{% endblock content %}