{% extends "base-nav.html" %}

{% block css %}
<link rel="stylesheet" href="{{ static_url("ffu.css") }}">
<link rel="stylesheet" href="{{ static_url("jquery.dynatable.css") }}">
{% end %}

{% block content %}
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <div id="msg-area"></div>
      <ul id="filelist" class="list-group">
      {% if 'items' in globals() %} 
        {% for item in items %}
          <li id="{{item['transferid']}}" class="list-group-item">
            <h3 class="list-group-item-heading">{{item['transferid']}} - {{item['username']}}</h2>
            <div class="btn-group pull-right">
              <button type='button' class='btn btn-lg btn-success' data-approve="true" data-id="{{item['transferid']}}">Accept</button>
              <button type='button' class='btn btn-lg btn-danger' data-approve="false" data-id="{{item['transferid']}}">Deny</button>
            </div>
            <ul class="bot-padding list-group-item-text">
            {% for w in item['warnings'] %}
            <li>{{w}}</li>
            {% end %}
            </ul>
          </li>
        {% end %}
      {% end %}
      </ul>
    </div>
  </div>
</div><!-- /.container -->
{% end %}

{% block js %}
<script>
RegExp.escape = function(text) {
    return text.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, "\\$&");
}  
$('.btn').click(function(e){
    $.ajax({
      url: "",
      type: "POST",
      data: JSON.stringify({id:$(this).data("id"), approve:$(this).data("approve")}),
      contentType: "application/json; charset=utf-8",
      dataType: "json",
      }).done(function(data){
      $('#msg-area').removeClass();
      $('#msg-area').attr('class', 'alert alert-'+data['result_type']);
      $('#msg-area').text('ID ' + data['id'] + ' - ' + data['result']);
      console.log( $( '[id="' + data['id'] + '"]' ) );
      $('[id="'+data['id']+'"]').remove();
    });
  });
</script>
{% end %}