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

<h1>Employees</h1>
<br>

<!--Add Employee Form-->
<h3>Add Employee</h3>
<form action="{{ url_for('insert_employee') }}" method="post">
  <div class="form-group col-xs-4">
    <label for="first_name">First Name:</label>
    <input type="text" class="form-control" id="first_name" name="first_name" placeholder="First Name">
  </div>
  <div class="form-group col-xs-4">
    <label for="last_name">Last Name:</label>
    <input type="text" class="form-control" id="last_name" name="last_name" placeholder="Last Name">
  </div>
  <div class="form-group col-xs-4">
    <label for="department">Department:</label>
    <select title="department" name="department" class="form-control">
      {% for department in departments %}
        <option>{{ department.name }}</option>
      {% endfor %}
        <option disabled="true">------------------</option>
        <option><a href="{{ url_for('add_department') }}">Create Department</a></option>
    </select>
  </div>
  <button type="submit" class="btn btn-default">Create</button>
</form>
<!--End of Add Employee Form-->

<br>
{% if employees %}
  <table class="table table-bordered table-striped">
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Department</th>
      <th>Project(s)</th>
      <th>Time Logged</th>
    </tr>
  {%for employee in employees %}
      <tr>
        <td>{{employee.first_name}}</td>
        <td>{{employee.last_name}}</td>
        <td>{{employee.department}}</td>
        <td>{{employee.projects}}</td>
        <td></td>
        <td><a href="{{ url_for('employee_edit', id=employee.id) }}">Edit</a> / <a href="{{ url_for('employee_delete', id=employee.id) }}">Delete</a></td>
      </tr>
    <ul>
      {% if employee.description %}
        <li>{{ employee.user_group }}</li>
        <li>{{ employee.description }}</li>
      {% endif %}
    </ul>
  {% endfor %}
  </table>
{% endif %}

{% endblock %}