{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Create Your SwiftPOS Account — Free 3-Day Trial</title>
    <meta name="description" content="Register your business on SwiftPOS and get a 3-day free trial instantly. No credit card required.">
    <link rel="icon" type="image/x-icon" href="{% static 'core/icons/favicon.ico' %}">

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@700;800;900&display=swap" rel="stylesheet">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- SwiftPOS base tokens -->
    <link rel="stylesheet" href="{% static 'css/style.css' %}?v=12">
    <!-- Auth styles -->
    <link rel="stylesheet" href="{% static 'css/auth.css' %}?v=5">
</head>
<body class="auth-body">

<div class="w-100 d-flex flex-column align-items-center">
    <div class="auth-split">
        <!-- ── LEFT: FORM PANEL ── -->
        <div class="auth-form-panel">
            <div class="auth-form-inner">
                <!-- Brand row -->
                <a href="/" class="auth-brand-row">
                    <img src="{% static 'core/icons/icon-192.png' %}"
                         alt="SwiftPOS"
                         class="auth-brand-logo"
                         onerror="this.style.display='none'">
                    <span class="auth-brand-name">Swift<span>POS</span></span>
                </a>

                <!-- Trial badge -->
                <div class="auth-trial-badge">
                    <i class="fas fa-star"></i> 3-Day Free Trial — No Credit Card
                </div>

                <h2 class="auth-form-title">Create your account</h2>
                <p class="auth-form-sub">Get your business online in under 2 minutes.</p>



                <!-- Messages / Alerts -->
                {% if messages %}
                    {% for message in messages %}
                    <div class="auth-alert auth-alert-{{ message.tags|default:'info' }}">
                        <i class="fas fa-{% if 'success' in message.tags %}check-circle{% elif 'error' in message.tags or 'danger' in message.tags %}exclamation-circle{% elif 'warning' in message.tags %}exclamation-triangle{% else %}info-circle{% endif %}"></i>
                        <span>{{ message }}</span>
                    </div>
                    {% endfor %}
                {% endif %}

                {% if errors %}
                <div class="auth-alert auth-alert-error">
                    <i class="fas fa-circle-exclamation"></i>
                    <div>
                        {% for error in errors %}
                        <div>{{ error }}</div>
                        {% endfor %}
                    </div>
                </div>
                {% endif %}

                <!-- Form -->
                <form method="post" action="/register/" id="registerForm" novalidate>
                    {% csrf_token %}

                    <!-- Company name -->
                    <div class="auth-field">
                        <label class="auth-label" for="company_name">Business / Company Name *</label>
                        <div class="auth-input-wrap">
                            <input type="text"
                                   id="company_name"
                                   name="company_name"
                                   class="auth-input"
                                   placeholder="e.g. Mama Titi Foodstuff"
                                   required
                                   autocomplete="organization"
                                   value="{{ form_data.company_name|default:'' }}">
                            <i class="fas fa-store auth-input-icon"></i>
                        </div>
                    </div>

                    <!-- Email -->
                    <div class="auth-field">
                        <label class="auth-label" for="email">Business Email *</label>
                        <div class="auth-input-wrap">
                            <input type="email"
                                   id="email"
                                   name="email"
                                   class="auth-input"
                                   placeholder="you@yourbusiness.com"
                                   required
                                   autocomplete="email"
                                   value="{{ form_data.email|default:'' }}">
                            <i class="fas fa-envelope auth-input-icon"></i>
                        </div>
                        <div class="auth-field-hint">
                            Your username will be the part of your email before the @ symbol.
                        </div>
                    </div>

                    <!-- Phone -->
                    <div class="auth-field">
                        <label class="auth-label" for="phone">Phone Number</label>
                        <div class="auth-input-wrap">
                            <input type="tel"
                                   id="phone"
                                   name="phone"
                                   class="auth-input"
                                   placeholder="08012345678"
                                   autocomplete="tel"
                                   value="{{ form_data.phone|default:'' }}">
                            <i class="fas fa-phone auth-input-icon"></i>
                        </div>
                    </div>

                    <div class="auth-form-grid-2">
                        <!-- Password -->
                        <div class="auth-field">
                            <label class="auth-label" for="password">Password *</label>
                            <div class="auth-input-wrap">
                                <input type="password"
                                       id="password"
                                       name="password"
                                       class="auth-input"
                                       placeholder="Min. 8 chars"
                                       required
                                       autocomplete="new-password">
                                <i class="fas fa-lock auth-input-icon"></i>
                            </div>
                        </div>

                        <!-- Confirm password -->
                        <div class="auth-field">
                            <label class="auth-label" for="password2">Confirm Password *</label>
                            <div class="auth-input-wrap">
                                <input type="password"
                                       id="password2"
                                       name="password2"
                                       class="auth-input"
                                       placeholder="Repeat password"
                                       required
                                       autocomplete="new-password">
                                <i class="fas fa-shield-halved auth-input-icon"></i>
                            </div>
                        </div>
                    </div>

                    <!-- Submit -->
                    <button type="submit" class="auth-submit-btn" id="registerBtn">
                        Start My Free Trial
                    </button>
                </form>

                <!-- Footer link -->
                <div class="auth-footer-link">
                    Already have an account?
                    <a href="/accounts/login/">Log in here</a>
                </div>

            </div>
        </div>

        <!-- ── RIGHT: HERO PANEL ── -->
        <div class="auth-hero" aria-hidden="true">
            <!-- Brand header in hero -->
            <a href="/" class="auth-hero-brand">
                <img src="{% static 'core/icons/icon-192.png' %}"
                     alt="SwiftPOS"
                     class="auth-hero-brand-logo"
                     onerror="this.style.display='none'">
                <span class="auth-hero-brand-name">Swift<span>POS</span></span>
            </a>

            <!-- Centered CSS Graphic (matches user screenshot) -->
            <div class="auth-hero-graphic-container">
                <div class="auth-hero-circle-bg">
                    <!-- Float badges representing app connections -->
                    <div class="auth-floating-badge badge-pos-1"><i class="fas fa-barcode"></i></div>
                    <div class="auth-floating-badge badge-pos-2"><i class="fas fa-boxes-stacked"></i></div>
                    <div class="auth-floating-badge badge-pos-3"><i class="fas fa-chart-line"></i></div>
                    
                    <!-- Center mock preview window -->
                    <div class="auth-mock-dashboard-card">
                        <div class="auth-mock-header"></div>
                        <div class="auth-mock-row">
                            <div class="auth-mock-avatar"></div>
                            <div class="auth-mock-line"></div>
                        </div>
                        <div class="auth-mock-row">
                            <div class="auth-mock-avatar" style="background:#def7ec;"></div>
                            <div class="auth-mock-line-short"></div>
                        </div>
                        <div class="auth-mock-row" style="margin-bottom:0;">
                            <div class="auth-mock-avatar" style="background:#fde8e8;"></div>
                            <div class="auth-mock-line"></div>
                        </div>
                    </div>

                    <!-- Beautiful connective paths inside the circle -->
                    <svg class="auth-graphic-svg" viewBox="0 0 280 280">
                        <path d="M 60 70 Q 140 140 140 140" stroke="rgba(255, 255, 255, 0.15)" stroke-width="2" fill="none" />
                        <path d="M 50 180 Q 140 140 140 140" stroke="rgba(255, 255, 255, 0.15)" stroke-width="2" fill="none" />
                        <path d="M 200 220 Q 140 140 140 140" stroke="rgba(255, 255, 255, 0.15)" stroke-width="2" fill="none" />
                    </svg>
                </div>
            </div>

            <!-- Onboarding Text -->
            <div class="auth-hero-body">
                <h3 class="auth-hero-title">Connect with every branch</h3>
                <p class="auth-hero-sub">Everything you need in an easily customizable live dashboard.</p>

                <!-- Slider dots -->
                <div class="auth-slider-dots">
                    <span class="auth-slider-dot active"></span>
                    <span class="auth-slider-dot"></span>
                    <span class="auth-slider-dot"></span>
                </div>
            </div>
        </div>
    </div>

    <!-- Copyright outside the card -->
    <div class="auth-page-footer">
        &copy; {% now "Y" %} SwiftPOS — All rights reserved
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Submit button state
document.getElementById('registerForm')?.addEventListener('submit', function () {
    const btn = document.getElementById('registerBtn');
    if (btn) {
        btn.innerHTML = '<i class="fas fa-spinner fa-spin"></i> Creating account…';
        btn.disabled = true;
    }
});
</script>

</body>
</html>
