{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Change Management</h1>
  {% if current_user.has_permission('changes.create') %}
    <a href="/changes/new" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus"></i> New Change</a>
  {% endif %}
</div>
<form method="get" class="row g-2 mb-3">
  <div class="col-md-3">
    <select name="status" class="form-select form-select-sm">
      <option value="">All Statuses</option>
      {% for s in statuses %}<option value="{{ s.value }}">{{ s.value }}</option>{% endfor %}
    </select>
  </div>
  <div class="col-md-2"><button class="btn btn-sm btn-outline-secondary w-100">Filter</button></div>
</form>
<div class="card-panel">
  <table class="hop-table">
    <thead><tr><th>ID</th><th>Title</th><th>Type</th><th>Status</th><th>Requested</th></tr></thead>
    <tbody>
    {% for c in changes %}
      <tr>
        <td><a class="row-link" href="/changes/{{ c.id }}">{{ c.change_number }}</a></td>
        <td>{{ c.title }}</td>
        <td>{{ c.change_type.value }}</td>
        <td>{{ c.status.value }}</td>
        <td>{{ c.created_at.strftime('%d %b %Y') }}</td>
      </tr>
    {% else %}
      <tr><td colspan="5"><div class="empty-state"><i class="fa-solid fa-code-compare"></i><p>No changes logged.</p></div></td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}