{% load static %}
{% block search_phone_number_modal %}

    <div class="modal fade" id="searchPhoneNumberModal" role="dialog">
        <div class="modal-dialog modal-dialog-centered">

            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"> {{ det_search_phone_number }} </h6>
                    <button id="btnCloseSearchPhoneNumberModal" type="button" class="btn-close size-10" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <div class="border-bottom pb-3">
                        <div class="row">
                            <div class="col-md-5 mb-2">
                                <label class="grey-text size-13 bold-600 mb-2"> {{ ttl_country }} </label>
                                <select id="sltSearchCountry" class="form-select form-control size-12 grey-border grey-text"></select>
                            </div>

                            <div class="col-md-4 mb-2">
                                <label class="grey-text size-13 bold-600 mb-2"> {{ ttl_area_code }} </label>
                                <input id="inpSearchAreaCode" type="number" class="form-control ps-1 size-12 align-items-center grey-border grey-text" min="0">
                            </div>
                        </div>

                        <div id="divRadioPhoneNumberTypes" class="row mx-0 my-3">
                            <div class="col-md-4 form-check mt-1 mb-3">
                                <input id="radioLocal" type="radio" name="radioPhoneType" value="LOCAL" class="form-check-input grey-border tc-cursor" checked>
                                <label class="form-check-label grey-text size-13 ps-1" for="radioLocal"> {{ det_local }} </label>
                            </div>
                            <div class="col-md-4 form-check mt-1 mb-3">
                                <input id="radioMobile" type="radio" name="radioPhoneType" value="MOBILE" class="form-check-input grey-border tc-cursor">
                                <label class="form-check-label grey-text size-13 ps-1" for="radioMobile"> {{ det_mobile }} </label>
                            </div>
                            <div class="col-md-4 form-check mt-1 mb-3">
                                <input id="radioTollFree" type="radio" name="radioPhoneType" value="TOLL_FREE" class="form-check-input grey-border tc-cursor">
                                <label class="form-check-label grey-text size-13 ps-1" for="radioTollFree"> {{ det_toll_free }} </label>
                            </div>
                        </div>

                        <button id="btnSearchNumber" class="plain-btn size-13 px-2 mb-2 w-50" type="button"> {{ det_search_phone_number }} </button>
                    </div>

                    <div id="divPhoneSearchResults" class="col-md-8 py-3"></div>
                </div>
            </div>
        </div>
    </div>

{% endblock %}