{% load static %}
{% block onboarding_escalation_policy %}

    <div class="modal fade" id="modalOnbEscPol" 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_escalation_policy }} </label>
                    </span>
                    <button id="btnOnbEscPolClose" 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="completed" step3="active" %}

                        <div class="pt-2">
                            <label class="d-block pb-1 size-13 bold-600 grey-text">
                                {{ onb_escalation_policy_two_levels_of_support }}
                            </label>
                        </div>

                        <div class="py-2">
                            <label class="d-block py-1 size-13 light-grey-text"> {{ det_name_the_escalation_policy }} </label>
                            <input id="inpOnbEscPolName" type="text" class="form-control grey-text size-12 bold-600" placeholder="e.g. Ops Fatal, Core Fatal...">
                        </div>


                        <div class="py-2">
                            <label class="d-block py-1 mb-2 size-13 light-grey-text">
                                {{ onb_escalation_policy_choose_routine_or_user }}
                            </label>
                            <div>
                                <div class="form-group row">
                                    <label for="sltOnbEscPolLevelOne" class="col-md-2 mb-2 size-13 bold-600 col-form-label"> {{ det_level }} 1 </label>
                                    <div class="col-md-7">
                                        <select class="form-select form-control size-13" id="sltOnbEscPolLevelOne"></select>
                                    </div>
                                </div>
                                <div class="form-group row size-12">
                                    <label for="sltOnbEscPolLevelTwo" class="col-md-2 mb-2 size-13 bold-600 col-form-label"> {{ det_level }} 2 </label>
                                    <div class="col-md-7">
                                        <select class="form-select form-control size-13" id="sltOnbEscPolLevelTwo"></select>
                                    </div>
                                </div>
                            </div>
                        </div>


                        <div class="py-2">
                            <label class="d-block py-1 mb-2 size-13 light-grey-text"> {{ onb_escalation_policy_auto_escalate }}: </label>
                            <div>
                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="radioOnbEscPolMinutes" id="onbEscPolTenMinutes" value=10 type="radio" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-12" for="onbEscPolTenMinutes"> {{ det_10_minutes }} </label>
                                </div>

                                <div class="form-check form-check-inline px-0 me-2 mb-2">
                                    <input class="btn-check" name="radioOnbEscPolMinutes" id="onbEscPolFifteenMinutes" value=15 type="radio" hidden/>
                                    <label class="btn btn-sm btn-outline-primary size-12" for="onbEscPolFifteenMinutes"> {{ det_15_minutes }} </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>


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

{% endblock %}