{% 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"
>
  Training: {{trainworker.name}}
</h1>
<h2
  class="col-md-4 border-bottom border-1 border-primary p-2 m-2 mt-4 shadow rounded text-center"
>
  Description
</h2>
<div class="row g-0 justify-content-center m-2">
  <div class="col-md-12 m-2 p-2 border border-secondary-subtle rounded">
    <p>Choose a skill that you want to train (add 10 points).</p>
    <p class="text-danger">
      The worker will be blocked from working on orders for one round!
    </p>
  </div>
  <form
    action="{% url 'companyTraining' gameid=game.id username=user.username workerid=trainworker.id %}"
    method="post"
  >
    {% csrf_token %}

    <div class="m-2">
      <table class="table">
        <thead>
          <tr>
            <th scope="col">Skill</th>
            <th scope="col">Strength</th>
            <th scope="col">Selection</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">experience</th>
            <td>
              <div
                class="progress align-self-center"
                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: {{trainworker.attributes.experience}}%"
                >
                  {{trainworker.attributes.experience}}
                </div>
              </div>
            </td>
            <td>
              <input
                type="radio"
                class="btn-check"
                name="trainskill"
                id="experienceRadio"
                value="experience"
                autocomplete="off"
              />
              <label class="btn btn-outline-primary" for="experienceRadio"
                >train</label
              >
            </td>
          </tr>
          <tr>
            <th scope="row">reliability</th>
            <td>
              <div
                class="progress align-self-center"
                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: {{trainworker.attributes.reliability}}%"
                >
                  {{trainworker.attributes.reliability}}
                </div>
              </div>
            </td>
            <td>
              <input
                type="radio"
                class="btn-check"
                name="trainskill"
                id="reliabilityRadio"
                value="reliability"
                autocomplete="off"
              />
              <label class="btn btn-outline-primary" for="reliabilityRadio"
                >train</label
              >
            </td>
          </tr>
          <tr>
            <th scope="row">python</th>
            <td>
              <div
                class="progress align-self-center"
                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: {{trainworker.attributes.python}}%"
                >
                  {{trainworker.attributes.python}}
                </div>
              </div>
            </td>
            <td>
              <input
                type="radio"
                class="btn-check"
                name="trainskill"
                id="pythonRadio"
                value="python"
                autocomplete="off"
              />
              <label class="btn btn-outline-primary" for="pythonRadio"
                >train</label
              >
            </td>
          </tr>
          <tr>
            <th scope="row">javascript</th>
            <td>
              <div
                class="progress align-self-center"
                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: {{trainworker.attributes.javascript}}%"
                >
                  {{trainworker.attributes.javascript}}
                </div>
              </div>
            </td>
            <td>
              <input
                type="radio"
                class="btn-check"
                name="trainskill"
                id="javascriptRadio"
                value="javascript"
                autocomplete="off"
              />
              <label class="btn btn-outline-primary" for="javascriptRadio"
                >train</label
              >
            </td>
          </tr>
          <tr>
            <th scope="row">cpp</th>
            <td>
              <div
                class="progress align-self-center"
                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: {{trainworker.attributes.cpp}}%"
                >
                  {{trainworker.attributes.cpp}}
                </div>
              </div>
            </td>
            <td>
              <input
                type="radio"
                class="btn-check"
                name="trainskill"
                id="cppRadio"
                value="cpp"
                autocomplete="off"
              />
              <label class="btn btn-outline-primary" for="cppRadio"
                >train</label
              >
            </td>
          </tr>
          <tr>
            <th scope="row">management</th>
            <td>
              <div
                class="progress align-self-center"
                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: {{trainworker.attributes.management}}%"
                >
                  {{trainworker.attributes.management}}
                </div>
              </div>
            </td>
            <td>
              <input
                type="radio"
                class="btn-check"
                name="trainskill"
                id="managementRadio"
                value="management"
                autocomplete="off"
              />
              <label class="btn btn-outline-primary" for="managementRadio"
                >train</label
              >
            </td>
          </tr>
        </tbody>
      </table>
    </div>

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