{% include '@dashnex/header.twig' %}

<div class="import-content" ng-controller="ImportContentController"
        ng-init="categoryKeywords = {{ categoryKeywords | json_encode }};
                 keywordsWithoutPage = {{ keywordsWithoutPage | json_encode }};
                 keywordsWithoutCategory = {{ keywordsWithoutCategory | json_encode }};
                 keywordsWithoutPost = {{ keywordsWithoutPost | json_encode }}">
    <header class="dashnex-frame-header margin-bot-10">
        <h3 class="pull-left">Import Content</h3>
    </header>

    <div class="ptm-message__container ng-hide"
         ng-show="results.length" ng-click="results = []">
        <div class="message-line clearfix" ng-repeat="result in results">
            <div class="ptm-message-action-label"
                 ng-class="{'ptm-error--danger': !result.success, 'ptm-error--success': result.success}">
                <i class="fa" ng-class="{'fa-times': !result.success, 'fa-check': result.success}"></i>
                <span>[[result.action]]</span>
            </div>
            <div class="ptm-message-text">
                <span>[[result.message]]</span>
            </div>
        </div>
    </div>

    <div class="dashnex-frame-container no-margin" ng-click="results = []">
        <div role="tabpanel">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active"><a href="#categories" aria-controls="categories" role="tab" data-toggle="tab">WP Categories</a></li>
                <li role="presentation"><a href="#pages" aria-controls="pages" role="tab" data-toggle="tab">WP Pages</a></li>
                <li role="presentation"><a href="#posts" aria-controls="posts" role="tab" data-toggle="tab">WP Posts</a></li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="categories"
                     ng-init="categories = {{ categories | json_encode() }}">

                    <div ng-if="!categories.length" class="dashnex-frame-container margin-top-20 clearfix">
                        You have no categories to import.
                    </div>

                    <div ng-if="categories.length">
                        <div class="dashnex-frame-container margin-bot-5 clearfix">
                            <button class="btn btn-primary pull-right"
                                    data-target="#category-keyword-bulk-create"
                                    data-toggle="modal"
                                    ng-disabled="!bulkCategories.length">
                                Bulk Create
                            </button>
                        </div>

                        <div class="dashnex-frame-container">
                            <table class="table table-header dashnex-import-content-table">
                                <thead>
                                    <tr>
                                        <th class="check-column">
                                            <input type="checkbox" ng-click="bulkAllCategories($event)"/>
                                        </th>
                                        <th class="name">Category Name</th>
                                        <th class="actions"></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                        <div class="dashnex-frame-container">
                            <table class="table dashnex-import-content-table categories">

                                {# Dirty hack :( Add more blocks to add more levels #}

                                <tr ng-repeat-start="category in categories" class="level0" ng-include="'import-content/wp-category.html'"></tr>
                                <tr ng-repeat-start="category in category.children" class="level1" ng-include="'import-content/wp-category.html'"></tr>
                                <tr ng-repeat-start="category in category.children" class="level2" ng-include="'import-content/wp-category.html'"></tr>
                                <tr ng-repeat-start="category in category.children" class="level3" ng-include="'import-content/wp-category.html'"></tr>
                                <tr ng-repeat="category in category.children" class="level4" ng-include="'import-content/wp-category.html'"></tr>
                                <tr ng-repeat-end></tr>
                                <tr ng-repeat-end></tr>
                                <tr ng-repeat-end></tr>
                                <tr ng-repeat-end></tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane" id="pages" ng-init="pages = {{ pages|json_encode() }}">
                    <div ng-if="!pages.length" class="dashnex-frame-container margin-top-20 clearfix">
                        You have no pages to import.
                    </div>

                    <div ng-if="pages.length">
                        <div class="dashnex-frame-container margin-bot-5 clearfix">
                            <button class="btn btn-primary pull-right"
                                    data-target="#page-keyword-bulk-create"
                                    data-toggle="modal" ng-disabled="!bulkPages.length">
                                Bulk Create
                            </button>
                        </div>

                        <div class="dashnex-frame-container">
                            <table class="table table-header dashnex-import-content-table">
                                <thead>
                                    <tr>
                                        <th class="check-column">
                                            <input type="checkbox"
                                                 ng-checked="bulkPages.length && bulkPages.length == pages.length"
                                                 ng-click="toggleBulkAll('bulkPages', pages)" />
                                        </th>
                                        <th class="name">Page Name</th>
                                        <th class="actions"></th>
                                    </tr>
                                </thead>
                            </table>
                        </div>

                        <div class="dashnex-frame-container">
                            <table class="table dashnex-import-content-table">
                                <tbody>
                                    <tr ng-repeat="page in pages" ng-include="'import-content/wp-page.html'"></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

                <div role="tabpanel" class="tab-pane" id="posts" ng-init="posts = {{ posts|json_encode() }}">

                    <div ng-if="!posts.length" class="dashnex-frame-container margin-top-20 clearfix">
                        You have no posts to import.
                    </div>

                    <div ng-if="posts.length">
                        <div class="dashnex-frame-container margin-bot-5 clearfix">
                            <button class="btn btn-primary pull-right"
                                    data-target="#post-keyword-bulk-create"
                                    data-toggle="modal" ng-disabled="!bulkPosts.length">
                                Bulk Create
                            </button>
                        </div>

                        <div class="dashnex-frame-container">
                            <table class="table table-header dashnex-import-content-table">
                                <thead>
                                <tr>
                                    <th class="check-column">
                                        <input type="checkbox"
                                               ng-checked="bulkPosts && bulkPosts.length == posts.length"
                                               ng-click="toggleBulkAll('bulkPosts', posts)" />
                                    </th>
                                    <th class="name">Post Name</th>
                                    <th class="actions"></th>
                                </tr>
                                </thead>
                            </table>
                        </div>

                        <div class="dashnex-frame-container">
                            <table class="table dashnex-import-content-table">
                                <tbody>
                                <tr ng-repeat="post in posts" ng-include="'import-content/wp-post.html'"></tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

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

    {% include '@dashnex/import-content/modal/page-keyword-create.twig' %}
    {% include '@dashnex/import-content/modal/page-keyword-assign.twig' %}
    {% include '@dashnex/import-content/modal/page-keyword-bulk-create.twig' %}
    {% include '@dashnex/import-content/modal/category-keyword-create.twig' %}
    {% include '@dashnex/import-content/modal/category-keyword-bulk-create.twig' %}
    {% include '@dashnex/import-content/modal/category-keyword-assign.twig' %}
    {% include '@dashnex/import-content/modal/post-keyword-assign.twig' %}
    {% include '@dashnex/import-content/modal/post-keyword-create.twig' %}
    {% include '@dashnex/import-content/modal/post-keyword-bulk-create.twig' %}
    {% include '@dashnex/modal/support.twig' %}
</div>