{% extends "pos/base.html" %}
{% block title %}Void Certificate{% endblock %}
{% block heading %}Void Certificate{% endblock %}

{% block content %}
<div class="card" style="max-width: 560px;">
  <div class="card-body">
    <p>Are you sure you want to void this certificate? It stays on record but is
       marked void and can no longer be treated as a valid certificate.</p>
    <table class="table table-sm table-borderless mb-3">
      <tr><th style="width: 40%;">Certificate no</th><td>{{ certificate.certificate_no }}</td></tr>
      <tr><th>Staff</th><td>{{ certificate.staff_name }}</td></tr>
      <tr><th>Type</th><td>{{ certificate.certificate_type.name }}</td></tr>
      <tr><th>Issue date</th><td>{{ certificate.issue_date|date:"d M Y" }}</td></tr>
    </table>
    <form method="post">
      {% csrf_token %}
      <div class="mb-3">
        <label class="form-label">Reason (optional)</label>
        <input type="text" class="form-control" name="void_reason" placeholder="e.g. issued by mistake, wrong staff selected">
      </div>
      <button type="submit" class="btn btn-danger">
        <i class="bi bi-x-circle"></i> Void this certificate
      </button>
      <a href="{% url 'payroll:certificate_list' %}" class="btn btn-outline-secondary">Cancel</a>
    </form>
  </div>
</div>
{% endblock %}