{% extends "base.html" %}

{% block content %}
    <h1>Add New Client</h1>
    <form method="POST">
        <div class="form-group">
            <label>Client ID (Center Case ID)</label>
            <div class="input-group">
                <div class="input-group-prepend">
                    <span class="input-group-text">{{ prefix }}</span>
                </div>
                <input type="text" id="case_id_suffix" name="case_id_suffix" class="form-control" placeholder="Enter ID suffix" required>
            </div>
            <small class="form-text text-muted">Starts with your 5-letter prefix shown, followed by your custom suffix (alphanumeric and symbols like - _ . allowed).</small>
        </div>
        <div class="form-group">
            <label for="name">Name</label>
            <input type="text" id="name" name="name" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="email">Email (optional)</label>
            <input type="email" id="email" name="email" class="form-control">
        </div>
        <div class="form-group">
            <label for="date_of_birth">Date of Birth</label>
            <input type="date" id="date_of_birth" name="date_of_birth" class="form-control" required>
        </div>
        <div class="form-group">
            <label for="phone_number">Phone Number (optional)</label>
            <input type="tel" id="phone_number" name="phone_number" class="form-control">
        </div>
        
        <div class="form-group">
            <label for="gender">Gender</label>
            <select id="gender" name="gender" class="form-control" required>
                <option value="" disabled selected>Select Gender</option>
                <option value="Male">Male</option>
                <option value="Female">Female</option>
                <option value="Other">Other</option>
            </select>
        </div>
        <div class="form-group form-check">
            <input type="checkbox" class="form-check-input" id="skip_details_collection" name="skip_details_collection">
            <label class="form-check-label" for="skip_details_collection">Client details are final (skip confirmation before assessment)</label>
        </div>
        <button type="submit" class="btn btn-primary">Add Client</button>
    </form>
{% endblock %}