{% extends "base.html" %}

{% block title %}Create New App{% endblock %}

{% block breadcrumb %}
<nav class="text-sm text-gray-500 mb-4">
    <a href="/dashboard" class="hover:text-blue-600">Dashboard</a>
    <span class="mx-2">/</span>
    <span class="text-gray-900">Create App</span>
</nav>
{% endblock %}

{% block content %}
<div class="max-w-3xl mx-auto">
    <div class="bg-white shadow rounded-lg p-6">
        <h1 class="text-2xl font-bold mb-6">Create New Application</h1>

        {% if errors %}
        <div class="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
            <div class="flex">
                <div class="flex-shrink-0">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                    </svg>
                </div>
                <div class="ml-3">
                    <h3 class="text-sm font-medium text-red-800">Validation Errors</h3>
                    <ul class="mt-2 text-sm text-red-700 list-disc list-inside">
                        {% for error in errors %}
                        <li>{{ error }}</li>
                        {% endfor %}
                    </ul>
                </div>
            </div>
        </div>
        {% endif %}

        <form method="POST" action="/dashboard/apps/new" class="space-y-6">
            <!-- App Name -->
            <div>
                <label for="app_name" class="block text-sm font-medium text-gray-700 mb-2">
                    Application Name *
                </label>
                <input
                    type="text"
                    id="app_name"
                    name="app_name"
                    value="{{ app_name if app_name else '' }}"
                    required
                    pattern="[a-zA-Z0-9_-]+"
                    minlength="3"
                    maxlength="63"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                    placeholder="my-awesome-app"
                >
                <p class="mt-1 text-sm text-gray-500">
                    3-63 characters. Letters, numbers, hyphens, and underscores only.
                </p>
            </div>

            <!-- Builder Selection -->
            <div>
                <label for="builder" class="block text-sm font-medium text-gray-700 mb-2">
                    Builder
                </label>
                <select
                    id="builder"
                    name="builder"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500"
                >
                    {% for b in builders %}
                    <option value="{{ b.id }}" {% if builder == b.id %}selected{% endif %}>
                        {{ b.name }} - {{ b.description }}
                    </option>
                    {% endfor %}
                </select>
                <p class="mt-1 text-sm text-gray-500">
                    Select "Auto-detect" to automatically determine the builder from your project files.
                </p>
            </div>

            <!-- Git URL (Optional for Phase 1) -->
            <div>
                <label for="git_url" class="block text-sm font-medium text-gray-700 mb-2">
                    Git Repository URL (Coming Soon)
                </label>
                <input
                    type="url"
                    id="git_url"
                    name="git_url"
                    value="{{ git_url if git_url else '' }}"
                    disabled
                    class="w-full px-3 py-2 border border-gray-300 rounded-md bg-gray-50 text-gray-500"
                    placeholder="https://github.com/user/repo.git"
                >
                <p class="mt-1 text-sm text-gray-500">
                    Git deployment will be available in a future update. For now, use file upload or CLI.
                </p>
            </div>

            <!-- Environment Variables -->
            <div>
                <label for="env_vars" class="block text-sm font-medium text-gray-700 mb-2">
                    Environment Variables (Optional)
                </label>
                <textarea
                    id="env_vars"
                    name="env_vars"
                    rows="6"
                    class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-blue-500 focus:border-blue-500 font-mono text-sm"
                    placeholder="DATABASE_URL=postgres://...&#10;API_KEY=your-key&#10;DEBUG=false"
                >{{ env_vars if env_vars else '' }}</textarea>
                <p class="mt-1 text-sm text-gray-500">
                    One variable per line, in KEY=VALUE format. Lines starting with # are ignored.
                </p>
            </div>

            <!-- Submit Buttons -->
            <div class="flex items-center justify-between pt-4 border-t">
                <a
                    href="/dashboard"
                    class="px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                    Cancel
                </a>
                <button
                    type="submit"
                    class="px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
                >
                    Create Application
                </button>
            </div>
        </form>

        <!-- CLI Alternative -->
        <div class="mt-6 p-4 bg-blue-50 border border-blue-200 rounded-lg">
            <h3 class="text-sm font-medium text-blue-900 mb-2">Alternative: Create via CLI</h3>
            <p class="text-sm text-blue-700 mb-2">
                For full deployment support, use the command line:
            </p>
            <pre class="bg-blue-900 text-blue-100 p-3 rounded text-sm overflow-x-auto"><code>hop3 deploy &lt;app-name&gt; /path/to/your/app</code></pre>
        </div>
    </div>
</div>
{% endblock %}