{% 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"
>
  Worker: {{viewedworker.name}}
</h1>

<h2
  class="col-md-4 border-bottom border-1 border-primary p-2 m-2 mt-4 shadow rounded text-center"
>
  Skills
</h2>

<div class="m-2">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">Skill</th>
        <th scope="col">Strength</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: {{viewedworker.attributes.experience}}%"
            >
              {{viewedworker.attributes.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: {{viewedworker.attributes.reliability}}%"
            >
              {{viewedworker.attributes.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: {{viewedworker.attributes.python}}%"
            >
              {{viewedworker.attributes.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: {{viewedworker.attributes.javascript}}%"
            >
              {{viewedworker.attributes.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: {{viewedworker.attributes.cpp}}%"
            >
              {{viewedworker.attributes.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: {{viewedworker.attributes.management}}%"
            >
              {{viewedworker.attributes.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">Attribute</th>
        <th scope="col">Value</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">Skilled Model</th>
        <td>{{viewedworker.skilledModels}}</td>
      </tr>
      <tr>
        <th scope="row">Amplifyer</th>
        <td>{{viewedworker.amplifyer}}</td>
      </tr>
      <tr>
        <th scope="row">Salary</th>
        <td>{{viewedworker.salary}}</td>
      </tr>
      <tr>
        <th scope="row">Happyness</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: {{viewedworker.happyness}}%"
            >
              {{viewedworker.happyness}}
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<form
  action="{% url 'companyWorker' gameid=game.id username=user.username workerid=viewedworker.id %}"
  method="post"
>
  <div class="d-grid gap-2">
    {% csrf_token %} {%if viewedworker.status == 0 %}
    <input
      class="btn btn-primary m-2"
      type="submit"
      value="hire"
      id="hire"
      name="action"
    />
    {%elif viewedworker.status == 2 or viewedworker.status == 3 %}
    <input
      class="btn btn-danger m-2"
      type="submit"
      value="fire"
      id="fire"
      name="action"
      disabled="True"
    />
    <input
      class="btn btn-primary m-2 mt-0"
      type="submit"
      value="train"
      id="train"
      name="action"
      disabled="True"
    />
    {%else%}
    <input
      class="btn btn-danger m-2"
      type="submit"
      value="fire"
      id="fire"
      name="action"
    />
    <input
      class="btn btn-primary m-2 mt-0"
      type="submit"
      value="train"
      id="train"
      name="action"
    />
    {%endif%}
  </div>
</form>
{% endblock %}