{% extends 'admin/layout.twig' %}
{% block title %}Tags — Admin{% endblock %}
{% block content %}
    <div class="admin-page-head">
        <h1>Tags</h1>
        <p class="muted">Use tags to categorize and triage tickets.</p>
    </div>

    <div class="two-col">
        <div>
            <h2 class="section-title">All tags</h2>
            <table class="data-table">
                <thead><tr><th>Name</th><th>Color</th><th></th></tr></thead>
                <tbody>
                    {% for t in tags %}
                        <tr>
                            <form method="post" action="{{ app_url('/admin/tags/' ~ t.id) }}" class="inline-form">
                                {{ csrf_field()|raw }}
                                <td><input type="text" name="name" value="{{ t.name }}" required></td>
                                <td><input type="color" name="color" value="{{ t.color }}"></td>
                                <td>
                                    <button type="submit" class="btn btn-light small">Save</button>
                            </form>
                                {% if current_user().role == 'admin' %}
                                <form method="post" action="{{ app_url('/admin/tags/' ~ t.id ~ '/delete') }}" class="inline-form" onsubmit="return confirm('Delete this tag?');">
                                    {{ csrf_field()|raw }}
                                    <button type="submit" class="btn btn-danger small">Delete</button>
                                </form>
                                {% endif %}
                                </td>
                        </tr>
                    {% else %}
                        <tr><td colspan="3" class="muted">No tags yet.</td></tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
        <div>
            <h2 class="section-title">Add tag</h2>
            <form method="post" action="{{ app_url('/admin/tags') }}" class="form card">
                {{ csrf_field()|raw }}
                <div class="form-row">
                    <label>Name</label>
                    <input type="text" name="name" required placeholder="e.g. billing">
                </div>
                <div class="form-row">
                    <label>Color</label>
                    <input type="color" name="color" value="#94a3b8">
                </div>
                <div class="form-actions">
                    <button type="submit" class="btn btn-primary">Add tag</button>
                </div>
            </form>
        </div>
    </div>
{% endblock %}