{% extends "base.html" %}

{% block title %}Register | NailTech Nation{% endblock %}

{% block content %}
<div class="auth-page">
    <div class="container">
        <div class="auth-container">
            <h1 class="auth-title">Join NailTech Nation 💅</h1>
            <p class="auth-subtitle">Create your account to start booking</p>
            
            <form method="POST" class="auth-form">
                <div class="form-group">
                    <label>Full Name</label>
                    <input type="text" name="name" placeholder="Enter your full name" 
                           required minlength="2" maxlength="100">
                    <small class="form-hint">This will be used for your bookings</small>
                </div>
                
                <div class="form-group">
                    <label>Phone Number</label>
                    <input type="tel" name="phone" placeholder="0712345678" 
                           required pattern="[0-9]{10}" maxlength="10" 
                           oninput="validatePhoneInput(this)">
                    <small class="form-hint">Kenyan format: 0712345678</small>
                </div>
                
                <button type="submit" class="btn btn-primary btn-block">Create Account</button>
                
                <p class="auth-footer">
                    Already have an account? 
                    <a href="{{ url_for('auth.login') }}">Login here</a>
                </p>
            </form>
            
            <div class="info-box">
                <h4>✨ What's Next?</h4>
                <ul>
                    <li>Create your account in seconds</li>
                    <li>Browse our services and gallery</li>
                    <li>Choose your preferred technician</li>
                    <li>Book your perfect time slot</li>
                </ul>
            </div>
        </div>
    </div>
</div>

<style>
.auth-page {
    min-height: 70vh;
    display: flex;
    align-items: center;
    padding: 3rem 0;
}

.auth-container {
    max-width: 500px;
    margin: 0 auto;
    background: white;
    padding: 3rem;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.auth-title {
    text-align: center;
    margin-bottom: 0.5rem;
}

.auth-subtitle {
    text-align: center;
    color: var(--light-text);
    margin-bottom: 2rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.form-group input {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--bg-light);
    border-radius: var(--radius-sm);
    font-size: 1rem;
    transition: var(--transition);
}

.form-group input:focus {
    outline: none;
    border-color: var(--primary-pink);
}

.form-hint {
    display: block;
    margin-top: 0.5rem;
    color: var(--light-text);
    font-size: 0.85rem;
}

.btn-block {
    width: 100%;
}

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    color: var(--light-text);
}

.info-box {
    margin-top: 2rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(233, 30, 99, 0.05) 0%, rgba(156, 39, 176, 0.05) 100%);
    border-radius: var(--radius-md);
}

.info-box h4 {
    margin-bottom: 1rem;
    color: var(--primary-pink);
}

.info-box ul {
    list-style: none;
    padding: 0;
}

.info-box li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
    color: var(--light-text);
}

.info-box li:before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--primary-pink);
    font-weight: bold;
}

@media (max-width: 768px) {
    .auth-container {
        padding: 2rem;
    }
}
</style>
{% endblock %}