{% extends "users/base.html" %}
{% load crispy_forms_tags %}
{% load static %}
{% block content %}
{% if request.user.profile.agency.module_timemanagement %}
<script src="{% static 'users/js/colorPick.min.js' %}"></script>
<link rel="stylesheet" href="{% static 'users/css/colorPick.min.css' %}">
<style>
	.colorPickSelector {
  border-radius: 5px;
  width: 36px;
  height: 36px;
  cursor: pointer;
  -webkit-transition: all linear .2s;
  -moz-transition: all linear .2s;
  -ms-transition: all linear .2s;
  -o-transition: all linear .2s;
  transition: all linear .2s;
}
noclickeffect:active { border-style: outset !important;}

.colorPickSelector:hover { transform: scale(1.1); }
</style>
<div class="content-section col-6">
  <h3>Abwesenheitskategorie aktualisieren</h3>
  <hr>  
  <form method="POST" enctype="multipart/form-data">
  	{% csrf_token %}	  	
    {{form|crispy}}
  	  <div class="form-group">
	    <label for="abcolor_cal">Farbe im Teamkalender:</label>
	    <div id="abcolor_cal" class="colorPickSelector"></div>
	  </div>	  
	<hr>	
  	<button type="submit" class="btn btn-primary">Abwesenheitskategorie aktualisieren</button>&nbsp;
  	<a class="btn" href="{% url 'dasettings' %} ">Abbrechen</a>
  </form>
</div>
<script type="text/javascript">
  //Prevent is_time AND is_holiday
  $(document).click(function(event) {
    if($(event.target)[0]['id'] == "id_is_time"){
      if($("#id_is_time").prop("checked")){
        $("#id_is_holiday").prop("checked", false)  
      }
    }

    if($(event.target)[0]['id'] == "id_is_holiday"){
      if($("#id_is_holiday").prop("checked")){
        $("#id_is_time").prop("checked", false)  
      }
    }
    
  });


	default_colorpickerinit = "{{object.color}}";
	abcolor_final= "#3498db";
	 $(".colorPickSelector").colorPick(
  {
	  'initialColor': default_colorpickerinit,
	  'allowRecent': true,
	  'recentMax': 5,
	  'allowCustomColor': false,
	  'palette': ["#1abc9c", "#16a085", "#2ecc71", "#27ae60", "#3498db", "#2980b9", "#9b59b6", "#8e44ad", "#34495e", "#2c3e50", "#f1c40f", "#f39c12", "#e67e22", "#d35400", "#e74c3c", "#c0392b", "#ecf0f1", "#bdc3c7", "#95a5a6", "#7f8c8d"],
	  'onColorSelected': function() {
	    this.element.css({'backgroundColor': this.color, 'color': this.color});
	    abcolor_final = this.color;
	    $("#id_rgb_color").val(abcolor_final);
  }
});
</script>
{% else %}
<h3>Das Modul Abwesenheitsplanung wurden in ihrer Agentur deaktiviert.</h3>  
{% endif %}


{% endblock content %}