import type { SessionUser } from "../../middleware/session.ts";
import { Layout } from "../layout.tsx";

interface NewRepoProps {
    user: SessionUser;
    error?: string;
}

export function NewRepo({ user, error }: NewRepoProps) {
    return (
        <Layout user={user} title="New repository">
            <div class="container container-narrow">
                <h1 class="page-title">Create new repository</h1>
                {!!error && (
                    <p class="form-error" safe>
                        {error}
                    </p>
                )}
                <form method="POST" action="/new" class="form-card">
                    <div class="form-group">
                        <label for="name">Repository name</label>
                        <input
                            id="name"
                            name="name"
                            type="text"
                            required
                            pattern="[a-zA-Z0-9._-]+"
                            title="Letters, numbers, dots, hyphens, underscores"
                            placeholder="my-project"
                        />
                    </div>
                    <div class="form-group">
                        <label for="description">
                            Description{" "}
                            <span class="text-muted">(optional)</span>
                        </label>
                        <input
                            id="description"
                            name="description"
                            type="text"
                            placeholder="A short description"
                        />
                    </div>
                    <div class="form-group">
                        <label for="default_branch">Default branch</label>
                        <input
                            id="default_branch"
                            name="default_branch"
                            type="text"
                            value="main"
                            placeholder="main"
                        />
                    </div>
                    <div class="form-group">
                        <label class="checkbox-label">
                            <input
                                type="checkbox"
                                name="is_private"
                                value="1"
                            />
                            Private repository (only visible to you)
                        </label>
                    </div>
                    <button type="submit" class="btn btn-primary">
                        Create repository
                    </button>
                </form>
            </div>
        </Layout>
    );
}