{% load static %}
{% block solarwinds_servicedesk_configuration_modal %}

<div class="modal fade" id="modalSolarWindsConfiguration" role="dialog">
    <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">
        <div class="modal-content">

            <div class="modal-header">
                <h6 id="hSolarWindsIntegModalTitle" class="modal-title">
                    {{ ttl_solarwinds_servicedesk_integration }}
                </h6>
                <button type="button" class="btn-close size-10" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body px-3 py-2">

                <div class="px-3 py-2 col-md-8">
                    <div class="row mx-0 mb-2 align-items-center">
                        <label class="col-md-5 grey-text size-12 bold-600 px-0 mb-1">
                            {{ ttl_integration_name }}:
                        </label>
                        <div class="col-md-7">
                            <input id="inpSolarWindsIntegrationName" type="text" class="form-control grey-text size-12" disabled>
                        </div>
                    </div>
                </div>

                <div id="divSolarWindsModalBody" class="px-3 py-2 col-md-8">
                    <label class="grey-text size-13 bold-600 mb-3">
                        {{ det_configure_how_taskcall_will_create_solarwinds_servicedesk_ticket }}
                    </label>
                    <div class="row mx-0 mb-2 align-items-center">
                        <label class="col-md-5 grey-text size-12 px-0">
                            {{ det_configuration_name }}:
                        </label>
                        <div class="col-md-7">
                            <input id="inpSolarWindsConfigurationName" type="text" class="form-control grey-text size-12">
                        </div>
                    </div>

                    <div class="row mx-0 mb-2 align-items-center">
                        <label class="col-md-5 grey-text size-12 px-0">
                            {{ det_account }}:
                        </label>
                        <div class="col-md-7">
                            <select id="sltSolarWindsAccount" class="form-select grey-text size-12"></select>
                        </div>
                    </div>

                    <div class="row mx-0 mb-2 align-items-center">
                        <label class="col-md-5 grey-text size-12 px-0">
                            {{ det_category }}:
                        </label>
                        <div class="col-md-7">
                            <select id="sltSolarWindsCategory" class="form-select grey-text size-12"></select>
                        </div>
                    </div>

                    <div class="d-flex flex-row mx-0 my-2 py-2 align-items-center">
                        <div class="form-check">
                            <input id="chkSolarWindsCreateAuto" type="checkbox" class="form-check-input grey-border">
                        </div>

                        <div class="grey-text size-12">
                            {{ det_automatically_create_ticket_for_incidents_with_minimum_urgency }}
                        </div>

                        <div class="ps-2 col-md-3">
                            <select id="sltSolarWindsMinUrgency" class="form-select grey-text size-12">
                                {% include 'urgency_options.html' %}
                            </select>
                        </div>
                    </div>

                    <div class="form-check mb-2 align-items-center">
                        <input id="chkSolarWindsSyncNotes" type="checkbox" class="form-check-input grey-border">
                        <label class="grey-text size-12">
                            {{ det_sync_taskcall_notes_with_solarwinds_servicedesk }}
                        </label>
                    </div>

                    <div class="form-check mb-2 align-items-center">
                        <input id="chkSolarWindsSyncStatuses" type="checkbox" class="form-check-input grey-border">
                        <label class="grey-text size-12">
                            {{ det_sync_taskcall_status_with_solarwinds_servicedesk }}
                        </label>
                    </div>

                    <div id="divSolarWindsStatusMaps" class="mx-0 px-0 mb-2 py-3" hidden>
                        <div class="col-md-8 ps-3 border-start">
                            <div class="row mx-0 mb-2 align-items-center">
                                <label class="col-md-5 grey-text size-12 px-0">{{ sts_open }}</label>
                                <div class="col-md-7">
                                    <select id="sltSolarWindsStsOpen" class="form-select grey-text size-12"></select>
                                </div>
                            </div>

                            <div class="row mx-0 mb-2 align-items-center">
                                <label class="col-md-5 grey-text size-12 px-0">{{ sts_acknowledged }}</label>
                                <div class="col-md-7">
                                     <select id="sltSolarWindsStsPending" class="form-select grey-text size-12"></select>
                                </div>
                            </div>

                            <div class="row mx-0 mb-2 align-items-center">
                                <label class="col-md-5 grey-text size-12 px-0">{{ sts_resolved }}</label>
                                <div class="col-md-7">
                                    <select id="sltSolarWindsStsResolved" class="form-select grey-text size-12"></select>
                                </div>
                            </div>

                        </div>
                    </div>

                    <div class="form-check mb-2 align-items-center">
                        <input id="chkSolarWindsSyncPriorities" type="checkbox" class="form-check-input grey-border">
                        <label class="grey-text size-12">
                            {{ det_sync_taskcall_urgency_with_solarwinds_servicedesk }}
                        </label>
                    </div>

                    <div id="divSolarWindsPriorityMaps" class="mx-0 px-0 mb-2 py-3" hidden>

                        <div class="col-md-8 ps-3 border-start">
                            <div class="row mx-0 mb-2 align-items-center">
                                <label class="col-md-5 grey-text size-12 px-0">{{ opt_critical }}</label>
                                <div class="col-md-7">
                                    <select id="sltSolarWindsPriorityCritical" class="form-select grey-text size-12"></select>
                                </div>
                            </div>

                            <div class="row mx-0 mb-2 align-items-center">
                                <label class="col-md-5 grey-text size-12 px-0">{{ opt_high }}</label>
                                <div class="col-md-7">
                                    <select id="sltSolarWindsPriorityHigh" class="form-select grey-text size-12"></select>
                                </div>
                            </div>

                            <div class="row mx-0 mb-2 align-items-center">
                                <label class="col-md-5 grey-text size-12 px-0">{{ opt_medium }}</label>
                                <div class="col-md-7">
                                    <select id="sltSolarWindsPriorityMedium" class="form-select grey-text size-12"></select>
                                </div>
                            </div>

                            <div class="row mx-0 mb-2 align-items-center">
                                <label class="col-md-5 grey-text size-12 px-0">{{ opt_low }}</label>
                                <div class="col-md-7">
                                    <select id="sltSolarWindsPriorityLow" class="form-select grey-text size-12"></select>
                                </div>
                            </div>

                            <div class="row mx-0 mb-2 align-items-center">
                                <label class="col-md-5 grey-text size-12 px-0">{{ opt_minor }}</label>
                                <div class="col-md-7">
                                    <select id="sltSolarWindsPriorityMinor" class="form-select grey-text size-12"></select>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>

            </div>

            <div class="modal-footer d-flex justify-content-start">
                <button id="btnSolarWindsSaveIntegration" class="plain-btn size-13 custom-btn-sm px-4 mb-1" type="button">
                    {{ ins_save }}
                </button>

                <button class="standard-btn size-13 custom-btn-sm px-3 mb-1" type="button" data-bs-dismiss="modal">
                    {{ ins_cancel }}
                </button>
            </div>

        </div>
    </div>
</div>

{% endblock %}