{% extends "base.html" %}
{% block title %} - Domains{% endblock %}
{% block content %}
<div class="flex items-center justify-between mb-6">
    <h1 class="text-2xl font-bold">Domains</h1>
</div>

<div class="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-6">
    <h2 class="font-bold mb-4">Register New Domain</h2>
    <form hx-post="/api/domains/web" hx-swap="innerHTML" hx-target="#domain-result"
          class="flex gap-3 flex-wrap">
        <input name="name" placeholder="*.example.com" required
               class="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white flex-1 min-w-[200px] focus:outline-none focus:border-blue-500">
        <input name="description" placeholder="Description (optional)"
               class="bg-gray-700 border border-gray-600 rounded px-3 py-2 text-white flex-1 min-w-[200px] focus:outline-none focus:border-blue-500">
        <button type="submit" class="bg-blue-600 hover:bg-blue-500 px-4 py-2 rounded font-medium">Register</button>
    </form>
    <div id="domain-result" class="mt-3 text-sm"></div>
</div>

<div class="bg-gray-800 rounded-lg border border-gray-700 overflow-hidden">
    <table class="w-full text-sm">
        <thead class="border-b border-gray-700">
            <tr>
                <th class="text-left p-3 text-gray-400">Domain</th>
                <th class="text-left p-3 text-gray-400">Description</th>
                <th class="text-left p-3 text-gray-400">Status</th>
                <th class="text-left p-3 text-gray-400">Created</th>
            </tr>
        </thead>
        <tbody>
            {% for d in domains %}
            <tr class="border-b border-gray-700/50">
                <td class="p-3 font-mono">{{ d.name }}</td>
                <td class="p-3 text-gray-400">{{ d.description or '-' }}</td>
                <td class="p-3"><span class="px-2 py-1 rounded text-xs bg-green-900 text-green-300">{{ d.status }}</span></td>
                <td class="p-3 text-gray-400">{{ d.created_at[:10] }}</td>
            </tr>
            {% endfor %}
            {% if not domains %}
            <tr><td colspan="4" class="p-6 text-center text-gray-500">No domains registered</td></tr>
            {% endif %}
        </tbody>
    </table>
</div>
{% endblock %}