{% load static %}
{% block onboarding_welcome %}

    <div class="modal fade" id="modalOnbWelcome" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-xl modal-dialog-scrollable">
            <div class="modal-content h-100">
                <div class="modal-header px-3 mx-0 onboarding-modal-bg">
                    <span class="px-2 py-1 white-text">
                        <label class="d-block py-1 size-22 bold-600 text-uppercase"> {{ onb_welcome_to_taskcall }} </label>
                        <label class="d-block py-1 size-15 bold-600"> {{ onb_starting_note }} </label>
                    </span>
                    <button id="btnOnbWelcomeClose" type="button" class="btn-close btn-close-white size-12"></button>
                </div>

                <div class="modal-body">
                    <div class="px-2">
                        <div class="pt-1 pb-3 border-bottom">
                            <label class="d-block py-1 mb-2 size-14 bold-600 light-grey-text"> {{ onb_qq_what_describes_an_incident }} </label>
                            <div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncDescription" id="onbIncDescApp" value="A11" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbIncDescApp"> {{ onb_application_programming_errors }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncDescription" id="onbIncDescTech" value="A12" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbIncDescTech"> {{ onb_technical_issues }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncDescription" id="onbIncDescSupQuery" value="A13" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbIncDescSupQuery"> {{ onb_support_queries }} </label>
                                </div>
                            </div>
                        </div>


                        <div class="py-3 border-bottom">
                            <label class="d-block py-1 mb-2 size-14 bold-600 light-grey-text"> {{ onb_qq_how_are_incidents_detected }} </label>
                            <div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncDetection" id="onbDetectionInteg" value="A21" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbDetectionInteg"> {{ onb_monitoring_applications }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncDetection" id="onbDetectionInternal" value="A22" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbDetectionInternal"> {{ onb_catch_own_errors }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncDetection" id="onbDetectionCustomers" value="A23" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbDetectionCustomers"> {{ onb_customers_people_notify_us }} </label>
                                </div>
                            </div>
                        </div>


                        <div class="py-3 border-bottom">
                            <label class="d-block py-1 mb-2 size-14 bold-600 light-grey-text"> {{ onb_qq_how_are_incidents_notified }} </label>
                            <div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncNotification" id="onbNotfEmail" value="A31" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbNotfEmail"> {{ onb_email }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncNotification" id="onbNotfChat" value="A32" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbNotfChat"> {{ onb_chat }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncNotification" id="onbNotfTicket" value="A33" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbNotfTicket"> {{ onb_ticket }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="onbIncNotification" id="onbNotfCall" value="A34" type="checkbox" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-13" for="onbNotfCall"> {{ onb_phone_call }} </label>
                                </div>
                            </div>
                        </div>


                        <div class="py-3">
                            <label class="d-block py-1 mb-2 size-14 bold-600 light-grey-text"> {{ onb_qq_what_problems_you_face }} </label>
                            <div class="size-13 light-grey-text">
                                <label class="py-1 mb-2 size-12"> {{ onb_ttl_on_call_management }} </label>
                                <div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onProbSchedule" value="A41" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onProbSchedule"> {{ onb_schedule_manual }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onProbRoster" value="A42" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onProbRoster"> {{ onb_find_contact_from_roster }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbEsc" value="A43" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbEsc"> {{ onb_escalation_none }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbDynamic" value="A44" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbDynamic"> {{ onb_cannot_delegate_dynamically }} </label>
                                    </div>
                                </div>


                                <br/>
                                <label class="py-1 mb-2 size-11"> {{ onb_ttl_incident_management }} </label>
                                <div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbIncDelay" value="A45" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbIncDelay"> {{ onb_incident_delay }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbLoseTrack" value="A46" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbLoseTrack"> {{ onb_incident_lose_track }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbLongResolve" value="A47" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbLongResolve"> {{ onb_take_too_long_to_resolve }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbInterrupt" value="A48" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbInterrupt"> {{ onb_responders_interrupted }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbImpVisibility" value="A49" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbImpVisibility"> {{ onb_impact_visibility }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbStatUpdate" value="A410" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbStatUpdate"> {{ onb_struggle_to_keep_managers_updated }} </label>
                                    </div>
                                </div>


                                <br/>
                                <label class="py-1 mb-2 size-11"> {{ onb_ttl_customer_internal_support }} </label>
                                <div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbSuppUnaware" value="A411" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbSuppUnaware"> {{ onb_customer_support_unaware }} </label>
                                    </div>
                                    <div class="form-check form-check-inline px-0 me-2 mb-2">
                                        <input class="btn-check" name="onbProblem" id="onbProbCallStatic" value="A412" type="checkbox" hidden/>
                                        <label class="btn btn-sm btn-outline-primary size-12" for="onbProbCallStatic"> {{ onb_incoming_call_static }} </label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal-footer px-4 d-flex justify-content-start">
                    <button id="btnOnbWelcomeStart" class="btn purple-btn size-14 custom-btn-sm px-5 py-2 mb-1" type="button"> {{ onb_start_onboarding }} </button>
                    <button id="btnOnbWelcomeSkip" class="btn btn-link size-14 bold-600 custom-btn-sm py-2 mb-1 light-grey-text" type="button"> {{ onb_skip_this }} </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}