{% extends "base.html" %}
{% block title %}Create Account - Command Center{% endblock %}
{% block content %}
<div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem;">
<div style="width: 100%; max-width: 480px;">
<!-- Logo -->
<div style="text-align: center; margin-bottom: 2rem;">
<div style="display: inline-flex; align-items: center; gap: 0.5rem;">
<svg width="32" height="32" viewBox="0 0 32 32" fill="none">
<rect width="32" height="32" rx="8" fill="hsl(240, 5.9%, 10%)"/>
<path d="M10 16L14 20L22 12" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span style="font-size: 1.25rem; font-weight: 700; color: var(--foreground);">Command Center</span>
</div>
<p style="font-size: 0.875rem; color: var(--muted-foreground); margin-top: 0.5rem;">
Start your revenue intelligence journey
</p>
</div>
<!-- Register Card -->
<div class="card">
<div class="card-header">
<h1 class="card-title">Create your account</h1>
<p class="card-description">
Get started with revenue forecasting and business intelligence
</p>
</div>
<div class="card-content">
<form method="POST" action="{{ url_for('auth.register') }}">
<div class="form-group">
<label for="full_name" class="form-label">Full Name</label>
<input type="text" id="full_name" name="full_name" class="form-input"
placeholder="John Smith" required autofocus>
</div>
<div class="form-group">
<label for="email" class="form-label">Work Email</label>
<input type="email" id="email" name="email" class="form-input"
placeholder="you@company.com" required>
</div>
<div class="form-group">
<label for="company" class="form-label">Company Name <span class="text-muted">(optional)</span></label>
<input type="text" id="company" name="company" class="form-input"
placeholder="Acme Landscaping">
</div>
<div class="form-group">
<label for="phone" class="form-label">Phone <span class="text-muted">(optional)</span></label>
<input type="tel" id="phone" name="phone" class="form-input"
placeholder="(555) 123-4567">
</div>
<div class="grid grid-2" style="gap: 1rem;">
<div class="form-group">
<label for="password" class="form-label">Password</label>
<input type="password" id="password" name="password" class="form-input"
placeholder="Min. 8 characters" required>
</div>
<div class="form-group">
<label for="confirm_password" class="form-label">Confirm</label>
<input type="password" id="confirm_password" name="confirm_password" class="form-input"
placeholder="Again" required>
</div>
</div>
<button type="submit" class="btn btn-primary btn-block btn-lg mt-4">Create account</button>
</form>
</div>
<div class="card-footer" style="text-align: center;">
<p style="font-size: 0.875rem; color: var(--muted-foreground);">
Already have an account?
<a href="{{ url_for('auth.login') }}" style="color: var(--primary); font-weight: 500;">Sign in</a>
</p>
</div>
</div>
<!-- Marketing link -->
<p style="text-align: center; margin-top: 1.5rem; font-size: 0.8125rem; color: var(--muted-foreground);">
<a href="{{ url_for('marketing.index') }}" style="color: var(--muted-foreground);">
← Back to commandsovereignty.com
</a>
</p>
</div>
</div>
{% endblock %}