<div class="row">
    <div class="col-md-12">
        <h1><span class="glyphicon glyphicon-filter" aria-hidden="true"></span> Filters</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-12">

        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">Mail Filters</h3></div>
            <div class="panel-body">
                <p>Here you can create and modify filters that apply on all incoming messages.</p>
            </div>
            <table class="table table-responsive">
                <tbody>
                    {{#if filters}}
                        {{#each filters}}
                            <tr>
                                <th>
                                    {{index}}
                                </th>
                                <td>
                                    <div class="pull-right">
                                        <a href="/account/filters/edit?id={{id}}" class="btn btn-info btn-xs"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span> Edit</a>

                                        <button type="button" data-filter="{{id}}" class="btn btn-danger btn-xs" data-toggle="modal" data-target="#deleteModal"><span class="glyphicon glyphicon-trash" aria-hidden="true"></span> Delete</button>
                                    </div>
                                    <div>
                                        Query: <strong>{{query}}</strong><br /> Action: {{action}}
                                    </div>
                                </td>
                            </tr>
                        {{/each}}
                    {{else}}
                        <tr>
                            <td colspan="3">
                                There are no filters created
                            </td>
                        </tr>
                    {{/if}}
                </tbody>
            </table>

            <div class="panel-body">
                <div class="form-group">
                    <a href="/account/filters/create" class="btn btn-success"><span class="glyphicon glyphicon-filter" aria-hidden="true"></span> Add new filter</a>
                </div>

            </div>
        </div>

    </div>
</div>

<!-- Modal -->
<div class="modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="deleteModalLabel">Delete filter</h4>
      </div>
      <div class="modal-body">
        Are you sure you want to permanently delete selected filter?
      </div>
      <div class="modal-footer">
        <form method="post" action="/account/filters/delete">
            <input type="hidden" name="_csrf" value="{{csrfToken}}">
            <input type="hidden" id="delete-form-filter" name="id" value="">
            <button type="button" class="btn btn-default" data-dismiss="modal">No, cancel</button>
            <button type="submit" class="btn btn-danger bulk-delete-confirm">Yes, delete</button>
        </form>
      </div>
    </div>
  </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    $('#deleteModal').on('show.bs.modal', function (event) {
        var button = $(event.relatedTarget); // Button that triggered the modal
        var filter = button.data('filter'); // Extract info from data-* attributes
        document.getElementById('delete-form-filter').value = filter;
    });
}, false);
</script>
