{% extends "adm/adm_base.html" %}
{% block content %}
{% load crispy_forms_tags %}
<div class="content-section col-12">
<h4>Arbeitstag von {{object.user.get_full_name}} am {{object.start|date:"d.m.Y"}} aktualisieren</h4>
<hr>
<form method="POST" enctype="multipart/form-data">
	{% csrf_token %}
	{{form.media}}
	{{form|crispy}}
<hr>
<h5>Pausen</h5>
<a class="btn btn-sm btn-primary" href="{% url 'adm-break-add' object.pk %}">+ Pause</a><br /><br />
{% if object.breaks.all|length > 0 %}
<table class="table table-hover" id="user_breaks" >
  <thead>
  	<tr>
      <th scope="col"></th>
      <th scope="col">Start</th>
      <th scope="col">Ende</th>
      <th scope="col"></th>
	</tr>
</thead>
<tbody >
	{% for break in object.breaks.all %}
	<tr>
		<td>{{forloop.counter}}</td>
		<td>{{break.start|date:"H:i"}}</td>
		<td>{{break.end|date:"H:i"}}</td>
		<td><a class="btn btn-secondary btn-sm " href="{% url 'adm-break-delete' break.pk %}"><i class="fas fa-trash"></i></a></td>
	</tr>
	{% endfor %}
</tbody>
</table>

{% else %}
<p>Arbeitstag hat keine Pausen</p>
{% endif %}


<a class="btn btn-secondary" href="{% url 'adm-user-single' object.user.pk %}" name="action">Abbrechen</a>
<button style="float: right" class="btn btn-primary" type="submit" name="action">Speichern</button>
</form>
<script type="text/javascript">
			$(document).ready(function(){
		       $('#user_breaks').DataTable({
		       	  "language": {
			        "search" : "Suche",
			        "info": "Zeige _START_ bis _END_ von _TOTAL_ Einträgen",
			        "lengthMenu":     "Zeige _MENU_ Einträge",
			        "zeroRecords": "Nichts gefunden",
			        "infoEmpty": "Keine Einträge",
			        "paginate": {
			            "first":      "Erste",
			            "last":       "Letzte",
			            "next":       "Nächste",
			            "previous":   "Zurück"
			        },
			      },
			      "pageLength": 10,
			      "buttons" : {
			        "className" : "btn-danger"
			      }
			    }); 	
			})
		</script>
{% endblock content %}