newscoop/JS-Scoopwriter

<section
    ng-controller="PaneRelatedArticlesCtrl as paneRelatedArticles"
    class="tabcontent">

    <div class="panel-title">
        {{ ::('aes.label.relatedarticles'|trans) }}
    </div>
    
    <div ng-hide="paneRelatedArticles.showArticlePreview">
        <div class="add-element" ng-class="{expanded: showAddFilter}">
            <div class="heading">
                <button class="btn btn-sf-invisible"
                  ng-click="paneRelatedArticles.showAddFilter = !paneRelatedArticles.showAddFilter">
                <span class="glyphicon"
                  ng-class="{'glyphicon-plus': !paneRelatedArticles.showAddFilter,
                             'glyphicon-minus': paneRelatedArticles.showAddFilter}"
                  ></span>
                <span class="add-text">{{ ::('aes.label.advancedfilter'|trans) }}</span>
                </button>
            </div>

            <div class="filters">
                <form ng-submit="paneRelatedArticles.loadSearchResults()">
                    <div ng-show="paneRelatedArticles.showAddFilter">
                        <select 
                            ng-model="paneRelatedArticles.publicationFilter"
                            ng-options="publication.name for publication in paneRelatedArticles.availablePublications"
                            ng-change="paneRelatedArticles.loadAvailableFilters(); paneRelatedArticles.loadSearchResults()">
                            <option value="" class="">-- {{ ::('aes.label.publication'|trans) }} --</option>
                        </select>
                        <select 
                            ng-model="paneRelatedArticles.issueFilter"
                            ng-options="issue.title for issue in paneRelatedArticles.availableIssues"
                            ng-change="paneRelatedArticles.loadAvailableFilters();paneRelatedArticles.loadSearchResults()">
                            <option value="" class="">-- {{ ::('aes.label.issue'|trans) }} --</option>
                        </select>
                        <select 
                            ng-model="paneRelatedArticles.sectionFilter" 
                            ng-change="paneRelatedArticles.loadSearchResults()"
                            ng-options="section.title for section in paneRelatedArticles.availableSections">
                            <option value="" class="">-- {{ ::('aes.label.section'|trans) }} --</option>
                        </select>
                    </div>
                    <div class="input-group">
                        <input type="text" class="editor-input" ng-model="paneRelatedArticles.query" placeholder="Search">
                        <div class="remove" title="Remove" ng-click="paneRelatedArticles.clearSearch()">
                            <span class="glyphicon glyphicon-remove"></span>
                        </div>
                        <span class="input-group-btn">
                            <button
                                ng-disabled="!paneRelatedArticles.query || !paneRelatedArticles.articlesSearchResultsListRetrieved" 
                                class="btn btn-primary btn-sm" type="submit">{{ ::('aes.btn.filter'|trans) }}</button>
                        </span>
                    </div>
                </form>
            </div>
        </div><!-- end add element -->

        <div class="wrapper"
            ng-class="{low: paneRelatedArticles.showAddFilter, high: !paneRelatedArticles.showAddFilter}">    

            <div class="list">

                <!-- pinned -->
                <div class="group">
                    <div class="title pinned"
                    ng-click="showPinnedArticles = !showPinnedArticles">
                       <span class="glyphicon"
                            ng-class="{'glyphicon-chevron-right': !showPinnedArticles,
                                        'glyphicon-chevron-down': showPinnedArticles}">
                        </span> {{ ::('aes.label.pinnedarticles'|trans) }}
                    </div>
                    <div class="related-articles-list"
                        ng-show="showPinnedArticles"
                        drag-sort items="paneRelatedArticles.assignedRelatedArticles"
                        on-order-changed="paneRelatedArticles.orderChange(affectedItem, newIndex)">
                        <div ng-repeat="article in paneRelatedArticles.assignedRelatedArticles track by article.articleId"
                            class="related-article pinned">
                            <div class="drag-bar"></div>
                            <div
                                class="remove"
                                title="Remove"
                                ng-click="paneRelatedArticles.confirmUnassignRelatedArticle(article)"
                                >
                                <span class="glyphicon glyphicon-remove"></span>
                            </div>                
                            <div class="article-metadata">
                                <span class="date">{{::article.created| date:"dd.MM.yyyy 'at' H:mm:ss"}}</span>
                                <span class="status new" ng-bind="::article.statusString"></span>
                            </div>
                            <div class="article-title">
                                <a ng-click="paneRelatedArticles.previewRelatedArticle(article)" ng-bind="::article.title"></a>
                            </div>
                        </div>
                    </div>

                </div><!-- end pinned -->

                <!-- search results -->
                <div class="group">
                    <div class="title"><span class="glyphicon glyphicon-search"></span> {{ ::('aes.label.searchresults'|trans) }}</div>
                    <!-- loader -->
                    <div  ng-hide="paneRelatedArticles.articlesSearchResultsListRetrieved"
                        class="load-anim">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div><!-- end loader -->
                    <div ng-repeat="article in paneRelatedArticles.articlesSearchResults track by article.articleId"
                        class="related-article">
                        <button 
                            class="btn btn-default btn-xs pin" 
                            ng-disabled="paneRelatedArticles.assigningRelatedArticles"
                            ng-click="paneRelatedArticles.assignToArticle(article)"
                            title="Pin article">
                            <i class="fa fa-thumb-tack"></i>
                        </button>
                        <div class="article-metadata">
                            <span class="date">{{::article.created| date:"dd.MM.yyyy 'at' H:mm:ss"}}</span>
                            <span class="status published" ng-bind="::article.statusString"></span>
                        </div>
                        <div class="article-title">
                            <a  ng-click="paneRelatedArticles.previewRelatedArticle(article)" ng-bind="::article.title"></a>
                        </div>
                    </div>
                </div><!-- end search results -->
            </div><!-- end list -->
        </div><!-- end wrapper -->
    </div>

    <div ng-show="paneRelatedArticles.showArticlePreview" class="article-preview">
            <div class="header">
                <div class="btn-group">
                    <button class="btn btn-default btn-xs"
                      ng-click="paneRelatedArticles.clearPreview()">
                      <i class="fa fa-chevron-left"></i> {{ ::('Back'|trans) }}
                    </button>
                </div>
                <div class="btn-group">
                    <a
                      ng-href="{{ paneRelatedArticles.relatedArticlePreview.editorUrl }}"
                      target="_blank"
                      class="btn btn-default btn-xs">
                        <i class="fa fa-pencil"></i> {{ ::('Edit'|trans) }}
                    </a>
                </div>
            </div>
            <div class="content">
                <div class="preview-dateline">{{paneRelatedArticles.relatedArticlePreview.created| date:"dd.MM.yyyy 'at' H:mm:ss"}}</div>
                <div class="preview-title" ng-bind-html="paneRelatedArticles.relatedArticlePreview.title"></div>
                <div class="preview-lead" ng-bind-html="paneRelatedArticles.relatedArticlePreview.lead"></div>
                <div class="preview-body">
                    <!-- loader -->
                    <div  ng-hide="paneRelatedArticles.previewLoaded"
                        class="load-anim">
                        <div class="rect1"></div>
                        <div class="rect2"></div>
                        <div class="rect3"></div>
                        <div class="rect4"></div>
                        <div class="rect5"></div>
                    </div><!-- end loader -->
                    <p><img ng-src="{{paneRelatedArticles.relatedArticlePreview.firstImage}}" /></p>
                    <div ng-repeat="field in paneRelatedArticles.relatedArticlePreview.contentFields">
                        <p ng-bind-html="paneRelatedArticles.relatedArticlePreview.fields[field]" title="{{field}}"></p>
                    </div>
                </div>
            </div>          
    </div>
</section>