{{template "base" .}}

{{define "title"}}Edit {{.App.Name}} - µPaaS{{end}}

{{define "content"}}
{{template "nav" .}}

<main class="max-w-2xl mx-auto px-4 py-8">
    <div class="mb-6">
        <a href="/apps/{{.App.ID}}" class="text-primary-600 hover:text-primary-800 inline-flex items-center">
            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
            </svg>
            Back to {{.App.Name}}
        </a>
    </div>

    <h1 class="text-2xl font-medium text-gray-900 mb-6">Edit Application</h1>

    <div class="card p-6">
        {{template "alert-error" .}}

        <form method="POST" action="/apps/{{.App.ID}}" class="space-y-6">
            <div class="form-group">
                <label for="name" class="label">App Name</label>
                <input
                    type="text"
                    id="name"
                    name="name"
                    value="{{.App.Name}}"
                    required
                    pattern="[a-z0-9-]+"
                    class="input"
                >
                <p class="text-sm text-gray-500 mt-1">Lowercase letters, numbers, and hyphens only</p>
            </div>

            <div class="form-group">
                <label for="repo_url" class="label">Repository URL (SSH)</label>
                <input
                    type="text"
                    id="repo_url"
                    name="repo_url"
                    value="{{.App.RepoURL}}"
                    required
                    class="input font-mono"
                >
            </div>

            <div class="grid grid-cols-2 gap-4">
                <div class="form-group">
                    <label for="branch" class="label">Branch</label>
                    <input
                        type="text"
                        id="branch"
                        name="branch"
                        value="{{.App.Branch}}"
                        required
                        class="input"
                    >
                </div>

                <div class="form-group">
                    <label for="dockerfile_path" class="label">Dockerfile Path</label>
                    <input
                        type="text"
                        id="dockerfile_path"
                        name="dockerfile_path"
                        value="{{.App.DockerfilePath}}"
                        required
                        class="input"
                    >
                </div>
            </div>

            <hr class="border-gray-200">

            <h3 class="text-lg font-medium text-gray-900">Optional Settings</h3>

            <div class="form-group">
                <label for="docker_network" class="label">Docker Network</label>
                <input
                    type="text"
                    id="docker_network"
                    name="docker_network"
                    value="{{if .App.DockerNetwork.Valid}}{{.App.DockerNetwork.String}}{{end}}"
                    class="input"
                    placeholder="bridge"
                >
            </div>

            <div class="form-group">
                <label for="ntfy_topic" class="label">Ntfy Topic URL</label>
                <input
                    type="url"
                    id="ntfy_topic"
                    name="ntfy_topic"
                    value="{{if .App.NtfyTopic.Valid}}{{.App.NtfyTopic.String}}{{end}}"
                    class="input"
                    placeholder="https://ntfy.sh/my-topic"
                >
            </div>

            <div class="form-group">
                <label for="slack_webhook" class="label">Slack Webhook URL</label>
                <input
                    type="url"
                    id="slack_webhook"
                    name="slack_webhook"
                    value="{{if .App.SlackWebhook.Valid}}{{.App.SlackWebhook.String}}{{end}}"
                    class="input"
                    placeholder="https://hooks.slack.com/services/..."
                >
            </div>

            <div class="flex justify-end gap-3 pt-4">
                <a href="/apps/{{.App.ID}}" class="btn-secondary">Cancel</a>
                <button type="submit" class="btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</main>
{{end}}