{% extends "base.html.jinja" %}

{% block content %}
<section class="max-w-lg mx-auto px-4 pt-16 text-center">
    <h1 class="text-2xl font-bold">Welcome to Forage</h1>
    <p class="mt-4 text-gray-600">Create your first organisation to get started.</p>

    {% if error %}
    <div class="mt-4 p-3 bg-red-50 border border-red-200 rounded-md text-sm text-red-700">
        {{ error }}
    </div>
    {% endif %}

    <form method="POST" action="/orgs" class="mt-8 text-left space-y-4">
        <input type="hidden" name="_csrf" value="{{ csrf_token }}">
        <div>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">Organisation name</label>
            <input type="text" id="name" name="name" placeholder="my-org"
                   class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-900"
                   pattern="[a-z0-9][a-z0-9-]*[a-z0-9]" title="Lowercase letters, numbers, and hyphens">
            <p class="text-xs text-gray-400 mt-1">Lowercase letters, numbers, and hyphens only.</p>
        </div>
        <button type="submit" class="w-full px-4 py-2 bg-gray-900 text-white rounded-md hover:bg-gray-800 font-medium">
            Create organisation
        </button>
    </form>

    <div class="mt-8 pt-8 border-t border-gray-200">
        <p class="text-sm text-gray-500 mb-4">Or use the CLI:</p>
        <div class="bg-gray-950 rounded-md p-4 text-sm font-mono text-gray-300 text-left">
            <pre><span class="text-gray-500"># Install forest CLI</span>
cargo install forest

<span class="text-gray-500"># Create an organisation</span>
forest orgs create my-org

<span class="text-gray-500"># Create a project</span>
forest init my-project --component forage/service

<span class="text-gray-500"># Deploy</span>
forest release create --env dev</pre>
        </div>
    </div>

    <div class="mt-6">
        <a href="/settings/tokens" class="text-sm text-gray-500 hover:text-gray-700">Manage API tokens &rarr;</a>
    </div>
</section>
{% endblock %}