<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Terms Management</title>
  <link rel="icon" href="{{ url_for('static', filename='image/ail-icon.png') }}">

  <!-- Core CSS -->
  <link href="{{ url_for('static', filename='css/bootstrap.min.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='font-awesome/css/font-awesome.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/sb-admin-2.css') }}" rel="stylesheet">
  <link href="{{ url_for('static', filename='css/dataTables.bootstrap.css') }}" rel="stylesheet" type="text/css" />
  <link href="{{ url_for('static', filename='css/switch_checkbox.css') }}" rel="stylesheet" type="text/css" />
  <script language="javascript" src="{{ url_for('static', filename='js/jquery.js')}}"></script>
  <script src="{{ url_for('static', filename='js/bootstrap.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.dataTables.min.js') }}"></script>
  <script src="{{ url_for('static', filename='js/dataTables.bootstrap.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.flot.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.flot.time.js') }}"></script>
  <script src="{{ url_for('static', filename='js/jquery.flot.stack.js') }}"></script>

  <style>
      .sparkLineStats ul {
          padding-left:0;
          list-style:none
      }

      .btn-link {
          color: #000000
      }

      .popover-content {
         white-space:pre-wrap;
         word-wrap:break-word;
      }
      .mouse_pointer{
				cursor: pointer;
			}
      .lb-md {
        font-size: 16px;
      }
  </style>
</head>
<body>

    <!-- Modal -->
    <div id="mymodal" class="modal fade" role="dialog">
      <div class="modal-dialog modal-lg">

        <!-- Modal content-->
        <div id="mymodalcontent" class="modal-content">
          <div id="mymodalbody" class="modal-body" max-width="8500px">
            <p>Loading paste information...</p>
            <img id="loading-gif-modal" src="{{url_for('static', filename='image/loading.gif') }}" height="26" width="26" style="margin: 4px;">
          </div>
          <div class="modal-footer">
            <a id="button_show_plot" target="_blank" href=""><button type="button" class="btn btn-info">Plot term</button></a>
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

   {% include 'navbar.html' %}

