{% extends "layout.html" %}
{% block body %}
<script>
    function toggleParticipation(element) {
        fetch(`/participation/${element.dataset.worker}/${element.dataset.structure_test}/` + (
                element.checked ? 1 : 0))
            .then(response => console.log(response));
    }
</script>
<h2>
    {%- if worker.preferred_name %}
    {{ worker.preferred_name }} ({{ worker.name }})
    {% else %}
    {{ worker.name }}
    {% endif %}
    {%- if worker.id %}
    <a href="{{ url_for('worker_delete', worker_id=worker.id) }}">
            <button type="submit" class="btn btn-sm" onclick="return confirm('Do you really want to delete {{ worker.name }}');">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
                    <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5zm3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0V6z"></path>
                    <path fill-rule="evenodd" d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1v1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4H4.118zM2.5 3V2h11v1h-11z"></path>
                </svg>
            </button>
    </a>
    {% endif %}
</h2>
<p>
    {% if worker.password %}
    <span class="badge bg-primary">Can Login</span>
    {% endif %}
    {% if worker.updated != last_updated %}
    <span class="badge bg-danger">Not updated in last record</span>
    {% else %}
    <span class="badge bg-success">Updated in last record</span>
    {% endif %}
    {% if worker.contract == "manual" %}
    <span class="badge bg-info">Manually added</span>
    {% endif %}
    Added {{ worker.added }}, last contract {{ worker.updated }}
</p>
<form action="{{ url_for('worker', worker_id=worker.id) if worker else url_for("worker") }}"
    method=post autocomplete="new-password">
    <fieldset
        {{ "disabled" if (session.department_id != worker.organizing_dept_id) and not session.admin }}>
        {% if not worker %}
        <div class="row mb-3">
            <label for="name" class="col-md-2 col-form-label">Real Name</label>
            <div class="col-md-10">
                <input name="name" class="form-control" type="text" value=""
                    placeholder="Surname,Name" required />
            </div>
        </div>
        {% endif %}

        <div class="row mb-3">
            <label for="preferred_name" class="col-md-2 col-form-label">Preferred Name</label>
            <div class="col-md-10">
                <input name="preferred_name" class="form-control" type="text"
                    value="{{ worker.preferred_name or "" }}" placeholder="{{ worker.name }}" />
            </div>
        </div>

        <div class="row mb-3">
            <label for="pronouns" class="col-md-2 col-form-label">Pronouns</label>
            <div class="col-md-10">
                <input name="pronouns" class="form-control" type="text"
                    value="{{ worker.pronouns or "" }}" placeholder="gender is a spectrum" />
            </div>
        </div>

        <div class="row mb-3">
            <label for="email" class="col-md-2 col-form-label">E-Mail</label>
            <div class="col-md-10">
                <input name="email" class="form-control" type="text"
                    value="{{ worker.email or "" }}" placeholder="worker@private.email" />
            </div>
        </div>

        <div class="row mb-3">
            <label for="phone" class="col-md-2 col-form-label">Phone</label>
            <div class="col-md-10">
                <input name="phone" class="form-control" type="tel" value="{{ worker.phone or ""}}"
                    placeholder="(808) 123-4567" />
            </div>
        </div>

        <div class="row mb-3">
            <label for="dept" class="col-md-2 col-form-label">Department</label>
            <div class="col-9">
                <input name="dept" type="text" class="form-control"
                    value="{{ Department.get_by_id(worker.department_id or 0).name }}" disabled />
            </div>
            <div class="col-1">
                <a href="/department/{{ Department.get_by_id(worker.department_id or 0).slug }}">
                    <button type="button" class="btn btn-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
                        </svg>
                    </button>
                </a>
            </div>
        </div>
        {% if session.admin %}
        <div class="row mb-3">
            <label for="organizing_dept" class="col-md-2 col-form-label">Organizing
                department</label>
            <div class="col-9">
                <select name="organizing_dept" class="form-select">
                    {% for department in Department.select().order_by(Department.name) %}
                    <option value="{{ department.id }}"
                        {%- if worker.organizing_dept_id == department.id %} selected="selected"
                        {% endif %}>
                        {% if department.alias %}
                        {{ department.alias }} ({{ department.name }})
                        {% else %}
                        {{ department.name }}
                        {% endif %}
                    </option>
                    {% endfor %}
                </select>
            </div>
            <div class="col-1">
                <a
                    href="/department/{{ Department.get_by_id(worker.organizing_dept_id or 0).slug }}">
                    <button type="button" class="btn btn-sm">
                        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"
                            fill="currentColor" class="bi bi-arrow-right" viewBox="0 0 16 16">
                            <path fill-rule="evenodd"
                                d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8z" />
                        </svg>
                    </button>
                </a>
            </div>
        </div>

        <div class="row mb-3">
            <label for="password" class="col-md-2 col-form-label">Password</label>
            <div class="col-md-10">
                <input type="password" class="form-control" id="password" name="password" 
			  {% if worker.password %}placeholder="Password already set"{% endif %}>
                <div id="passwordHelp" class="form-text">If a password is added the worker can
                    login.</div>
            </div>
        </div>
        {% endif %}

        {% if (session.department_id == worker.organizing_dept_id) or session.admin %}
        <div class="row mb-3">
            <div class="col-md-12">
                <div class="form-floating">
                    <textarea name="notes" style="height: 100px" class="form-control"
                        placeholder="e.g. last contact"
                        id="notes">{{ worker.notes or "" }}</textarea>
                    <label for="notes">Notes</label>
                </div>
            </div>
        </div>
        {% endif %}

        <div class="row mb-3">
            <div class="col-md-12">
                <div class="form-check">
                    <input class="form-check-input" type="checkbox" value="True" name="active"
                        id="active" {{ "checked" if (worker.active or not worker.id) }}>
                    <label class="form-check-label" for="active">Active</label>
                    <div id="passwordHelp" class="form-text">
                        uncheck if worker graduated or is otherwise not
                        currently associated with the university
                    </div>
                </div>
            </div>
        </div>
        <div class="row mb-3">
            <div class="col">
                <input type="submit" class="btn btn-primary"
                    value="{{ "Update" if worker else "Add" }} Worker" />
            </div>
        </div>
    </fieldset>
</form>

{% if worker %}
<h2>Structure Tests</h2>
<table class="table table-striped table-hover">
    <form>
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col">Description</th>
                <th scope="col">Participation</th>
            </tr>
        </thead>
        <tbody>
            {% for structure_test in structure_tests %}
            <tr>
                <td scope="row">{{ structure_test.name }}</td>
                <td scope="row">{{ structure_test.description }}</td>
                <td>
                    <input type="checkbox" data-worker="{{ worker.id }}"
                        data-structure_test="{{ structure_test.id }}"
                        name="{{ structure_test.name }}" onchange="toggleParticipation(this);"
                        {{ "checked" if structure_test.added }}
                        {{ "disabled" if (session.department_id != worker.organizing_dept_id) and not session.admin }}>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </form>
</table>
{% endif %}
{% endblock %}
