@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
          @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