<div id="page-wrapper">
  <div class="row">
      <div class="col-lg-12">
          <h1 class="page-header" data-page="page-termsfrequency" >Terms frequency: Management interface</h1>
      </div>
      <!-- /.col-lg-12 -->
  </div>
    <!-- /.row -->
    <div class="row">

    <!-- Panel OPTIONS -->
    <div class="row">
        <div class="col-lg-12">
            <div class="row">
              {% set uniq_id = namespace(modal_id=0)%}
                <div class="col-lg-12">
                   <label class="switch">
                       <input id="per_paste" class="switch-input" value="per_paste" type="checkbox" onclick="reload_per_paste()">
                       <span class="switch-label" data-on="On" data-off="Off"></span>
                       <span class="switch-handle"></span>
                   </label>
                   <strong style="top: 3px; position: relative;">1 term per paste</strong>

                    <div id="panel-today" class="panel panel-success">
                        <div class="panel-heading">
                            <strong>Manage tracked terms</strong>
                        </div>
                        <div class="panel-body">

                            <div style="margin-bottom: 10px;">
                                <table>
                                    <tr><td><b>Regex</b>: surround the term by '<b>/</b>'. </td> <td><b style="margin-left: 20px;">/([a-z])\w+([a-z])\n/</b></td></tr>
                                    <tr><td><b>Set of terms</b>: surround the list by '<b>\</b>'. </td> <td><b style="margin-left: 20px;">\[term1, term2, ...]\</b></td></tr>
                                    <tr><td> - To set a custom matching <b>threshold</b> (defaut=50), append it at the end as a inner list '<b>[thresh]</b>'. </td> <td><b style="margin-left: 20px;">\[term1, term2, ..., [75]]\</b></td></tr>
                                </table>
                            </div>
                            <div class="form-group input-group" style="margin-bottom: 30px;">
                                <span class="input-group-addon"><span class="fa fa-eye"></span></span>
                                <input id="followTermInput" class="form-control" placeholder="Term to track." type="text" style="max-width: 400px;">
                                <input id="followTermEMailNotificationReceiversInput" class="form-control" placeholder="Notification E-Mails (optional, space separated)" type="text" style="max-width: 400px;">
                                <input id="followTermTag" class="form-control" placeholder="Tags (optional, space separated)" type="text" style="max-width: 400px;">
                                <button id="followTermBtn" class="btn btn-success btn-interaction" style="margin-left: 10px;" data-section="followTerm" data-action="add"> Add term</button>
                            </div>

                            <table class="table table-striped table-bordered table-hover" id="myTable">
                                <thead>
                                     <tr>
                                        <th style="max-width: 800px;">Term</th>
                                        <th>Added date</th>
                                        <th>Day occurence</th>
                                        <th>Week occurence</th>
                                        <th>Month occurence</th>
                                        <th># tracked paste</th>
                                        <th>Action</th>
                                        <th>Notification E-Mails</th>
                                     </tr>
                                </thead>
                                <tbody>
                                <!-- SET -->
                                {% for set in trackSet_list %}
                                  <tr style="background-color: #cdffca;">
                                      <td>
                                          <span class="term_name">{{ set }}</span>
                                          <div>
                                            {% for tag in notificationTagsTermMapping[set] %}
                                            <a href="{{ url_for('Tags.Tags_page') }}?ltags={{ tag }}">
                                              <span class="label label-{{ bootstrap_label[loop.index0 % 5] }} pull-left">{{ tag }}</span>
                                            </a>
                                            {%  endfor %}
                                            {% if notificationTagsTermMapping[set] %}
                                              <div class="btn-link btn-interaction pull-right mouse_pointer" data-toggle="modal" data-target="#edit_custom_tag_modal_{{ uniq_id.modal_id }}" data-placement="right" title="Edit Tags List"><i class="fa fa-pencil" style="color:Red;"></i></div>

                                              <div id="edit_custom_tag_modal_{{ uniq_id.modal_id }}" class="modal fade" role="dialog">
                                      					<div class="modal-dialog">

                                      						<!-- Modal content-->
                                      						<div id="mymodalcontent" class="modal-content">
                                      							<div class="modal-header" style="border-bottom: 4px solid #48c9b0; background-color: #48c9b0; color: #ffffff;">
                                      								<h2 class="text-center">Remove Custom Tag</h2>

                                      							</div>

                                      							<div class="modal-body">
                                                      <form action="{{ url_for('terms.delete_terms_tags') }}" id="checkboxForm" method='post'>
                                                        {% for tag in notificationTagsTermMapping[set] %}
                                                          <div class="form-check">
                                                             <input type="hidden" class="form-control" name="term" value="{{ set }}">
                                                            <input type="checkbox" class="form-check-input" name="tags_to_delete" value="{{ tag }}">
                                                            <label class="form-check-label">
                                                              <span class="label label-{{ bootstrap_label[loop.index0 % 5] }} lb-md">{{ tag }}</span>
                                                            </label>
                                                            <br>
                                                          </div>
                                                        {%  endfor %}
                                                      </form>
                                      							</div>

                                      							<div class="modal-footer">
                                      								<button class="btn btn-danger" type="submit" form="checkboxForm" value="Submit">
                                      										<span class="glyphicon glyphicon-trash"></span>
                                      										<span class="label-icon">Remove Tags</span>
                                      								</button>
                                      								<button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>

                                      							</div>
                                      						</div>
                                      					</div>
                                      				</div>
                                              {% set uniq_id.modal_id = uniq_id.modal_id + 1 %}
                                            {%  endif %}
                                          </div>
                                      </td>
                                      <td>{{ trackSet_list_values[loop.index0][3] }}</td>
                                      <td>{{ trackSet_list_values[loop.index0][0] }}</td>
                                      <td>{{ trackSet_list_values[loop.index0][1] }}</td>
                                      <td>{{ trackSet_list_values[loop.index0][2] }}</td>
                                      <td>{{ trackSet_list_num_of_paste[loop.index0] }}</td>
                                      <td><p style="margin: 0px; white-space: nowrap;">
                                          <span data-toggle="modal" data-target="#mymodal" data-term="{{ set }}" ><button class="btn-link" data-toggle="tooltip" data-placement="right" title="Show concerned paste(s)"><span class="glyphicon glyphicon-info-sign"></span></button></span>
                                          <button class="btn-link btn-interaction" data-toggle="tooltip" data-placement="left" title="Remove this term" data-content="{{ set }}" data-section="followTerm" data-action="delete"><span class="glyphicon glyphicon-trash"></span></button>
                                          &nbsp; &nbsp;<input id="checkBoxEMailAlerts" type="checkbox" title="Toggle E-Mail notifications" class="btn-link btn-interaction" data-content="{{ set }}" data-section="followTerm" data-action="toggleEMailNotification" {% if notificationEnabledDict[set] %} checked {% endif %}>
                                      </p></td>
                                      <td>
                                        {% for email in notificationEMailTermMapping[set] %}
                                          <a href="{{ url_for('terms.delete_terms_email') }}?email={{email}}&term={{set}}">
                                            <div class="btn-link btn-interaction pull-right mouse_pointer" data-toggle="tooltip" data-placement="left" data-original-title="Remove this email">
                                                <span class="glyphicon glyphicon-trash" style="color:Red;" ></span>
                                            </div>
                                          </a>
                                          {{ email }}
                                          <br>
                                        {%  endfor %}
                                      </td>
                                  </tr>
                                {% endfor %}
                                <!-- REGEX -->
                                {% for regex in trackReg_list %}
                                  <tr style="background-color: #fffdca;">
                                      <td>
                                          <span class="term_name">{{ regex }}</span>
                                          <div>
                                            {% for tag in notificationTagsTermMapping[regex] %}
                                            <a href="{{ url_for('Tags.Tags_page') }}?ltags={{ tag }}">
                                              <span class="label label-{{ bootstrap_label[loop.index0 % 5] }} pull-left">{{ tag }}</span>
                                            </a>
                                            {%  endfor %}
                                            {% if notificationTagsTermMapping[regex] %}
                                              <div class="btn-link btn-interaction pull-right mouse_pointer" data-toggle="modal" data-target="#edit_custom_tag_modal_{{ uniq_id.modal_id }}" data-placement="right" title="Edit Tags List"><i class="fa fa-pencil" style="color:Red;"></i></div>

                                              <div id="edit_custom_tag_modal_{{ uniq_id.modal_id }}" class="modal fade" role="dialog">
                                      					<div class="modal-dialog">

                                      						<!-- Modal content-->
                                      						<div id="mymodalcontent" class="modal-content">
                                      							<div class="modal-header" style="border-bottom: 4px solid #48c9b0; background-color: #48c9b0; color: #ffffff;">
                                      								<h2 class="text-center">Remove Custom Tag</h2>

                                      							</div>

                                      							<div class="modal-body">
                                                      <form action="{{ url_for('terms.delete_terms_tags') }}" id="checkboxForm" method='post'>
                                                        {% for tag in notificationTagsTermMapping[regex] %}
                                                          <div class="form-check">
                                                             <input type="hidden" class="form-control" name="term" value="{{ regex }}">
                                                            <input type="checkbox" class="form-check-input" name="tags_to_delete" value="{{ tag }}">
                                                            <label class="form-check-label">
                                                              <span class="label label-{{ bootstrap_label[loop.index0 % 5] }} lb-md">{{ tag }}</span>
                                                            </label>
                                                            <br>
                                                          </div>
                                                        {%  endfor %}
                                                      </form>
                                      							</div>

                                      							<div class="modal-footer">
                                      								<button class="btn btn-danger" type="submit" form="checkboxForm" value="Submit">
                                      										<span class="glyphicon glyphicon-trash"></span>
                                      										<span class="label-icon">Remove Tags</span>
                                      								</button>
                                      								<button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>

                                      							</div>
                                      						</div>
                                      					</div>
                                      				</div>
                                              {% set uniq_id.modal_id = uniq_id.modal_id + 1 %}
                                            {%  endif %}
                                          </div>
                                      </td>
                                      <td>{{ trackReg_list_values[loop.index0][3] }}</td>
                                      <td>{{ trackReg_list_values[loop.index0][0] }}</td>
                                      <td>{{ trackReg_list_values[loop.index0][1] }}</td>
                                      <td>{{ trackReg_list_values[loop.index0][2] }}</td>
                                      <td>{{ trackReg_list_num_of_paste[loop.index0] }}</td>
                                      <td><p style="margin: 0px; white-space: nowrap;">
                                          <span data-toggle="modal" data-target="#mymodal" data-term="{{ regex }}" ><button class="btn-link" data-toggle="tooltip" data-placement="right" title="Show concerned paste(s)"><span class="glyphicon glyphicon-info-sign"></span></button></span>
                                          <button class="btn-link btn-interaction" data-toggle="tooltip" data-placement="left" title="Remove this term" data-content="{{ regex }}" data-section="followTerm" data-action="delete"><span class="glyphicon glyphicon-trash"></span></button>
                                          &nbsp; &nbsp;<input id="checkBoxEMailAlerts" type="checkbox" title="Toggle E-Mail notifications" class="btn-link btn-interaction" data-content="{{ regex }}" data-section="followTerm" data-action="toggleEMailNotification" {% if notificationEnabledDict[regex] %} checked {% endif %}>
                                      </p></td>
                                      <td>
                                        {% for email in notificationEMailTermMapping[regex] %}
                                          <a href="{{ url_for('terms.delete_terms_email') }}?email={{email}}&term={{regex}}">
                                            <div class="btn-link btn-interaction pull-right mouse_pointer" data-toggle="tooltip" data-placement="left" data-original-title="Remove this email">
                                              <span class="glyphicon glyphicon-trash" style="color:Red;"></span>
                                            </div>
                                          </a>
                                          {{ email }}
                                          <br>
                                        {%  endfor %}
                                      </td>
                                  </tr>
                                {% endfor %}
                                <!-- Normal term -->
                                {% for term in track_list %}
                                  <tr>
                                      <td>
                                          <span class="term_name">{{ term }}</span>
                                          <div>
                                            {% for tag in notificationTagsTermMapping[term] %}
                                            <a href="{{ url_for('Tags.Tags_page') }}?ltags={{ tag }}">
                                              <span class="label label-{{ bootstrap_label[loop.index0 % 5] }} pull-left">{{ tag }}</span>
                                            </a>
                                            {%  endfor %}
                                            {% if notificationTagsTermMapping[term] %}
                                              <div class="btn-link btn-interaction pull-right mouse_pointer" data-toggle="modal" data-target="#edit_custom_tag_modal_{{ uniq_id.modal_id }}" data-placement="right" title="Edit Tags List"><i class="fa fa-pencil" style="color:Red;"></i></div>

                                              <div id="edit_custom_tag_modal_{{ uniq_id.modal_id }}" class="modal fade" role="dialog">
                                      					<div class="modal-dialog">

                                      						<!-- Modal content-->
                                      						<div id="mymodalcontent" class="modal-content">
                                      							<div class="modal-header" style="border-bottom: 4px solid #48c9b0; background-color: #48c9b0; color: #ffffff;">
                                      								<h2 class="text-center">Remove Custom Tag</h2>

                                      							</div>

                                      							<div class="modal-body">
                                                      <form action="{{ url_for('terms.delete_terms_tags') }}" id="checkboxForm" method='post'>
                                                        {% for tag in notificationTagsTermMapping[term] %}
                                                          <div class="form-check">
                                                             <input type="hidden" class="form-control" name="term" value="{{ term }}">
                                                            <input type="checkbox" class="form-check-input" name="tags_to_delete" value="{{ tag }}">
                                                            <label class="form-check-label">
                                                              <span class="label label-{{ bootstrap_label[loop.index0 % 5] }} lb-md">{{ tag }}</span>
                                                            </label>
                                                            <br>
                                                          </div>
                                                        {%  endfor %}
                                                      </form>
                                      							</div>

                                      							<div class="modal-footer">
                                      								<button class="btn btn-danger" type="submit" form="checkboxForm" value="Submit">
                                      										<span class="glyphicon glyphicon-trash"></span>
                                      										<span class="label-icon">Remove Tags</span>
                                      								</button>
                                      								<button type="button" class="btn btn-default" data-dismiss="modal" >Close</button>

                                      							</div>
                                      						</div>
                                      					</div>
                                      				</div>
                                              {% set uniq_id.modal_id = uniq_id.modal_id + 1 %}
                                            {%  endif %}
                                          </div>
                                      </td>
                                      <td>{{ track_list_values[loop.index0][3] }}</td>
                                      <td>{{ track_list_values[loop.index0][0] }}</td>
                                      <td>{{ track_list_values[loop.index0][1] }}</td>
                                      <td>{{ track_list_values[loop.index0][2] }}</td>
                                      <td>{{ track_list_num_of_paste[loop.index0] }}</td>
                                      <td><p style="margin: 0px; white-space: nowrap;">
                                          <span data-toggle="modal" data-target="#mymodal" data-term="{{ term }}" ><button class="btn-link" data-toggle="tooltip" data-placement="right" title="Show concerned paste(s)"><span class="glyphicon glyphicon-info-sign"></span></button></span>
                                          <button class="btn-link btn-interaction" data-toggle="tooltip" data-placement="left" title="Remove this term" data-content="{{ term }}" data-section="followTerm" data-action="delete"><span class="glyphicon glyphicon-trash"></span></button>
                                          &nbsp; &nbsp;<input id="checkBoxEMailAlerts" type="checkbox" title="Toggle E-Mail notifications" class="btn-link btn-interaction" data-content="{{ term }}" data-section="followTerm" data-action="toggleEMailNotification" {% if notificationEnabledDict[term] %} checked {% endif %}>
                                      </p></td>
                                      <td>
                                        {% for email in notificationEMailTermMapping[term] %}
                                          <a href="{{ url_for('terms.delete_terms_email') }}?email={{email}}&term={{term}}">
                                            <div class="btn-link btn-interaction pull-right mouse_pointer" data-toggle="tooltip" data-placement="left" data-original-title="Remove this email">
                                                <span class="glyphicon glyphicon-trash" style="color:Red;"></span>
                                            </div>
                                          </a>
                                          {{ email }}
                                          <br>
                                        {%  endfor %}
                                      </td>
                                  </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        <!-- /.panel-body -->
                    </div>
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.panel -->
        </div>
    </div>

     <!-- Panel OPTIONS -->
        <div class="col-lg-12">
            <div class="row">
                <div class="col-lg-12">
                    <div id="panel-today" class="panel panel-danger">
                        <div class="panel-heading">
                            <strong>Manage blacklisted terms</strong>
                        </div>
                        <div class="panel-body">

                            <div class="form-group input-group" style="margin-bottom: 30px;">
                                <span class="input-group-addon"><span class="fa fa-eye-slash "></span></span>
                                <input id="blacklistTermInput" class="form-control" placeholder="Term to track" type="text" style="max-width: 400px;">
                                <button id="blacklistTermBtn" class="btn btn-danger btn-interaction" style="margin-left: 10px;" data-section="blacklistTerm" data-action="add"> Black list a term</button>
                            </div>

                            <table class="table table-striped table-bordered table-hover" id="myTable2">
                                <thead>
                                     <tr>
                                        <th style="max-width: 800px;">Term</th>
                                        <th>Added date</th>
                                        <th>Action</th>
                                     </tr>
                                </thead>
                                <tbody>
                                {% for term, date in black_list %}
                                  <tr>
                                      <td>{{ term }}</td>
                                      <td>{{ date }}</td>
                                      <td><p style="margin: 0px;">
                                          <button class="btn-link btn-interaction" data-toggle="tooltip" data-placement="right" title="Remove this term" data-content="{{ term }}" data-section="blacklistTerm" data-action="delete"><span class="glyphicon glyphicon-trash"></span></button>
                                      </p></td>
                                  </tr>
                                {% endfor %}
                                </tbody>
                            </table>
                        <!-- /.panel-body -->
                    </div>
                </div>
                <!-- /.panel -->
            </div>
            <!-- /.panel -->
        </div>
    </div>

    <!-- /.row -->
    </div>
