{% extends "mygame/company.html" %} {% block content %}
<h1
  class="text-center font-weight-bold border-bottom border-2 border-primary p-3 m-3 shadow rounded"
>
  Assign Workers: {{assignorder.name}}
</h1>
<h2
  class="col-md-4 border-bottom border-1 border-primary p-2 m-2 mt-4 shadow rounded text-center"
>
  Workload
</h2>

<div class="m-2">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Required Skill</th>
        <th scope="col">Workload</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">experience</th>
        <td>
          <div
            class="progress"
            role="progressbar"
            aria-label="worker-experience"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            <div
              class="progress-bar overflow-visible text-dark"
              style="width: {{assignorder.requiredWorkload.experience}}%"
            >
              {{assignorder.requiredWorkload.experience}}
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">reliability</th>
        <td>
          <div
            class="progress"
            role="progressbar"
            aria-label="worker-reliability"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            <div
              class="progress-bar overflow-visible text-dark"
              style="width: {{assignorder.requiredWorkload.reliability}}%"
            >
              {{assignorder.requiredWorkload.reliability}}
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">python</th>
        <td>
          <div
            class="progress"
            role="progressbar"
            aria-label="worker-python"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            <div
              class="progress-bar overflow-visible text-dark"
              style="width: {{assignorder.requiredWorkload.python}}%"
            >
              {{assignorder.requiredWorkload.python}}
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">javascript</th>
        <td>
          <div
            class="progress"
            role="progressbar"
            aria-label="worker-javascript"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            <div
              class="progress-bar overflow-visible text-dark"
              style="width: {{assignorder.requiredWorkload.javascript}}%"
            >
              {{assignorder.requiredWorkload.javascript}}
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">cpp</th>
        <td>
          <div
            class="progress"
            role="progressbar"
            aria-label="worker-cpp"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            <div
              class="progress-bar overflow-visible text-dark"
              style="width: {{assignorder.requiredWorkload.cpp}}%"
            >
              {{assignorder.requiredWorkload.cpp}}
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <th scope="row">management</th>
        <td>
          <div
            class="progress"
            role="progressbar"
            aria-label="worker-management"
            aria-valuenow="0"
            aria-valuemin="0"
            aria-valuemax="100"
          >
            <div
              class="progress-bar overflow-visible text-dark"
              style="width: {{assignorder.requiredWorkload.management}}%"
            >
              {{assignorder.requiredWorkload.management}}
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<h2
  class="col-md-4 border-bottom border-1 border-primary p-2 m-2 mt-4 shadow rounded text-center"
>
  Attributes
</h2>

<div class="m-2">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Relevant Attribute</th>
        <th scope="col">Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Remaining Rounds</th>
        <td>{{assignorder.maxRounds}}</td>
      </tr>
      <tr>
        <th scope="row">Model</th>
        <td>{{assignorder.engineeringModel}}</td>
      </tr>
    </tbody>
  </table>
</div>

<h2
  class="col-md-4 border-bottom border-1 border-primary p-2 m-2 mt-4 shadow rounded text-center"
>
  Assign
</h2>
<form
  class="m-2"
  action="{% url 'companyOrder' gameid=game.id username=user.username orderid=assignorder.id %}"
  method="post"
>
  {% csrf_token %}
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Unassigned Workers</th>
        <th scope="col">Assigned Workers</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          {% for worker in company.workers.all %} {%if worker.sick == True%}
          <div class="m-2">
            <label for="assign {{worker.id}}">
              {{worker.name}}({{worker.skilledModels}})</label
            >
            <input
              type="checkbox"
              id="assign {{worker.id}}"
              name="assign {{worker.id}}"
              value="{{worker.id}}"
              disabled
            />
          </div>
          {% elif worker.status == 1 %}
          <div class="m-2">
            <label for="assign {{worker.id}}">
              {{worker.name}} ({{worker.skilledModels}})</label
            >
            <input
              type="checkbox"
              id="assign {{worker.id}}"
              name="assign {{worker.id}}"
              value="{{worker.id}}"
            />
          </div>
          {% endif %} {% endfor %}
        </td>
        <td>
          {% for worker in assignorder.assignedWorkers.all %}
          <div class="m-2">
            <label for="{{worker.id}}">
              {{worker.name}} ({{worker.skilledModels}})</label
            >
            <input
              type="checkbox"
              id="unassign {{worker.id}}"
              name="unassign {{worker.id}}"
              value="{{worker.id}}"
            />
          </div>
          {% endfor %}
        </td>
      </tr>
    </tbody>
  </table>

  <div class="d-grid gap-2">
    <input
      class="btn btn-success m-2"
      type="submit"
      name="action"
      id="save assignment"
      value="save assignment"
    />
  </div>
</form>
{% endblock %}