{% extends "base.html" %}
{% block content %}
<div class="breadcrumb-bar"><a href="/sops">SOPs</a> / {{ sop.title }}</div>
<div class="page-header">
  <h1>{{ sop.title }}</h1>
  {% if current_user.has_permission('sops.edit') %}<a href="/sops/{{ sop.slug }}/edit" class="btn btn-outline-primary btn-sm"><i class="fa-solid fa-pen"></i> Edit</a>{% endif %}
</div>

<div class="row g-3">
  <div class="col-lg-8">
    <div class="card-panel mb-3"><h2 class="h6">Purpose</h2><p class="mb-0">{{ sop.purpose }}</p></div>
    <div class="card-panel mb-3"><h2 class="h6">Prerequisites</h2><p class="mb-0">{{ sop.prerequisites }}</p></div>

    <div class="card-panel mb-3">
      <div class="d-flex justify-content-between align-items-center mb-2">
        <h2 class="h6 mb-0">Checklist</h2>
        {% if not active_run %}
        <form method="post" action="/sops/{{ sop.slug }}/checklist/start" class="d-flex gap-2">
          <input type="text" name="context_note" class="form-control form-control-sm" placeholder="Context (e.g. server / customer)">
          <button class="btn btn-sm btn-primary">Start Run</button>
        </form>
        {% else %}
          <span class="text-muted small">Started {{ active_run.started_at.strftime('%d %b %H:%M') }}{{ ' — ' + active_run.context_note if active_run.context_note }}</span>
        {% endif %}
      </div>
      {% for step in steps %}
        <div class="form-check mb-1">
          {% if active_run %}
          <form method="post" action="/sops/{{ sop.slug }}/checklist/{{ active_run.id }}/toggle/{{ loop.index0 }}" class="d-inline">
            <input class="form-check-input" type="checkbox" onchange="this.form.submit()" {{ 'checked' if loop.index0 in completed_indices }}>
          </form>
          {% else %}
            <input class="form-check-input" type="checkbox" disabled>
          {% endif %}
          <label class="form-check-label {{ 'checklist-item done' if loop.index0 in completed_indices }}">{{ step }}</label>
        </div>
      {% endfor %}
    </div>

    <div class="card-panel mb-3"><h2 class="h6">Commands</h2><div class="command-block">{{ sop.commands }}</div></div>
    <div class="card-panel mb-3"><h2 class="h6">Expected Result</h2><p class="mb-0">{{ sop.expected_result }}</p></div>
    <div class="card-panel mb-3"><h2 class="h6">Verification</h2><p class="mb-0">{{ sop.verification }}</p></div>
    <div class="card-panel mb-3"><h2 class="h6">Rollback</h2><p class="mb-0">{{ sop.rollback }}</p></div>
    <div class="card-panel mb-3"><h2 class="h6">Escalation</h2><p class="mb-0">{{ sop.escalation }}</p></div>
    <div class="card-panel"><h2 class="h6">Warnings</h2><p class="mb-0 text-danger">{{ sop.warnings }}</p></div>
  </div>
  <div class="col-lg-4">
    <div class="card-panel">
      <p class="mb-1"><strong>Required Permissions:</strong> {{ sop.required_permissions }}</p>
      <p class="mb-1"><strong>Visibility:</strong> {{ sop.visibility.value.replace('_',' ') | title }}</p>
      <p class="mb-0"><strong>Status:</strong> <span class="status-pill badge-status-{{ sop.status.value }}">{{ sop.status.value }}</span></p>
    </div>
  </div>
</div>
{% endblock %}