@extends('main')

@section('title', ' Home')

@section('SearchLetters')
  @include('partials._searchletter')
@endsection

@section('content')
<div class="row text-center">

@foreach ($microunits as $microunit)
<div class="col-lg-3 col-md-6 row-padding-bottom minhm">
  <article class="card">
    <header class="card_thumb">
        <a href="{{route('microunits.single', $microunit->id)}}"><img src="{{$microunit->image}}"/></a>
    </header>
    <date class="card_date">
      <span class="card_date_day">{{ date('j M', strtotime($microunit->created_at)) }}</span>
      <span class="card_date_month">{{ date('Y', strtotime($microunit->created_at)) }}</span>
    </date>
    <div class="card_body">
        <div class="card_category"><a href="{{ route('topics.single', $microunit->category->id) }}">{{$microunit->category->name}}</a></div>
        <h2 class="card_title"><a href="{{route('microunits.single', $microunit->id)}}">{{substr(strip_tags($microunit->title), 0, 31)}}{{strlen(strip_tags($microunit->title)) > 31 ? "..." : ""}}</a></h2>
        <div class="card_meta">
            <span class="icon"><i class="fa fa-clock-o padding-right" aria-hidden="true"></i>6min read</span>
            <span class="icon"><i class="fa fa-eye padding-right" aria-hidden="true"></i>258 Views</span>
            <span class="icon"><i class="fa fa-star padding-right" aria-hidden="true"></i>58</span>
        </div>
        <div class="card_description">
        {{substr(strip_tags($microunit->description), 0, 150)}}{{strlen(strip_tags($microunit->description)) > 150 ? "..." : ""}}
        </div>
    </div>
    <footer class="card_footer">
        <div class="card_author">
          <div class="card_author_info" style="background-image:url('{{ $microunit->author->image }}')"></div>
          <div class="card_author_text">
            @if($microunit->author)
              <a href="{{route('authors.single', $microunit->author->id)}}">{{$microunit->author->name}}</a>
            @endif
          </div>
        </div>
        <div class="card_info">
          <div class="card_info_icon">
              <i class="fa fa-play-circle-o padding-right" aria-hidden="true"></i>
          </div>
          <div class="card_info_text">
            {{$microunit->muid}}
          </div>
        </div>
    </footer>
  </article>
</div><!--End First Topic Card -->
@endforeach
</div><!--.row content -->
@endsection