{% extends "layout.html" %}
{% block body %}

<h1>Department(s)</h1>
{% with messages = get_flashed_messages(with_categories=true) %}
  {% if messages %}
    <ul class=flashes>
    {% for category, message in messages %}
      <li class="{{ category }}">{{ message }}</li>
    {% endfor %}
    </ul>
  {% endif %}
{% endwith %}
{% if departments %}
<h2>Add</h2>
<form action="{{ url_for('insert_department') }}" method="post">
  <div class="form-group col-xs-8">
    <label for="first_name">Name:</label>
    <input type="text" class="form-control" id="department_name" name="department_name" placeholder="Department Name">
  </div>
  <div class="form-group col-xs-4">
    <label for="last_name">Custom ID:</label>
    <input type="text" class="form-control" id="department_id" name="department_id" placeholder="Department ID">
  </div>
  <button type="submit" class="btn btn-default">Create</button>
</form>

<h2>View</h2>
<table class="table table-condensed table-bordered table-striped">
  <tr>
    <th>Department Name</th>
    <th>Department Code</th>
    <th>Number of Employees</th>
  </tr>
  {% for department in departments %}
  <tr>
    <td>{{ department.name }}</td>
    <td>{{ department.code }}</td>
    <td></td>
    <td><a href="{{ url_for('delete_department', id=department.id) }}">Delete</a></td>
  </tr>
  {% endfor %}
</table>
{% else %}
<b>There is no data in department land!</b>
{% endif %}

{% endblock %}