{% extends "base.html" %}
{% block content %}
<div class="breadcrumb-bar"><a href="/troubleshooting">Troubleshooting</a> / {{ article.title }}</div>
<div class="page-header">
  <h1>{{ article.title }}</h1>
  <div>
    {% if current_user.has_permission('troubleshooting.edit') %}<a href="/troubleshooting/{{ article.slug }}/edit" class="btn btn-outline-primary btn-sm"><i class="fa-solid fa-pen"></i> Edit</a>{% endif %}
    {% if current_user.has_permission('troubleshooting.delete') %}
      <form class="d-inline" method="post" action="/troubleshooting/{{ article.slug }}/delete" onsubmit="return confirm('Delete this article?')">
        <button class="btn btn-outline-danger btn-sm"><i class="fa-solid fa-trash"></i></button>
      </form>
    {% endif %}
  </div>
</div>
<div class="mb-3">
  <span class="tag-pill">{{ article.affected_platform }}</span>
  <span class="tag-pill">{{ article.affected_service }}</span>
  {% for t in article.tags %}<span class="tag-pill">{{ t.name }}</span>{% endfor %}
</div>

<div class="card-panel mb-3"><h2 class="h6">Symptom</h2><p class="mb-0">{{ article.symptom }}</p></div>
<div class="card-panel mb-3"><h2 class="h6">Likely Causes</h2><p class="mb-0">{{ article.likely_causes }}</p></div>
<div class="card-panel mb-3"><h2 class="h6">Initial Checks</h2><p class="mb-0">{{ article.initial_checks }}</p></div>

<div class="card-panel mb-3">
  <h2 class="h6">Commands</h2>
  <div class="command-block" id="cmdBlock">{{ article.commands }}<button class="copy-btn" onclick="navigator.clipboard.writeText(document.getElementById('cmdBlock').innerText); this.innerText='Copied!'; setTimeout(()=>this.innerText='Copy', 1500)">Copy</button></div>
</div>

<div class="card-panel mb-3"><h2 class="h6">Relevant Logs</h2><p class="mb-0">{{ article.logs }}</p></div>
<div class="card-panel mb-3"><h2 class="h6">Resolution</h2><p class="mb-0">{{ article.resolution }}</p></div>
<div class="card-panel mb-3"><h2 class="h6">Verification</h2><p class="mb-0">{{ article.verification }}</p></div>
<div class="card-panel mb-3"><h2 class="h6">Escalation Criteria</h2><p class="mb-0">{{ article.escalation_criteria }}</p></div>
<div class="card-panel"><h2 class="h6">Customer Response Template</h2><p class="mb-0">{{ article.customer_response }}</p></div>
{% endblock %}