<!-- DATA EDITOR MODAL -->
<div class="modal fade" id="data-editor-modal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" style="width: 1000px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"><i class="fa fa-edit"></i> Data Editor</h4>
            </div>
            <form id="data-form">
                <div class="modal-body">
                    <div class="form-group">
                        <div class="input-group">
                            <span class="input-group-addon">Group:</span>
                            <input name="group" id="data-modal-group" readonly="readonly" type="text"
                                   class="form-control" placeholder="Group Name">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">Name:</span>
                            <input name="name" id="data-modal-name" type="text" class="form-control"
                                   placeholder="Data Name">
                        </div>
                        <input name="origin_name" id="data-modal-origin-name" value="" type="hidden">
                    </div>
                    <div class="nav-tabs-custom">
                        <ul class="nav nav-tabs">
                            <li class="active"><a href="#tab_req" data-toggle="tab">Request</a></li>
                            <li><a href="#tab_req_data" data-toggle="tab">RequestData</a></li>
                            <li><a href="#tab_resp" data-toggle="tab">Response</a></li>
                            <li><a href="#tab_resp_data" data-toggle="tab">ResponseData</a></li>
                            <li class="pull-right"><a href="#" class="text-muted"><i class="fa fa-gear"></i></a></li>
                        </ul>
                        <div class="tab-content">
                        <!--超出宽度自动换行、超出高度，加滚动条 -->
                            <div class="tab-pane active row pre-scrollable" style="word-wrap:break-word" id="tab_req">
                                 <div id="data-modal-req" class="form-control" placeholder=""
                                        style="height: 400px; border:0px"></div>
                                 <input name="req" id="req-val" type="hidden"/>
                                 </div><!-- /.tab-pane -->
                            <div class="tab-pane row pre-scrollable" style="word-wrap:break-word" id="tab_req_data">
                                 <div id="data-modal-req-data" class="form-control" placeholder=""
                                        style="height: 400px; border:0px"></div>
                                 <input name="req_data" id="req-data-val" type="hidden"/>
                            </div><!-- /.tab-pane -->
                            <div class="tab-pane row pre-scrollable" style="word-wrap:break-word" id="tab_resp">
                                 <div id="data-modal-resp" class="form-control" placeholder=""
                                        style="height: 400px; border:0px"></div>
                                 <input name="resp" id="resp-val" type="hidden"/>
                            </div><!-- /.tab-pane -->
                            <div class="tab-pane row pre-scrollable" style="word-wrap:break-word" id="tab_resp_data">
                                 <div id="data-modal-resp-data" class="form-control" placeholder=""
                                        style="height: 400px; border:0px"></div>
                                 <input name="resp_data" id="resp-data-val" type="hidden"/>
                            </div><!-- /.tab-pane -->
                        </div><!-- /.tab-content -->
                    </div><!-- nav-tabs-custom -->
                </div>
                <div class="modal-footer clearfix">

                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Cancel
                    </button>

                    <button type="button" class="btn btn-primary pull-left" onclick="addData()"><i
                            class="fa fa-save"></i> Save
                    </button>
                </div>
            </form>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
