<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">
        {{> flash_msg}}
        <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">
                <table class="so-action-table">
                    <tr>
                        <td>
                           <select data-ng-model="CategoryFilter">
                               <option value="">All Categories</option>
                               <option value="facebook">Facebook</option>
                               <option value="twitter">Twitter</option>
                               <option value="tumblr">Tumblr</option>
                               <option value="email-marketing">Email Marketing</option>
                               <option value="pinterest">Pinterest</option>
                               <option value="linkedin">LinkedIn</option>
                               <option value="snapchat">Snapchat</option>
                               <option value="google-plus">Google Plus</option>
                               <option value="retargeting">Retargeting</option>
                               <option value="nlp-persuasion">NLP/Persuasion</option>
                               <option value="lead generation">Lead Generation</option>
                               <option value="online-competitions">Online Competitions</option>
                               <option value="seo">SEO</option>
                               <option value="social-media-strategy">Social Media Strategy</option>
                               <option value="content-strategy">Content Strategy</option>
                               <option value="display-network-marketing">Display Network Marketing</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="/articles/{[{article.category}]}/{[{article.slug}]}" target="_blank" class="button button-small button-blue" title="View the article on the site">View</a>
                            <a href="/admin/articles/{[{article._id}]}/edit" class="button button-small button-green" title="Edit this article">Edit</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>