@extends('layouts.layout-inner')

@section('content')
<style>
  #contentPage .row {
    /* column width */
    -moz-column-width: 25em;
    -webkit-column-width: 25em;
    /* space between columns */
    -moz-column-gap: 1em;
    -webkit-column-gap: 1em;
  }
  #contentPage .item {
    display: inline-block;
    width: 100%;
  }
</style>
<div class="container-fluid no-padding">
  <div class="inner-page-title-wrap">
    <div class="inner-page-title">
      <h2>{{ isset($pageTitle) ? $pageTitle : 'Untitled' }}</h2>
    </div>
    <div class="inner-page-title-pointer"></div>
  </div>
</div>

<div id="newsPage" class="container top-bot-spacer-40" ng-controller="newsCtrl" data-ng-init="init();loadNewsByKey('month', {{ date('m') }}, currentYear)">
  <ul class="list-inline">
    <li ng-class="month.id == currentMonth ? 'active' : ''" ng-repeat="month in monthNames">
      <a href="" ng-click="loadNewsByKey('month', month.id, currentYear)"><% month.name %></a>
    </li>
  </ul>
  <div class="clearfix"></div>
  <div class="container newsdate-selector">
    <div class="row">
      <div class="col-xs-6 col-sm-6 col-md-6 no-padding">
        <h2><a href=""><% currentMonthName %></a></h2>
      </div>
      <div class="col-xs-6 col-sm-6 col-md-6 no-padding">
        <h2 class="pull-right">
          <a href="" class="left-c no-border" ng-click="prevYear(currentYear)"><img src="{{ asset('images/arrow-left-sm.png') }}" alt=""></a>
          <a href=""><% currentYear %></a>
          <a href="" class="right-c no-border" ng-click="nextYear(currentYear)"><img src="{{ asset('images/arrow-right-sm.png') }}" alt=""></a>
        </h2>
      </div>
    </div>
  </div>
  <div class="clearfix"></div>
  <div id="contentPage" class="container">
    <div class="row">
      <div class="item well border-top-grn border-btm-gry no-padding" ng-repeat="news in listNews">
        <div class="padbox-15">
          <div class="latest-news-date bgwhite"><% news.created_at | dateToISO | date:'d' %><br>
            <span><% news.created_at | dateToISO | date:'MMM yyyy' %></span></div>
          <h2><% news.title %></h2>
        </div>
        <div class="clearfix"></div>
        <div class="padbox-15-r-b-l">
          <div class="border-btm"></div>
          <p ng-bind-html="news.description | limitTo: 100"></p>
        </div>
        <div class="newslink-box"><a href="/news/<% news.slug %>" class="latest-news-rm">Read More</a></div>
      </div>

      <div class="no-padding" ng-if="listNews.length <= 0">No items to display.</div>
    </div>
  </div>
</div>
@endsection