<title>
    <%= title ? title : 'Book Appointment' %>
</title>

<%- include('../partials/header.ejs') %>
    <div class="booked-area">
        <div class="container">
            <div class="row">
                <div class="col-md-4 offset-md-4">
                    <div class="booked-icn">
                        <img src="images/cancel-appoi.svg" alt="img">
                    </div>

                    <div class="sf-heading">
                        <h4>Why are you looking to cancel your appointment</h4>
                    </div>

                    <div class="cancel-form">
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="c-reason" id="c-reason1">
                            <label class="form-check-label" for="c-reason1">
                                I have a scheduling conflict
                            </label>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="c-reason" id="c-reason2">
                            <label class="form-check-label" for="c-reason2">
                                I no longer need the appointment
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="c-reason" id="c-reason3">
                            <label class="form-check-label" for="c-reason3">
                                I am not able to attend due to transportation issues
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="c-reason" id="c-reason4">
                            <label class="form-check-label" for="c-reason4">
                                I am not able to attend due to an illness
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="c-reason" id="c-reason5">
                            <label class="form-check-label" for="c-reason5">
                                The appointment was booked incorrectly
                            </label>
                        </div>

                        <div class="form-check">
                            <input class="form-check-input" type="radio" name="c-reason" id="c-reason6">
                            <label class="form-check-label" for="c-reason6">
                                Other
                            </label>
                        </div>

                        <div class="sf-cont">
                            <button type="button" class="blue-btn btn-style">Continue</button>
                        </div>
                    </div>


                </div>
            </div>
        </div>
    </div>
    <!-- Include footer partial -->
    <%- include('../partials/footer.ejs') %>