{% extends base_template %}
{% load static %}

{% block title %}SOPs{% if site_name %} | {{ site_name }}{% endif %}{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'sops/sops.css' %}">
{% endblock %}

{% block content %}
<meta name="robots" content="noindex, nofollow">

<div class="sops-hero">
  <h1>Standard Operating Procedures</h1>
  <p>{{ hero_tagline }}</p>
</div>

<div class="sops-wrap">

  <!-- Toolbar -->
  <form method="get" class="sops-toolbar">
    <input type="text" name="q" value="{{ q }}" placeholder="Search SOPs…">

    {% if all_categories %}
      <select name="category">
        <option value="">All Categories</option>
        {% for cat in all_categories %}
          <option value="{{ cat.id }}" {% if filter_category == cat.id|stringformat:"s" %}selected{% endif %}>{{ cat.name }}</option>
        {% endfor %}
      </select>
    {% endif %}

    <button type="submit" class="sops-btn sops-btn-primary">Filter</button>

    {% if is_filtered %}
      <a href="{% url 'sops:list' %}" class="sops-btn sops-btn-outline">Clear</a>
    {% endif %}

    {% if can_edit %}
      <a href="{% url 'sops:create' %}" class="sops-btn sops-btn-primary" style="margin-left:auto;">+ New SOP</a>
    {% endif %}
  </form>

  <!-- Results -->
  {% if is_filtered %}
    {% if flat_sops %}
      <p class="sops-result-count">{{ flat_sops|length }} result{{ flat_sops|length|pluralize }} found</p>
      <div class="sops-grid">
        {% for sop in flat_sops %}
          {% include "sops/includes/sop_card.html" with sop=sop %}
        {% endfor %}
      </div>
    {% else %}
      <div class="sops-empty">
        <p>No SOPs matched your search. Try different terms or clear the filters.</p>
        <a href="{% url 'sops:list' %}" class="sops-btn sops-btn-outline">Clear Filters</a>
      </div>
    {% endif %}

  {% elif grouped %}
    {% for group_name, sops in grouped.items %}
      <div class="sops-group">
        <h2 class="sops-group-title">{{ group_name }}</h2>
        <div class="sops-grid">
          {% for sop in sops %}
            {% include "sops/includes/sop_card.html" with sop=sop %}
          {% endfor %}
        </div>
      </div>
    {% endfor %}

  {% else %}
    <div class="sops-empty">
      {% if can_edit %}
        <p>No SOPs yet. Create the first one.</p>
        <a href="{% url 'sops:create' %}" class="sops-btn sops-btn-primary">+ Create First SOP</a>
      {% else %}
        <p>No procedures published yet. Check back later.</p>
      {% endif %}
    </div>
  {% endif %}

</div>
{% endblock %}