{% load static %}
{% block onboarding_routine %}

    <div class="modal fade" id="modalOnbRoutine" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false">
        <div class="modal-dialog modal-dialog-centered modal-md modal-dialog-scrollable position-fixed-right-10">
            <div class="modal-content h-100">
                <div class="modal-header px-3 mx-0 onboarding-modal-bg">
                    <span class="px-2 pt-2 white-text">
                        <label class="d-block py-1 size-15 bold-600 text-uppercase"> {{ ttl_create_routine }} </label>
                    </span>
                    <button id="btnOnbRoutineClose" type="button" class="btn-close btn-close-white size-12"></button>
                </div>

                <div class="modal-body">
                    <div class="px-2">
                        {% include 'tutorials/onboarding_progress_bar.html' with step1="completed" step2="active" %}

                        <div class="py-2">
                            <label class="d-block pb-1 size-13 bold-600 grey-text">
                                {{ onb_routine_dynamic_rotation }}
                                <i class="size-11"> {{ onb_routine_add_others_later }} </i>
                            </label>
                        </div>

                        <div class="py-2">
                            <label class="d-block py-1 mb-2 size-13 light-grey-text"> {{ det_name_the_routine }} </label>
                            <input id="inpOnbRoutineName" type="text" class="form-control grey-text size-12 bold-600" placeholder="e.g. Operations Routine, Customer Support Routine...">
                        </div>

                        <div class="py-2">
                            <label class="d-block py-1 mb-2 size-13 light-grey-text"> {{ onb_qq_how_long_are_on_call_shifts }} </label>
                            <div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="radioOnbRoutineLayers" id="onbRoutineShift24" value="24" type="radio" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-12" id="lblOnbShift24" for="onbRoutineShift24"> {{ det_24_hours }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="radioOnbRoutineLayers" id="onbRoutineShift12" value="12" type="radio" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-12" id="lblOnbShift12" for="onbRoutineShift12"> {{ det_12_hours }} </label>
                                </div>
                            </div>
                        </div>

                        <div class="py-2">
                            <label class="d-block py-1 mb-2 size-13 light-grey-text"> {{ onb_qq_how_often_rotate_on_call }} </label>
                            <div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="radioOnbRoutineRotation" id="onbRoutineRotateDaily" value=1 type="radio" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-12" for="onbRoutineRotateDaily"> {{ det_daily }} </label>
                                </div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="radioOnbRoutineRotation" id="onbRoutineRotateWeekly" value=7 type="radio" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-12" for="onbRoutineRotateWeekly"> {{ det_weekly }} </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div class="modal-footer px-4 d-flex justify-content-start">
                    <button id="btnOnbRoutineProcess" class="btn purple-btn size-14 px-4 py-2 mb-1" type="button"> {{ ins_next }} </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}