{% extends "layout.html" %}
{% block body %}
<h2>Department
  {% if department.alias %}
  <b>{{ department.alias }}</b> ({{ department.name }})
  {% else %}
  <b>{{ department.name }}</b>
  {% endif %}
</h2>
{% if session.admin %}
<form action="{{ url_for('department', department_slug=department.slug) }}" method=post>
  <div class="row g-2">
    <div class="col-md">
      <div class="form-floating">
        <input type="text" class="form-control" name="alias" id="alias" placeholder="~"
          value="{{ department.alias or '' }}">
        <label for="alias">Alias for department</label>
      </div>
    </div>
    <div class="col-md">
      <div class="form-floating mb-2">
        <select class="form-select" name="unit" id="unit" aria-label="Unit">
          <option value="">None</option>
          {% set department_unit_id = department.unit.id %}
          {%- for unit in units %}
          <option value="{{ unit.id }}" {% if department_unit_id == unit.id %}selected="selected" {% endif %}>
            {{- unit.name -}}
          </option>
          {%- endfor %}
        </select>
        <label for="unit">Unit of this department</label>
      </div>
    </div>
    <div class="col-md-2">
      <div class="form-group">
        <input type="submit" value="Update" class="btn btn-lg btn-primary" />
      </div>
    </div>
  </div>
</form>
{% endif %}
<p>
  Chair: {{ department.chair | join(', ', attribute="email") or "None" }}
</p>
<script>
  function toggleParticipation(element) {
    fetch("/participation/" +
        element.dataset.worker + "/" +
        element.dataset.structure_test + "/" +
        (element.checked ? 1 : 0))
      .then(response => console.log(response));
  }
</script>
<h3>Organized Workers in this department ({{ workers_active | length }})</h3>

<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">E-Mail</th>
      <th scope="col">Phone</th>
      {% for structure_test in structure_tests %}
      <th scope="col"><abbr title="{{ structure_test.description }}">{{ structure_test.name }}</abbr></th>
      {% endfor %}
    </tr>
  </thead>
  <tbody>
    {% for worker in workers_active %}
    <tr>
      <td scope="row">
        <a href="{{ url_for('worker', worker_id=worker.id) }}">
          {% if worker.preferred_name%}
          <b>{{ worker.preferred_name }}</b> ({{ worker.name }})
          {% else %}
          <b>{{ worker.name }}</b>
          {% endif %}
	  {% if worker.added == last_updated %}
		 <span class="badge bg-info">New Worker</span>
	  {% endif %}
	  {% if worker.password != None %}
		 <span class="badge bg-success">Alakaʻi</span>
	  {% endif %}
        </a>
      </td>
      <td>{% if worker.email %}<a
          href="mailto:{{ worker.email }}">{{ worker.email }}</a>{% else %}Unknown{% endif %}</td>
      <td>{% if worker.phone %}<a href="sms:{{ worker.phone }}">{{ worker.phone }}</a>{% else %}Unknown{% endif %}
      </td>
      {% for structure_test in structure_tests %}
      <th>
        <input type="checkbox" data-worker="{{ worker.id }}" data-structure_test="{{ structure_test.id }}"
          name="{{ structure_test.name }}" onchange="toggleParticipation(this);"
          {{ "checked" if structure_test.id in worker.participated }}
          {{ "disabled" if (session.department_id != department.id) and not session.admin }}>
      </th>
      {% endfor %}
    </tr>
    {% endfor %}
  </tbody>
</table>

{% if workers_inactive %}
<h3>No longer employed worker ({{ workers_inactive | length }})</h3>
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">E-Mail</th>
      <th scope="col">Phone</th>
    </tr>
  </thead>
  <tbody>
    {% for worker in workers_inactive %}
    <tr {% if worker.active != True %}class="table-danger" {% endif %}>
      <td scope="row">
        <a href="{{ url_for('worker', worker_id=worker.id) }}">
          {{ worker.name }}
        </a>
      </td>
      <td>{% if worker.email %}<a href="mailto:{{ worker.email }}">{{ worker.email }}</a>{% else %}Unknown{% endif
				%}</td>
      <td>{{ worker.phone or "Unknown" }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}

{% if workers_external %}
<h3>Externally organized workers ({{ workers_external | length }})</h3>
<table class="table table-striped table-hover">
  <thead>
    <tr>
      <th scope="col">Name</th>
      <th scope="col">E-Mail</th>
      <th scope="col">Phone</th>
    </tr>
  </thead>
  <tbody>
    {% for worker in workers_external %}
    <tr {% if worker.active != True %}class="table-danger" {% endif %}>
      <td scope="row">
        <a href="{{ url_for('worker', worker_id=worker.id) }}">
          {{ worker.name }}
        </a>
      </td>
      <td>{% if worker.email %}<a href="mailto:{{ worker.email }}">{{ worker.email }}</a>{% else %}Unknown{% endif
				%}</td>
      <td>{{ worker.phone or "Unknown" }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>
{% endif %}
{% endblock %}
