@extends('app_client')

@section('title', $category->name . ' News | ' . $property->name)

@section('content')
    <div class="container-fluid" ng-controller="ArticleCtlr as vm" ng-init="vm.get_articles({{ $category->id }})">
        <!-- Header -->
        <div class="page-header">
            <!-- Seaction Title -->
            <div class="header left">
                <span class="icon {{ $category->icon }}"></span>
                <h1 class="header-title">
                    @if ($property->slug == 'loulavie' && $category->name == 'Community')
                        {{ $property->name . ' News' }}
                    @elseif($property->slug == 'lcn' && $category->name == 'Community')
                        {{ 'Concierge News' }}
                    @elseif($property->slug == 'paramountmiami' && $category->name == 'Community')
                        Paramount News
                    @elseif($property->slug == 'seiaclub' && $category->name == 'Community')
                        Club News
                    @else
                        {{ $category->name . ' News' }}
                    @endif
                </h1>
            </div>
            <!-- Filter -->
            @if ($articles->count())
                <div class="sort ml-m--m" ng-show="vm.articles_loaded">
                    <div class="filter-group">
                        <div class="form-group select">
                            <select ng-model="vm.sort_by"
                                ng-options="sort.value as sort.name for sort in vm.resident_alpha_sort"
                                ng-init="vm.sort_by = '-parent.created_at'">
                            </select>
                        </div>
                    </div>
                </div>
            @endif
            <div class="clearfix"></div>

        </div>
        <!-- Content -->
        <div class="row">
            <div class="col-sm-12">
                @if ($articles->count())
                    <!-- Loader -->
                    <div class="loading-directories text-center" ng-show="!vm.articles_loaded">
                        <img src="{{ asset('assets/images/loading-primary.svg') }}" alt="" width="62px">
                        <em>Loading articles ...</em>
                    </div>
                    <!-- Articles -->
                    <div class="masonry" ng-cloak>
                        <div class="masonry-item card card-news shadowed" ng-class="animation"
                            dir-paginate="article in vm.articles | orderBy: vm.sort_by | itemsPerPage: 15">
                            <!-- Image -->
                            <div class="news-item-image lazy"
                                style="background-image:url(@{{ article.parent.image }});
                background-size: @{{ vm.get_title_image(article.parent) ? 'cover' : 'contain' }};
                background-repeat: no-repeat">
                            </div>
                            <!-- Content -->
                            <div class="news-list-item-content">
                                <!-- <span class="time">@{{ article.parent.created_at | newsDate }}</span> -->
                                <a class="title"
                                    href="{{ url('news/' . $category->slug) }}/@{{ article.parent.slug }}">@{{ article.parent.title }}</a>
                                <p ng-bind-html="article.content | limitHtml: 200"></p>
                            </div>
                            <!-- Controls -->
                            <div class="controls">
                                <a class="btn-small bg-accent text-sm-center view"
                                    ng-class="{ 'half-width': article.request, 'btn-sm-block': !article.request }"
                                    href="{{ url('news/' . $category->slug) }}/@{{ article.parent.slug }}">Read more
                                </a>
                                <button class="btn-small btn-request half-width text-sm-center"
                                    ng-click="vm.request_article_modal(article.parent)"
                                    ng-if="article.request">{{ $property->id == 6 ? 'Service Request' : 'Request​' }}
                                </button>
                            </div>
                        </div><!-- .masonry-item -->
                    </div><!-- .masonry -->
                    <!-- Pagination -->
                    <dir-pagination-controls></dir-pagination-controls>
                @else
                    <!-- No Articles -->
                    <h5>{!! $empty !!}</h5>
                @endif
            </div><!-- .col-sm-12 -->
        </div><!-- .row -->

    </div><!-- .container-fluid -->
    <!-- Request Modal -->
    @include('client.partials.modal.article')
@endsection

@section('script')
    <script type="text/javascript" src='/assets/js/masonry.js'></script>
    <script type="text/javascript" src='/assets/js/app.js'></script>
    <script type="text/javascript" src='/assets/js/moment.min.js'></script>
    <script type="text/javascript" src='/assets/js/angular-moment.min.js'></script>
    <script type="text/javascript" src='/assets/js/dateTimeInput.js'></script>
    <script type="text/javascript" src='/assets/js/datetimepicker.js'></script>
    <script type="text/javascript" src='/assets/js/datetimepicker.templates.js'></script>
    <script type="text/javascript" src='/assets/js/dirPagination.js'></script>
    <script type="text/javascript" src='/assets/js/ng-file-upload-shim.min.js'></script>
    <script type="text/javascript" src='/assets/js/ng-file-upload.min.js'></script>
    <script type="text/javascript" src='/assets/js/angular-ui-switch.min.js'></script>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-rangy.min.js'>
    </script>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular-sanitize.min.js'>
    </script>
    <script type="text/javascript" src='//cdnjs.cloudflare.com/ajax/libs/textAngular/1.5.0/textAngular.min.js'></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/articles.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/user.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/socket.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/liveChat.js') }}"></script>
    <script type="text/javascript" src="{{ elixir('assets/js/controllers/modal.js') }}"></script>
@endsection