<section class="sales-crowd-promo salescrowd-orange white-text admin-pages">
    <div class="container">
        <h1>Book: '{{contentType}}' sections</h1>
    </div>
</section>
<main class="sales-crowd-main-content" data-ng-app="SoSocialApp">
    <div class="content overlap" data-ng-controller="AdminBookSectionOverviewCtrl">
        {{> 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 class="table-create">
                            <a href="/admin/books/addSectionToBook?b={{bookId}}" class="button button-large button-green desktop-only">Add New Section</a>
                            <a href="/admin/books/addSectionToBook?b={{bookId}}" class="button button-small button-green hidden-desktop">Add New Section</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-book"><a href="" data-ng-click="reverse=!reverse;order('book', reverse)">Book</a></th>
                        <th class="table-order"><a href="" data-ng-click="reverse=!reverse;order('order', reverse)">Order</a></th>
                        <th class="table-actions"><a href="">Actions</a></th>
                    </tr>
                </thead>
                <tbody>
                    <tr data-ng-repeat="section in sections | startFrom: pagination.page * pagination.perPage | limitTo: pagination.perPage  " data-ng-animate="'animate-enter'" class="animate-repeat">
                        <td class="table-title"><a href="/admin/books/{{bookId}}/section/{[{section.section._id}]}">{[{section.section.title}]}</a></td>
                        <td class="table-book"><a href="/admin/books/{{bookId}}/sections/" title="View Book: {{contentType}}">{{contentType}}</a></td>
                        <td class="table-order">{[{section.section.order}]}</td>
                        <td class="table-actions">
                            <a href="/{[{section.slug}]}/{[{section.section.slug}]}/" target="_blank" class="button button-small button-blue" title="View the book on the site">View</a>
                            <a href="/admin/books/{{bookId}}/section/{[{section.section._id}]}/edit" class="button button-small button-blue" title="Edit section">Edit</a>
                            <a href="/admin/books/addPageToSection?b={[{bookId}]}&s={[{section.section.slug}]}" class="button button-small button-green" title="Add a pages to this section">Add Pages</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>
            <input type="hidden" id="bookId" value="{{bookId}}" />
        </section>
    </div>
</main>