{% extends 'base.html' %}
{% load custom_tags_and_filters %}
{% block title %}Staff charges{% endblock %}
{% block content %}
	<h1>Staff charges</h1>
	{% if staff_charge %}
		<p>You are charging staff time to {{ staff_charge.customer }} for the project named {{ staff_charge.project }} since {{ staff_charge.start }}.</p>
        <div style="display: table-row">
            <label for="staff_charge_note" style="vertical-align: top;display: table-cell">Charge note: </label>
            <div style="display: table-cell; padding: 0 10px; width: 75%">
                <textarea oninput="auto_size_textarea(this)" class="form-control" id="staff_charge_note">{{ staff_charge.note|default_if_none:"" }}</textarea>
            </div>
            <div style="display: table-cell; vertical-align: bottom;">
                {% url "edit_staff_charge_note" as edit_staff_charge_note_url %}
                {% button type="save" size="small" submit=False value=staff_charge.note|yesno:"Update,Save" onclick="ajax_post('"|concat:edit_staff_charge_note_url|concat:"', {'staff_charge_note': $('#staff_charge_note').val()}, undefined, undefined, function(){location.reload()})" %}
            </div>
        </div>
		<p><br>Here is a summary of the current charges:</p>

		<table class="table">
			<thead>
			<tr>
				<th>Type</th>
				<th>Start</th>
				<th>End</th>
			</tr>
			</thead>
			<tbody>
			{% for charge in charges %}
					<tr class="{{ charge.class }}">
						<td>{{ charge.type }}</td>
						<td>{{ charge.start }}</td>
						<td>{{ charge.end|default:'' }}</td>
					</tr>
			{% endfor %}
			</tbody>
		</table>
	{% endif %}

	{% block staff_charges_content %}
	{% endblock %}

    <script>
        auto_size_textarea(document.getElementById('staff_charge_note'));
    </script>
{% endblock %}