{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Troubleshooting</h1>
  {% if current_user.has_permission('troubleshooting.create') %}
    <a href="/troubleshooting/new" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus"></i> New Article</a>
  {% endif %}
</div>
<form method="get" class="row g-2 mb-3">
  <div class="col-md-5"><input type="text" name="q" class="form-control form-control-sm" placeholder="Search troubleshooting articles" value="{{ q }}"></div>
  <div class="col-md-3">
    <select name="platform" class="form-select form-select-sm">
      <option value="">All Platforms</option>
      {% for p in platforms %}<option value="{{ p }}">{{ p }}</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>Title</th><th>Platform</th><th>Service</th><th>Updated</th></tr></thead>
    <tbody>
    {% for a in articles %}
      <tr>
        <td><a class="row-link" href="/troubleshooting/{{ a.slug }}">{{ a.title }}</a></td>
        <td>{{ a.affected_platform }}</td>
        <td>{{ a.affected_service }}</td>
        <td>{{ a.updated_at.strftime('%d %b %Y') }}</td>
      </tr>
    {% else %}
      <tr><td colspan="4"><div class="empty-state"><i class="fa-solid fa-screwdriver-wrench"></i><p>No articles found.</p></div></td></tr>
    {% endfor %}
    </tbody>
  </table>
</div>
{% endblock %}