{% extends "base.html" %}
{% block title %}Generated Guides{% endblock %}
{% block content %}
<div id="guides-page" class="p-6">
  <div class="flex items-center justify-between mb-6">
    <h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
      <span class="material-symbols-outlined text-brand-600 dark:text-brand-400">menu_book</span>
      Generated Documentation Guides
    </h2>
    <span class="text-sm text-gray-500 dark:text-gray-400">{{ guides|length }} guide{{ 's' if guides|length != 1 }}</span>
  </div>

  {% if guides %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
    <table id="guides-table" class="w-full text-sm">
      <thead class="bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
        <tr>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Title</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Ticket</th>
          <th class="text-left px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Created</th>
          <th class="text-right px-4 py-3 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wide">Actions</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-100 dark:divide-gray-800">
        {% for g in guides %}
        <tr class="hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors">
          <td class="px-4 py-3">
            <p class="font-medium text-gray-900 dark:text-gray-100">{{ g.title }}</p>
            <p class="text-xs text-gray-400 dark:text-gray-500 font-mono mt-0.5">{{ g.slug }}</p>
          </td>
          <td class="px-4 py-3">
            {% if g.ticket_id %}
            <a href="{{ url_for('ticket_get', ticket_id=g.ticket_id) }}"
               class="text-brand-600 dark:text-brand-400 hover:text-brand-800 dark:hover:text-brand-300 transition-colors">
              #{{ g.ticket_id }}{% if g.ticket_subject %} — {{ g.ticket_subject[:50] }}{% if g.ticket_subject|length > 50 %}…{% endif %}{% endif %}
            </a>
            {% else %}
            <span class="text-gray-400 dark:text-gray-500">—</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">{{ g.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
          <td class="px-4 py-3 text-right">
            <button type="button" onclick="copyGuideMarkdown({{ g.id }})"
                    class="inline-flex items-center gap-1 px-3 py-1.5 text-xs font-medium text-gray-700 dark:text-gray-300 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
              <span class="material-symbols-outlined text-sm">content_copy</span>
              Copy Markdown
            </button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% else %}
  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-12 text-center">
    <span class="material-symbols-outlined text-4xl text-gray-300 dark:text-gray-600 mb-3 block">menu_book</span>
    <p class="text-gray-500 dark:text-gray-400 text-sm">No guides generated yet.</p>
    <p class="text-gray-400 dark:text-gray-500 text-xs mt-1">When an AI suggestion qualifies as a guide, click "Generate Guide" on the ticket to create one.</p>
  </div>
  {% endif %}
</div>
{% endblock %}