{% extends "base.html" %}
{% block title %}{{ t('Leave request') }}{% endblock %}
{% block content %}
<div class="page-head"><div><small><a href="{{ url_for('hr.leave') }}">{{ t('Leave') }}</a></small>
  <h1>{{ lv.number or t('New leave request') }}</h1>
  <small>{{ t('Approved annual leave reduces the leave balance; approved unpaid leave is deducted in that month\'s payroll.') }}</small></div></div>
<form method="post" class="card">
  <div class="grid">
    <div class="field"><label>{{ t('Employee') }} *</label>
      <select name="employee_id" required id="emp"><option value=""></option>{% for e in employees %}<option value="{{ e.id }}" data-bal="{{ '%.1f'|format(balances[e.id]) }}" {{ 'selected' if lv.employee_id|string == e.id|string }}>{{ e.code }} {{ nm(e) }}</option>{% endfor %}</select>
      <div class="help" id="bal"></div></div>
    <div class="field"><label>{{ t('Type') }}</label>
      <select name="kind">{% for k, v in kinds.items() %}<option value="{{ k }}" {{ 'selected' if lv.kind == k }}>{{ t(v) }}</option>{% endfor %}</select></div>
    <div class="field"><label>{{ t('From') }} *</label><input type="date" name="date_from" value="{{ lv.date_from or '' }}" required></div>
    <div class="field"><label>{{ t('To') }} *</label><input type="date" name="date_to" value="{{ lv.date_to or '' }}" required></div>
    <div class="field"><label>{{ t('Days') }}</label><input name="days" inputmode="decimal" value="{{ lv.days or '' }}" placeholder="{{ t('Calendar days from the dates') }}"></div>
    <div class="field wide"><label>{{ t('Notes') }}</label><input name="notes" value="{{ lv.notes or '' }}"></div>
  </div>
  <div class="form-actions">
    <button class="btn" name="action" value="approve">{{ t('Save & Approve') }}</button>
    <button class="btn ghost" name="action" value="draft">{{ t('Save as Draft') }}</button>
    <a class="btn ghost" href="{{ url_for('hr.leave') }}">{{ t('Cancel') }}</a>
  </div>
</form>
{% endblock %}
{% block scripts %}<script>
(function () {
  var s = document.getElementById('emp'), b = document.getElementById('bal');
  function show() { var o = s.options[s.selectedIndex]; b.textContent = o && o.dataset.bal ? {{ t('Annual leave balance')|tojson }} + ': ' + o.dataset.bal + ' ' + {{ t('days')|tojson }} : ''; }
  s.addEventListener('change', show); show();
})();
</script>{% endblock %}