<section class="sales-crowd-promo salescrowd-orange white-text admin-pages">
    <div class="container">
        <h1>Articles</h1>
    </div>
</section>
<main class="sales-crowd-main-content" data-ng-app="SoSocialApp">
    <div class="content overlap" data-ng-controller="AdminArticleOverviewCtrl">
        <section class="one-column page-content">
            {{#if breadcrumbs}}
                <div class="breadcrumb">
                    {{#each breadcrumbs}}
                        <a href="{{url}}">{{name}}</a>
                    {{/each}}
                </div>
            {{/if}}
            <div class="action-box-small">
                <!-- <select data-ng-model="CategoryFilter">
                <option value="">All Categories</option>
                <option value="facebook">Facebook</option>
                <option value="email marketing">Email Marketing</option>
                <option value="twitter">Twitter</option>
                <option value="tumblr">Tumblr</option>
                </select>-->


                <table class="so-action-table">
                    <tr>
                        <td>

                            <div class="dropdown">
                                <div class="dropdown-container">
                                    <p class="dropdown-description">Filter Category</p>
                                    <p class="dropdown-button">Click to Select</p>
                                    <ul class="dropdown-menu dropdown-select">
                                        <li data-ng-click="CategoryFilter = ''">All</li>
                                        <li data-ng-click="CategoryFilter = 'facebook'">Facebook</li>
                                        <li data-ng-click="CategoryFilter = 'email marketing'">Email Marketing</li>
                                        <li data-ng-click="CategoryFilter = 'twitter'">Twitter</li>
                                        <li data-ng-click="CategoryFilter = 'tumblr'">Tumblr</li>
                                    </ul>
                                </div>
                            </div>

                            <div class="dropdown">
                                <div class="dropdown-container">
                                    <p class="dropdown-description">Filter Status</p>
                                    <p class="dropdown-button-two">Click to Select</p>
                                    <ul class="dropdown-menu-two dropdown-select">
                                        <li data-ng-click="StatusFilter = ''">All</li>
                                        <li data-ng-click="StatusFilter = 'published'">Published</li>
                                        <li data-ng-click="StatusFilter = 'draft'">Draft</li>
                                        <li data-ng-click="StatusFilter = 'archived'">Archived</li>
                                    </ul>
                                </div>
                            </div>

                            <!--<select data-ng-model="StatusFilter">
                            <option value="published">Published</option>
                            <option value="draft">Draft</option>
                            <option value="archived">Archived</option>
                            </select>-->
                        </td>
                        <td class="table-create">
                            <a href="/admin/articles/create" class="button button-large button-green">Create New Article</a>
                        </td>
                    </tr>
                </table>
            </div>


            <!-- Article list -->
            <table class="so-table">
                <thead>
                <tr>
                    <!--<th class="table-id">ID</th>-->
                    <th class="table-title"><a href="" data-ng-click="reverse=!reverse;order('title', reverse)">Title</a></th>
                    <th class="table-category"><a href="" data-ng-click="reverse=!reverse;order('category', reverse)">Category</a></th>
                    <th class="table-date"><a href="" data-ng-click="reverse=!reverse;order('createdDate', reverse)">Date Posted</a></th>
                    <th class="table-status"><a href="" data-ng-click="reverse=!reverse;order('status', reverse)">Status</a></th>
                    <th class="table-actions">Actions</th>
                </tr>
                </thead>
                <tbody>

                <tr data-ng-repeat="article in articles | filter:{category: CategoryFilter} | filter:{status: StatusFilter} | startFrom: pagination.page * pagination.perPage | limitTo: pagination.perPage  ">
                    <!--<td class="table-id">1</td>-->
                    <td class="table-title"><a href="/articles/{[{article.category}]}/{[{article.slug}]}" target="_blank" title="View the article on the site">{[{article.title}]}</a></td>
                    <td class="table-category">{[{article.category}]}</td>
                    <td class="table-date">{[{article.createdDate | date:'yyyy-MM-dd'}]}</td>
                    <td class="table-status">{[{article.status}]}
                        <!-- <select class="basic" name="status">
<option value="draft" {{#is status 'draft'}} selected {{/is}}>Draft</option>
<option value="published" {{#is status 'published'}} selected {{/is}}>Published</option>
<option value="archived" {{#is status 'archived'}} selected {{/is}}>Archived</option>
</select>-->
                    </td>
                    <td class="table-actions">
                        <a href="/admin/articles/{[{article._id}]}/edit" class="button button-small button-blue" title="Edit this article">Edit</a>
                        <a href="#" class="button button-small button-red" title="Delete this article">Delete</a>
                    </td>
                </tr>

                </tbody>
            </table>

            <!-- Pagination -->

            <div class="pagination">
                <ul>
                    <li class="page-prev" data-ng-if="pagination.page != 0"><a class="page-prev" href="" data-ng-click="pagination.prevPage()">Prev</a></li>

                    <li data-ng-repeat="n in [] | range: pagination.numPages" data-ng-class="{active: n == pagination.page}"><a href="" data-ng-click="pagination.toPageId(n)">{[{n + 1}]}</a>
                    </li>


                    <li class="page-next" data-ng-if="pagination.page < (pagination.numPages - 1)"><a class="page-next" href="" data-ng-click="pagination.nextPage()">Next</a></li>
                </ul>
            </div>


        </section>
    </div>
</main>