<main class="bd-main order-1">

{% extends '_nav.html' %}

{% block content %}
	  <div class="container">
		  	  <div class="row pb-5">

		  		    <div class="col-md-10 col-lg-20 mx-lg-auto mx-md-auto" style="left: -60px;bottom: -65px;">
		<button type="button" class="btn btn-outline-secondary" onclick="history.back()">
			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
			  <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"></path>
			</svg>
		<span class="visually-hidden">Button</span>
		</button>
	</div>
		<div class="shadow col-md-10 col-lg-8 mx-lg-auto mx-md-auto border border-2 bg-light">
			{% include '_nav_top.html' %}
        <ul style="padding-top: 10px;">
			<br>
        </ul>
<!--    	<p class="lead alert alert-warning">Klas informatie voor:-->
<!--			<strong>{{ Class[0].class_name }}</strong></p>-->

		<table class="table">
			<tr>
				<th>Klasnaam</th>
				<th>Docent</th>
				<th>Start Datum</th>
				<th>Eind Datum</th>
			</tr>

			<!-- here is a for-loop to give us all the socks -->
			{% for c in Class %}
			<tr>
				<td>{{ c.class_name }}</td>
				<td><a href="{{ url_for( 'teachers_bp.details_teacher', tid=c.teacher) }}">{{ Teacher[0].firstname }} {{ Teacher[0].lastname }}</a></td>
				<td>{{ c.start_date }}</td>
				<td>{{ c.end_date }}</td>
			</tr>

			{% endfor %}
		</table>
			<span class="border-dark">
				{% if Children|length == 0 %}
				<p class="lead alert alert-warning">Er zitten geen kinderen in deze klas.</p>
				{% else %}
					Er {% if Children|length > 1 %}
														zijn <b>{{Children|length}}</b> kinderen
													{% else %}
														is <b>{{Children|length}}</b> kind
													{%endif%}
					in deze klas.
				{% endif %}
			</span>

			{% if Children %}
				<table class="table">
					<tr>
						<th>Kinderen</th>
						<th>Leeftijd</th>
					</tr>
					{% for c in Children %}
					<tr>
						<td><a href="{{ url_for( 'children_bp.details_child', kid=c.id) }}">{{ c.firstname }} {{ c.lastname }}</a></td>
						<td>{{ c.age }}</td>
					{% endfor %}
				</table>
			{% else %}
				<p>Geen kinderen gekoppeld aan deze klas.</p>
			<a href="{{ url_for('children_bp.add_child') }}">Voeg nu het eerste kind toe</a>
			{% endif %}

		<div class="modal fade" id="exampleModalCenter{{Class[0].id}}">
            <div class="modal-dialog modal-dialog-centered" role="document">
              <div class="modal-content">
                <div class="modal-header">
                  <h5 class="modal-title" id="exampleModalLongTitle{{Class[0].id}}">Klas permanent verwijderen?</h5>
                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                  </button>
                </div>
                <div class="modal-body">
                  <p><b><i>{{ Class[0].class_name }}</i></b> permanent verwijderen?</p>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-dismiss="modal">Annuleren</button>
                  <form action="{{ url_for('classroom_bp.remove_classroom', cid=Class[0].id) }}">
					  <input type="submit" value="Verwijderen" class="btn btn-danger">
                  </form>
                </div>
              </div>
            </div>
			</div>
		</div>
	<script type="module">
		ShowEditOption("Class", "{{ url_for('classroom_bp.edit_classroom', cid=Class[0].id ) }}")
		ShowDeleteOption("Class", "{{ Class[0].id }}")
		Collapse("School")
		Collapse("Classes")
	</script>
	</div>
  </div>
{% endblock %}
</main>
