{% load static %}
{% block people_details_modal %}

    <div class="modal fade" id="modalPersonDetails" role="dialog">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h6 id="hPeopleDetailsModalTitle" class="modal-title"> </h6>
                    <button type="button" class="btn-close size-10" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="row">
                            <div class="col-lg-6 form-group mb-3">
                                <label for="inpFirstName" class="form-label size-13"> {{ ttl_first_name }} </label>
                                <input id="inpFirstName" type="text" class="form-control grey-control size-12" aria-describedby="FirstName">
                            </div>
                            <div class="col-lg-6 form-group mb-3">
                                <label for="inpLastName" class="form-label size-13"> {{ ttl_last_name }} </label>
                                <input id="inpLastName" type="text" class="form-control grey-control size-12" aria-describedby="LastName">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-6 form-group mb-3">
                                <label for="inpTitle" class="form-label size-13"> {{ det_title }} </label>
                                <input id="inpTitle" type="text" class="form-control grey-control size-12" aria-describedby="Title">
                            </div>
                            <div class="col-lg-6 form-group mb-3">
                                <label for="sltGroups" class="form-label size-13"> {{ det_group }} </label>
                                <select id="sltGroups" class="form-control selectpicker" data-style="grey-text form-control-border size-12" data-size="10" data-live-search="true"></select>
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-lg-6 form-group mb-3">
                                <label for="inpEmail" class="form-label size-13"> {{ ttl_email }} </label>
                                <input id="inpEmail" type="text" class="form-control grey-control size-12" aria-describedby="Email">
                            </div>
                            <div class="col-lg-6 form-group mb-3">
                                <label for="inpPhone" class="form-label size-13"> {{ det_phone }} </label>
                                <input id="inpPhone" type="tel" class="form-control grey-control size-12" aria-describedby="Phone">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer d-flex justify-content-start">
                    <button id="btnSavePerson" type="button" class="plain-btn" data-bs-dismiss="modal"> </button>
                    <button type="button" class="standard-btn" data-bs-dismiss="modal"> {{ ins_cancel }} </button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}