{% load static %}
{% block onboarding_service %}

    <div class="modal fade" id="modalOnbIntegration" 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_add_integration }} </label>
                    </span>
                    <button id="btnOnbIntegrationClose" 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="completed" step4="active" %}

                        <div class="pt-2">
                            <label class="d-block pb-1 size-13 grey-text"> {{ onb_integration_add }}: </label>
                            <ol class="size-13 grey-text">
                                <li> {{ onb_integration_email_or_external_platform }} </li>
                                <li> {{ onb_integration_chat }} </li>
                                <li> {{ onb_integration_run_jobs }} </li>
                                <li> {{ onb_integration_custom_actions }} </li>
                            </ol>
                        </div>

                        <div class="py-3">
                            <label class="d-block pb-1 bold-600 size-13 light-grey-text"> {{ onb_service_set_up_email_integration }} </label>
                            <div class="input-group">
                                <input id="inpOnbServiceEmail" type="text" class="form-control size-12 col-md-4" placeholder="e.g. support">
                                <span id="spnOnbFullDomain" class="input-group-text size-12 bold-600"></span>
                            </div>
                        </div>
                    </div>
                </div>


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

{% endblock %}