{% extends "layout.html" %}
{% block body %}
<script>
function toggle_departments(unit) {
	var departments = document.getElementsByClassName(unit);
	for (const department of departments) {
		department.classList.toggle("d-none");
	}
}
</script>
<h2 class="p-2 text-left display-5">Units ({{ units | length }})</h2>
<table class="table table-hover">
    <tr>
        <th scope="col" class="col-5">Name</th>
        <th scope="col" class="col-1">Members</th>
		<th scope="col" class="col-1">{{ latest_test_name }}</th>
        <th scope="col" class="col-5">Organizer</th>
    </tr>
    {% for unit in units %}
    <tr>
        <td>
		<a href="#" onclick="toggle_departments('unit-{{ unit.id }}');">
                <b>{{ unit.name }}</b> ({{ unit.worker_count }})
            </a>
        </td>
        <td>
            {% if unit.worker_count > 0 %}
            {% set percentage = (unit.members / unit.worker_count * 100) | round(2) %}
            {% endif %}
            <meter style="height: 25px;" low="50" high="80" max="100" optimum="100" value="{{ percentage }}" title="{{ unit.members }}&#x2F;{{ unit.worker_count }} completed"></meter>
        </td>
        <td>
            {% if unit.worker_count > 0 %}
            {% set percentage = ( unit.latest / unit.worker_count * 100) | round(2) %}
            {% endif %}
            <meter style="height: 25px;" low="50" high="80" max="100" optimum="100" value="{{ percentage }}" title="{{ unit.latest }}&#x2F;{{ unit.worker_count }}"></meter>
        </td>
        <td>
		<ul>
		{% for chair in unit.chairs %}
		<li>
		<a href="{{ url_for("worker", worker_id=chair.id) }}">
		    {%- if chair.preferred_name %}
		    {{ chair.preferred_name }} ({{ chair.name }})
		    {% else %}
		    {{ chair.name }}
		    {% endif %}
		</a>
		</li>
		{% endfor %}
		<ul>
	</td>
      </tr>
      {% for department in unit.departments %}
      <tr class="d-none unit-{{ unit.id }}">
	<td>
                {% if department.alias %}
                <b>{{ department.alias }}</b> <small class="text-muted">{{ department.name }}</small>
                {% else %}
                <b>{{ department.name }}</b>
                {% endif %}
	</td>
	<td></td>
	<td></td>
	<td>
		<ul><ul>
		{% for chair in department.chairs %}
		<li>
		<a href="{{ url_for("worker", worker_id=chair.id) }}">
		    {%- if chair.preferred_name %}
		    {{ chair.preferred_name }} ({{ chair.name }})
		    {% else %}
		    {{ chair.name }}
		    {% endif %}
		</a>
		</li>
		{% endfor %}
		</ul></ul>
	</td>
    </tr>
    {% endfor %}
    {% endfor %}
</table>
{% endblock %}
