{% import "Toucan/macros/master.html" as master with context %}
{% import "Toucan/macros/forms.html" as f with context %}
{% include "Toucan/Plugin/Publisher/Admin/_include.html" %}

<div class="page-category">
    <div class="pull-right">
        <div class="btn btn-info"
                data-toggle="modal"
                data-target="#modal-cat-type"
                data-id=""
                data-name=""
                data-slug=""
                >New Category</div>
    </div>
    <div class="clearfix"></div>

    <table class="table table-bordered">
        <thead>
            <th>Name</th>
            <th>Slug</th>
            <th>Posts</th>
        </thead>

        <tbody>
            {% for cat in categories %}
            <tr>
                <td>
                <a href="javascript:"
                data-toggle="modal"
                data-target="#modal-cat-type"
                data-id="{{ cat.id }}"
                data-name="{{ cat.name }}"
                data-slug="{{ cat.slug}}">
                     {{ cat.name }}</a>
                </td>
                <td>{{ cat.slug }}</td>
                <td><a href="{{ url_for('PublisherAdmin:index', category_id=cat.id) }}">{{ cat.total_posts }}</a></td>
            </tr>
            {% endfor %}
        </tbody>

    </table>

</div>


<!-- MODAL -->
<div class="modal fade" id="modal-cat-type" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">

  <form method="POST" action="{{url_for('PublisherAdmin:categories')}}">
    {{- f.csrf_field() -}}

    <input type="hidden" name="id" value="">
    <input type="hidden" name="action" value="">

    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="myModalLabel">Edit Category</h4>
      </div>
      <div class="modal-body">

            <div class="form-group">
                <label>Name</label>
                <input type="text" class="form-control"  name="name" placeholder="Name" value="">
            </div>

            <div class="form-group">
                <label>Slug</label>
                <input type="text" class="form-control" name="slug" placeholder="Slug" value="">
            </div>


      </div>

      <div class="modal-footer">
        <button type="button" class="btn btn-danger pull-left delete-btn" data-dismiss="modal"><i class="fa fa-trash"></i> Delete</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" class="btn btn-success"><i class="fa fa-check"></i> SAVE</button>
      </div>
    </div>

  </form>
  </div>
</div>