{% load static %}
{% block new_team_member_modal %}

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

            <div class="modal-content">
                <div class="modal-header">
                    <h6 class="modal-title"> {{ ttl_add_team_member }} </h6>
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                </div>
                <div class="modal-body">
                    <label class="grey-text size-12 semi-bold"> {{ det_select_the_user_to_add_to_your_team }} </label>
                    <div class="row mx-auto mb-3">
                        <select id="sltNewMember" class="form-control grey-text size-12" style="max-width: 250px;"></select>
                        <select id="sltNewMemberRole" class="form-control pl-1 mr-2 mb-1 size-13 align-items-center" style="max-width: 150px;">
                            {% for item in user_role_items %}
                                <option value="{{ item.field_value }}"> {{ item.name }} </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button id="btnTransferRolesModal" type="button" class="btn plain-btn mr-auto" data-dismiss="modal" onclick="addTeamMember()"> {{ ins_add }} </button>
                    <button type="button" class="btn btn-sm plain-btn" data-dismiss="modal"> {{ ins_cancel }} </button>
                </div>
            </div>

        </div>
    </div>

{% endblock %}