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

{% block title %}{{ sop.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="sop-detail-wrap">

  <div class="sop-header">
    <div class="sop-header-meta">
      {% if sop.categories.all %}
        <div class="sop-cats">
          {% for cat in sop.categories.all %}
            <span class="sop-cat-pill">{{ cat.name }}</span>
          {% endfor %}
        </div>
      {% endif %}
      <h1>{{ sop.title }}</h1>
      <p class="sop-byline">
        Updated {{ sop.updated_at|date:"F j, Y" }}{% if sop.updated_by %} by {{ sop.updated_by.get_full_name|default:sop.updated_by.username }}{% endif %}
        &nbsp;&middot;&nbsp;
        Created {{ sop.created_at|date:"F j, Y" }}{% if sop.created_by %} by {{ sop.created_by.get_full_name|default:sop.created_by.username }}{% endif %}
      </p>
    </div>
    {% if can_edit %}
      <div class="sop-actions">
        <a href="{% url 'sops:edit' sop.slug %}" class="sop-btn-edit">Edit</a>
      </div>
    {% endif %}
  </div>

  <div class="sop-body">
    <div class="sop-content">
      {{ rendered_content }}
    </div>
  </div>

  <a href="{% url 'sops:list' %}" class="sop-back">&larr; Back to SOPs</a>

</div>

<script>
  document.querySelectorAll('.sop-content table').forEach(function(table) {
    var wrapper = document.createElement('div');
    wrapper.className = 'table-wrapper';
    table.parentNode.insertBefore(wrapper, table);
    wrapper.appendChild(table);
  });
</script>
{% endblock %}