<nav class="breadcrumbs">
  <a routerLink="/" class="breadcrumb">Главная</a>
  <a [routerLink]="['/news/' + newsitem.category.slug]" class="breadcrumb">{{newsitem.category.name}}</a>
  <span class="breadcrumb">{{newsitem.caption}}</span>
</nav>
<div class="news-detail row">
  <div class="col-md-9 col-lg-9 col-xs-12">
    <div class="news-detail-content white">
      <div class="news-detail__header">
        <div [routerLink]="['/news/' + newsitem.category.slug]" class="news-detail__category">{{newsitem.category.name}}</div>
        <h1>{{newsitem.caption}}</h1>
        <time class="time">
            <svg class="time-icon"  viewBox="6366 382 16 16">
                <path id="Path_13" data-name="Path 13" class="cls-1" d="M2.4,2.4A7.263,7.263,0,0,1,8,0a7.263,7.263,0,0,1,5.6,2.4A7.263,7.263,0,0,1,16,8a7.263,7.263,0,0,1-2.4,5.6A7.263,7.263,0,0,1,8,16a7.263,7.263,0,0,1-5.6-2.4A7.984,7.984,0,0,1,0,8,7.263,7.263,0,0,1,2.4,2.4Zm9.2,9.2.933-.933L9.2,7.333,8,2H6.667V8a1.21,1.21,0,0,0,.4.933.466.466,0,0,0,.267.133Z" transform="translate(6366 382)"/>
            </svg>
            <span id="dateTime">{{published}}</span>
        </time>
        <!-- <div class="news-detail__control">
          <div class="news-detail__next">
              <svg  viewBox="5281 339 48 48">
                <g id="Group_77" data-name="Group 77" transform="translate(4436)">
                  <circle id="Ellipse_121" data-name="Ellipse 121" class="control__circle" cx="24" cy="24" r="24" transform="translate(845 339)"/>
                  <g id="Forward_arrow" data-name="Forward arrow" transform="translate(-393 -152)">
                    <path id="Path_10" data-name="Path 10" class="control__arrow" d="M8,0,6.545,1.455l5.506,5.506H0V9.039H12.052L6.545,14.545,8,16l8-8Z" transform="translate(1254 507)"/>
                  </g>
                </g>
              </svg>
          </div>
          <div class="news-detail__prev no-more">
              <svg  viewBox="5281 379 48 48">
                <g id="Group_76" data-name="Group 76" transform="translate(4436)">
                  <circle id="Ellipse_122" data-name="Ellipse 122" class="control__circle" cx="24" cy="24" r="24" transform="translate(845 379)"/>
                  <g id="Forward_arrow" data-name="Forward arrow" transform="translate(861 395)">
                    <path id="Path_10" data-name="Path 10" class="control__arrow" d="M8,0,9.455,1.455,3.948,6.961H16V9.039H3.948l5.506,5.506L8,16,0,8Z"/>
                  </g>
                </g>
              </svg>            
          </div>
        </div> -->
      </div>
      <img src="{{newsitem.cover}}" alt="{{newsitem.caption}}" class="img-responsive" *ngIf="newsitem.cover !== null">
      <div [innerHTML]="newsitem.short_text"></div>
      <hr>
      <div [innerHTML]="newsitem.full_text | safeHtml"></div>
      <div class="social-share row">
          <p class="col-xs-12">Поделиться</p>
          <share-buttons
          [include]="['facebook','vk','twitter','google','whatsapp','telegram']"
          [show]="6"
          ></share-buttons>
      </div>
    </div>
    <div class="news-detail__back">
        <button type="button" class="btn btn-white" routerLink="../">Назад к списку новостей</button>
    </div>
  </div>
  <div class="col-md-3 col-sm-12">
    <app-news-list-right></app-news-list-right>
  </div>
</div>