{% load static %}
{% block onboarding_incident %}

    <div class="modal fade" id="modalOnbIncident" 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 text-white">
                        <label class="d-block py-1 size-15 bold-600 text-uppercase"> {{ ttl_create_incident }} </label>
                    </span>
                    <button id="btnOnbIncidentClose" 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="completed" step5="active" %}

                        <div class="pt-1 pb-2">
                            <label class="light-grey-text text-uppercase semi-bold size-12 mb-2"> {{ dsm_by_email }} </label>
                            <label class="d-block py-1 size-12 light-grey-text">
                                {{ onb_incident_send_email }}: <strong id="onbIncEmailAddr" class="bold-600 size-13"></strong>
                            </label>
                        </div>


                        <div class="py-2">
                            <label class="light-grey-text text-uppercase semi-bold size-12 mb-2"> {{ dsm_by_api_call }} </label>
                            <div class="py-2 size-13">
                                <label class="d-block mb-2"> {{ onb_incident_save_api_key }} </label>
                                <div class="row mx-0 size-11 px-2 py-2 rounded white-text deep-blue-bg">
                                    <div id="onbNewApiKey" class="col-md-11 text-wrap tc-word-break-all"></div>
                                    <button id="btnOnbIncidentCopyApiKey" class="col-md-1 btn btn-sm size-13 px-1 align-self-start">
                                        <span class="feather-13 justify-content-start white-text" data-feather="copy"></span>
                                    </button>
                                </div>
                            </div>
                            <div class="py-2 size-13">
                                <label class="d-block mb-2"> {{ onb_incident_copy_curl_command }} </label>
                                <div class="row mx-0 size-11 px-2 py-3 rounded white-text deep-blue-bg">
                                    <div class="col-md-11 text-wrap tc-word-break-all">
                                        curl -H "Authorization: token <span id="onbCmdApiKey"></span>" -H "Content-Type: application/json" -X POST -d "{\"title\":\"Server 5 Impacted\",\"service_ref_id\":\"<span id="onbCmdSrvRef"></span>\",\"urgency_level\":4}" <span id="onbCmdIncApiUrl"></span>
                                    </div>
                                    <button id="btnOnbIncidentCopyCurlCmd" class="col-md-1 btn btn-sm size-13 px-1 align-self-start">
                                        <span class="feather-13 justify-content-start text-white" data-feather="copy"></span>
                                    </button>
                                </div>
                            </div>
                        </div>


                        <div class="pt-1 py-2">
                            <label class="light-grey-text text-uppercase semi-bold size-12 mb-2"> {{ dsm_by_integration }} </label>
                            <label class="d-block py-1 size-12 light-grey-text">
                                {{ onb_incident_select_integration }} <a href="https://taskcallapp.com/integrations" target="_blank">{{ dsm_documentation }}</a>.
                            </label>
                        </div>
                    </div>
                </div>


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

{% endblock %}