<title>
    <%= title ? title : 'Book Appointment' %>
</title>

<%- include('../partials/header.ejs') %>
    <div class="step-progress progress" role="progressbar" aria-label="Basic example" aria-valuenow="25"
        aria-valuemin="0" aria-valuemax="100">
        <div class="progress-bar" style="width: 25%"></div>
    </div>
    <div class="steps-area">

        <div class="step-header">
            <div class="container">
                <ul>
                    <li class="done-step"><span class="step-num"><i class="fa-solid fa-check"></i></span><span
                            class="step-name">Create profile
                        </span></li>
                    <li class="active-step"><span class="step-num">2</span><span class="step-name">Personal information
                        </span></li>
                    <li><span class="step-num">3</span><span class="step-name">Insurance & Billing</span></li>
                    <li><span class="step-num">4</span><span class="step-name">Consents</span></li>
                </ul>
            </div>
        </div>

        <div class="step-form pb-5 pt-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-4">
                        <a href="intake-account"><i class="fa-solid fa-arrow-left"></i> Back</a>
                    </div>
                    <div class="col-md-4">
                        <div class="sf-area">
                            <div class="sf-heading">
                                <h4>Tell us about yourself</h4>
                                <p>We're so glad you're here! Tell us a little about yourself so that we can share with
                                    your
                                    provider.</p>
                            </div>
                            <div class="acc-form">
                                <div class="mb-4">
                                    <label for="choose-f-name" class="form-label">What is your chosen name?</label>
                                    <input type="text" class="form-control" id="choose-f-name"
                                        placeholder="Chosen first name">
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">What are your pronouns?</label>
                                    <select class="form-select" aria-label="Default select example">
                                        <option selected>Select any</option>
                                        <option value="">She/her</option>
                                        <option value="">He/him</option>
                                        <option value="">They/them</option>
                                        <option value="">Not represented here</option>
                                        <option value="">Prefer not to say</option>
                                    </select>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">What is your gender identity?</label>
                                    <select class="form-select" aria-label="Default select example">
                                        <option selected>Select any</option>
                                        <option value="">Male</option>
                                        <option value="">Female</option>
                                        <option value="">Transgender Male</option>
                                        <option value="">Transgender Female</option>
                                        <option value="">Genderqueer</option>
                                        <option value="">I don't see my gender listed</option>
                                        <option value="">I prefer not to say</option>
                                    </select>
                                </div>

                                <div class="mb-4">
                                    <label class="form-label">How did you hear about us?</label>
                                    <select class="form-select" aria-label="Default select example">
                                        <option selected>Select any</option>
                                        <option value="">Behavioral Health Provider</option>
                                        <option value="">Friend or family member</option>
                                        <option value="">Hospital</option>
                                        <option value="">My primary care provider</option>
                                        <option value="">OBGYN</option>
                                        <option value="">Pain Management Doctor</option>
                                        <option value="">Search engine (Google, Bing, etc.)</option>
                                        <option value="">Psychology Today</option>
                                        <option value="">Social media</option>
                                        <option value="">Zocdoc</option>
                                        <option value="">Alexandria</option>
                                        <option value="">CCRM Fertility</option>
                                        <option value="">Galileo</option>
                                        <option value="">IronWorkers</option>
                                        <option value="">Quartet</option>
                                        <option value="">PPP</option>
                                    </select>
                                </div>

                                <div class="mb-4">
                                    <label for="anything-else" class="form-label">Anything you want to share?</label>
                                    <textarea class="form-control" id="anything-else" rows="5"
                                        placeholder="Tell us about..."></textarea>
                                </div>

                                <div class="sf-cont">
                                    <a href="intake-reason" class="blue-btn btn-style">Continue</a>
                                    <div class="already-acc">
                                        Already have an account? <a href="#">Sign in</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- Include footer partial -->
        <%- include('../partials/footer.ejs') %>