{% extends "base.html" %}
{% block title %}User Guide — ABREKA{% endblock %}

{% block extra_css %}
    .guide-content {
      max-width: 800px;
    }
    .guide-content .file-path {
      font-family: var(--mono);
      font-size: 11px;
      color: #9ca3af;
      margin-bottom: 12px;
    }
    .guide-content h1 { font-size: 28px; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 2px solid var(--border); }
    .guide-content h2 { font-size: 20px; margin: 28px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
    .guide-content h3 { font-size: 16px; margin: 20px 0 8px; }
    .guide-content h1:first-child { margin-top: 0; }
    .guide-content p { margin: 10px 0; line-height: 1.7; }
    .guide-content ul, .guide-content ol { margin: 10px 0; padding-left: 28px; }
    .guide-content li { margin: 4px 0; line-height: 1.6; }
    .guide-content pre { margin: 12px 0; }
    .guide-content table { margin: 12px 0; }
    .guide-content hr { border: none; border-top: 1px solid var(--border); margin: 32px 0; }
    .guide-content a { border-bottom: 1px solid rgba(79, 70, 229, 0.3); }
    .guide-content a:hover { border-bottom-color: var(--primary); text-decoration: none; }
{% endblock %}

{% block breadcrumb %}
<div class="breadcrumb"><a href="/">Dashboard</a> / User Guide</div>
{% endblock %}

{% block content %}
<div class="card guide-content">
  <div class="file-path">src/abreka/docs/user_guide.md</div>
  {% if guide %}
  <div class="md-content">{{ guide | md }}</div>
  {% else %}
  <p class="text-muted">User guide not found at src/abreka/docs/user_guide.md.</p>
  {% endif %}
</div>
{% endblock %}