<section class="so-social-promo sosocial-orange white-text admin-pages">
    <div class="container">
        <h1>Articles</h1>
    </div>
</section>
<main class="so-social-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 flash-alert="success" active-class="fade in" class="flash-success fade">
                <span>{[{flash.message}]}</span>
            </div>

            <div class="action-box-small">
                <table class="so-action-table">
                    <tr>
                        <td>
                            <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>
                        </td>
                        <td>
                            <select data-ng-model="StatusFilter">
                                <option value="">All Statuses</option>
                                <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 desktop-only">Create New Article</a>
                            <a href="/admin/articles/create" class="button button-small button-green hidden-desktop">Create New Article</a>
                        </td>
                    </tr>
                </table>
            </div>
            <!-- Article list -->
            <table class="so-table">
                <thead>
                <tr>
                    <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"><a href="" >Actions</a></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  " data-ng-animate="'animate-enter'" class="animate-repeat">
                    <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 | uppercase}]}</td>
                    <td class="table-actions">
                        <a href="/admin/articles/{[{article._id}]}/edit" class="button button-small button-blue" title="Edit this article">Edit</a>
                        <script>
                            var articleID = '{[{article._id}]}';
                        </script>
                        <a href="javascript:void(0);" class="button button-small button-red" title="Delete this article" data-ng-click="deleteArticle(article._id)">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>