{{define "title"}}Add Repo{{end}}

{{define "content"}}
<div class="mx-auto max-w-lg">
    <div class="mb-4">
        <a href="/repos" class="text-sm text-blue-600 hover:text-blue-500">&larr; Back to repos</a>
    </div>

    <h1 class="text-2xl font-bold text-gray-900 mb-6">Add Repo</h1>

    {{with .Data}}
        {{if .Error}}
        <div class="mb-4 rounded-md bg-red-50 p-4">
            <p class="text-sm text-red-800">{{.Error}}</p>
        </div>
        {{end}}
    {{end}}

    <form method="POST" action="/repos" class="space-y-6 bg-white p-6 rounded-lg shadow ring-1 ring-gray-200">
        <div>
            <label for="name" class="block text-sm font-medium text-gray-700">Display Name</label>
            <input type="text" name="name" id="name" required placeholder="Billing App"
                   value="{{with .Data}}{{.Name}}{{end}}"
                   class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
        </div>

        <div>
            <label for="slug" class="block text-sm font-medium text-gray-700">Slug</label>
            <input type="text" name="slug" id="slug" required placeholder="billing-app"
                   value="{{with .Data}}{{.Slug}}{{end}}"
                   class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
            <p class="mt-1 text-xs text-gray-500">Used in the webhook URL</p>
        </div>

        <div>
            <label for="forgejo_owner" class="block text-sm font-medium text-gray-700">Forgejo Owner</label>
            <input type="text" name="forgejo_owner" id="forgejo_owner" required
                   value="{{with .Data}}{{.ForgejoOwner}}{{end}}"
                   class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
        </div>

        <div>
            <label for="forgejo_repo" class="block text-sm font-medium text-gray-700">Forgejo Repo</label>
            <input type="text" name="forgejo_repo" id="forgejo_repo" required
                   value="{{with .Data}}{{.ForgejoRepo}}{{end}}"
                   class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 shadow-sm focus:border-blue-500 focus:outline-none focus:ring-1 focus:ring-blue-500">
        </div>

        <div class="rounded-md bg-blue-50 p-4">
            <p class="text-sm text-blue-800">After adding, you'll be shown instructions for setting up the Forgejo webhook.</p>
        </div>

        <div class="flex items-center gap-2">
            <input type="checkbox" name="active" id="active" checked
                   class="h-4 w-4 rounded border-gray-300 text-blue-600 focus:ring-blue-500">
            <label for="active" class="text-sm font-medium text-gray-700">Active</label>
        </div>

        <button type="submit" class="w-full rounded-md bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow hover:bg-blue-500">Add Repo</button>
    </form>
</div>
{{end}}