{% extends "base.html" %}

{% block title %}Create Project - AutoModerate{% endblock %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
    <h1 class="h2">Create New Project</h1>
    <div class="btn-toolbar mb-2 mb-md-0">
        <div class="btn-group me-2">
            <a href="{{ url_for('dashboard.projects') }}" class="btn btn-sm btn-outline-secondary">
                <i class="fas fa-arrow-left"></i> Back to Projects
            </a>
        </div>
    </div>
</div>

<div class="row justify-content-center">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h5 class="card-title mb-0">Project Details</h5>
            </div>
            <div class="card-body">
                <form method="POST">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
                    <div class="mb-3">
                        <label for="name" class="form-label">Project Name *</label>
                        <input type="text" class="form-control" id="name" name="name" required
                               placeholder="Enter project name">
                        <div class="form-text">Choose a descriptive name for your content moderation project.</div>
                    </div>

                    <div class="mb-3">
                        <label for="description" class="form-label">Description</label>
                        <textarea class="form-control" id="description" name="description" rows="3"
                                  placeholder="Describe what type of content this project will moderate"></textarea>
                        <div class="form-text">Optional: Provide details about your moderation use case.</div>
                    </div>

                    <div class="d-grid gap-2 d-md-flex justify-content-md-end">
                        <a href="{{ url_for('dashboard.projects') }}" class="btn btn-secondary me-md-2">Cancel</a>
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-plus"></i> Create Project
                        </button>
                    </div>
                </form>
            </div>
        </div>

        <div class="card mt-4">
            <div class="card-header">
                <h5 class="card-title mb-0">What happens next?</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-key fa-2x text-primary mb-2"></i>
                        <h6>API Key Generated</h6>
                        <p class="text-muted small">A default API key will be created automatically</p>
                    </div>
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-cogs fa-2x text-success mb-2"></i>
                        <h6>Configure Rules</h6>
                        <p class="text-muted small">Set up custom moderation rules for your content</p>
                    </div>
                    <div class="col-md-4 text-center mb-3">
                        <i class="fas fa-rocket fa-2x text-info mb-2"></i>
                        <h6>Start Moderating</h6>
                        <p class="text-muted small">Begin sending content to your API endpoint</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}