<!-- /#page-wrapper -->
</div>


<!-- import graph function -->
<script>
    function reload_per_paste() {
        var checked = $("#per_paste").prop( "checked" ) ? 1 : 0;
        window.location.href = {{ url_for('terms.terms_management') }}+"?per_paste="+checked;
    }


    var table_track;
    var table_black;

function bindEventsForCurrentPage() {
    // On click, get html content from url and update the corresponding modal
    $("[data-toggle='modal']").unbind().on("click.openmodal", function (event) {
        //console.log(data);
        event.preventDefault();
        var the_modal=$(this);
        var url = "{{ url_for('terms.terms_management_query_paste')  }}?term=" + encodeURIComponent($(this).attr('data-term'));
        $.getJSON(url, function (data) {
            if (data.length != 0) {
                var html_to_add = "";
                html_to_add += "<table id=\"modal-table\" class=\"table table-striped\">";
                html_to_add += "<thead>";
                html_to_add += "<tr>";
                html_to_add += "<th>Source</th>";
                html_to_add += "<th>Date</th>";
                html_to_add += "<th>Mime</th>";
                html_to_add += "<th>Size (Kb)</th>";
                html_to_add += "<th># lines</th>";
                html_to_add += "<th>Max length</th>";
                html_to_add += "<th>Preview</th>";
                html_to_add += "</tr>";
                html_to_add += "</thead>";
                html_to_add += "<tbody>";
                for (i=0; i<data.length; i++) {
                    curr_data = data[i];
                    html_to_add += "<tr>";
                    html_to_add += "<td>"+curr_data.source+"</td>";
                    html_to_add += "<td>"+curr_data.date+"</td>";
                    html_to_add += "<td>"+curr_data.mime+"</td>";
                    html_to_add += "<td>"+curr_data.size+"</td>";
                    html_to_add += "<td>"+curr_data.lineinfo[0]+"</td>";
                    html_to_add += "<td>"+curr_data.lineinfo[1]+"</td>";
                    html_to_add += "<td><div class=\"row\"><button class=\"btn btn-xs btn-default\" data-toggle=\"popover\" data-placement=\"left\" data-content=\""+curr_data.content.replace(/\"/g, "\'")+"\">Preview content</button><a target=\"_blank\" href=\"{{ url_for('showsavedpastes.showsavedpaste') }}?paste="+curr_data.path+"&num=0\">  <button type=\"button\" class=\"btn btn-xs btn-info\">Show Paste</button></a></div></td>";

                    html_to_add += "</tr>";
                }
                html_to_add += "</tbody>";
                html_to_add += "</table>";
                $("#mymodalbody").html(html_to_add);
                $("[data-toggle=popover]").popover();
                $("#button_show_plot").attr("href", "{{ url_for('terms.terms_plot_tool')}}"+"?term="+the_modal.attr('data-term') );
                $('#modal-table').DataTable();
            } else {
                $("#mymodalbody").html("No paste containing this term has been received yet.");
                $("#button_show_plot").attr("href", "{{ url_for('terms.terms_plot_tool')}}"+"?term="+the_modal.attr('data-term') );
            }
        });

    });

}


    $(document).ready(function(){
        bindEventsForCurrentPage();
        activePage = $('h1.page-header').attr('data-page');
        $("#"+activePage).addClass("active");
        if({{ per_paste }} ==  1) {
            $("#per_paste").attr('checked', true)
        }

        $('[data-toggle="tooltip"]').tooltip();
	table_track = $('#myTable').DataTable();
	table_black = $('#myTable2').DataTable();

        table_track.on( 'draw.dt', function () {
            perform_binding();
        });
        table_black.on( 'draw.dt', function () {
            perform_binding();
        });


        $("#followTermInput").keyup(function(event){
            if(event.keyCode == 13){
                $("#followTermBtn").click();
                $("#followTermInput").val("");
            }
        });

        $("#blacklistTermInput").keyup(function(event){
            if(event.keyCode == 13){
                $("#blacklistTermBtn").click();
                $("#blacklistTermInput").val("");
            }
        });

        perform_binding();

    $("#mymodal").on('hidden.bs.modal', function () {
        $("#mymodalbody").html("<p>Loading paste information...</p>");
        var loading_gif = "<img id='loading-gif-modal' class='img-center' src=\"{{url_for('static', filename='image/loading.gif') }}\" height='26' width='26' style='margin: 4px;'>";
        $("#mymodalbody").append(loading_gif); // Show the loading GIF
    });


   });
</script>

<script>



function perform_binding() {
    $(".btn-interaction").unbind("click.interaction");
    $(".btn-interaction").bind("click.interaction", perform_operation);
}

function perform_operation(){
    var curr_section = $(this).attr('data-section');
    var curr_action = $(this).attr('data-action');
    var row_tr = $(this).closest("tr");
    if (curr_action == "add") {
        var curr_term = $('#'+curr_section+'Input').val();
        var email_addresses = $('#followTermEMailNotificationReceiversInput').val();
        var tags = $('#followTermTag').val();
    } else {
        var curr_term = $(this).attr('data-content');
        var email_addresses = "";
    }
    var data_to_send = { section: curr_section, action: curr_action, term: curr_term, emailAddresses: email_addresses, tags: tags};

    if (curr_term != "") {
        //console.log(data_to_send);
        $.get("{{ url_for('terms.terms_management_action') }}", data_to_send, function(data, status){
            if(status == "success") {
                var json = data;

                if(json.section == "followTerm") {
                    if(json.action == "add") {
                        // query data
                        $.get("{{ url_for('terms.terms_management_query') }}", { term: json.term, section: json.section }, function(data2, status){
                            reload_per_paste();
                        });
                    } else if (json.action == "delete") {
                      row_tr.remove()
                    }
                } else if(json.section == "blacklistTerm"){
                    if(json.action == "add") {
                        $.get("{{ url_for('terms.terms_management_query') }}", { term: json.term, section: json.section }, function(data2, status){
                            console.log(data2);
                            var action_button = "<button class=\"btn-link btn-interaction\" data-toggle=\"tooltip\" data-placement=\"right\" title=\"Remove this term\" data-content=\"" + json.term + "\" data-section=\"blacklistTerm\" data-action=\"delete\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
                            table_black.row.add( [ json.term, data2[3], action_button ] ).draw( false );
                            perform_binding();
                        });
                    } else if (json.action == "delete") {
                       // Find indexes of row which have the term in the first column
                       var index = table_black.rows().eq( 0 ).filter( function (rowIdx) {
                           return table_black.cell( rowIdx, 0 ).data() === json.term;
                       } );
                       table_black.rows(index).remove().draw( false );
                    }
                }



            }
        });
    }
}
</script>
