{% extends "base.html" %}
{% block content %}
<div class="page-header">
  <h1>Standard Operating Procedures</h1>
  {% if current_user.has_permission('sops.create') %}
    <a href="/sops/new" class="btn btn-primary btn-sm"><i class="fa-solid fa-plus"></i> New SOP</a>
  {% endif %}
</div>
<form method="get" class="mb-3"><input type="text" name="q" class="form-control form-control-sm" style="max-width:340px" placeholder="Search SOPs" value="{{ q }}"></form>
<div class="row g-3">
{% for s in sops %}
  <div class="col-md-4">
    <a href="/sops/{{ s.slug }}" class="card-panel d-block text-decoration-none text-dark h-100">
      <h2 class="h6 mb-1"><i class="fa-solid fa-list-check text-primary me-1"></i> {{ s.title }}</h2>
      <p class="text-muted small mb-0">{{ s.purpose[:110] }}{{ '…' if s.purpose|length > 110 }}</p>
    </a>
  </div>
{% else %}
  <div class="col-12"><div class="empty-state"><i class="fa-solid fa-list-check"></i><p>No SOPs found.</p></div></div>
{% endfor %}
</div>
{% endblock %}