{% extends "admin/base.html" %}

{% block title %}Tags{% endblock %}

{% block content %}
<div class="header">
    <h2>Tags</h2>
</div>

<div class="card">
    <form method="post" action="/admin/tags" style="margin-bottom: 1.5rem; display: flex; gap: 1rem;">
        <input type="text" name="name" placeholder="Tag name" required
            style="flex: 1; padding: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text);">
        <button type="submit" class="btn btn-primary">Add Tag</button>
    </form>

    {% if tags | length > 0 %}
    <table>
        <thead>
            <tr>
                <th>Name</th>
                <th>Slug</th>
                <th>Posts</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for tag in tags %}
            <tr>
                <td>{{ tag.name }}</td>
                <td>{{ tag.slug }}</td>
                <td>{{ tag.count }}</td>
                <td>
                    <a href="/tags/{{ tag.slug }}" target="_blank" class="btn btn-secondary btn-sm">View</a>
                    <button class="btn btn-danger btn-sm" hx-delete="/admin/tags/{{ tag.id }}"
                        hx-confirm="Delete this tag?">
                        Delete
                    </button>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
    {% else %}
    <p style="color: var(--text-muted);">No tags yet. Create one above or add tags to posts.</p>
    {% endif %}
</div>
{% endblock %}