@extends('suites.single')

@section('suitemaincontent')

  <div class="col-lg-9">
    <!-- start row for title and date description -->
    <div class="row">
      <div class="col-lg-8 text-center white">
        <div class="mu-info">
          <div class="mu-title">
            {{$microunit->title}}
          </div>
          <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>
      </div><!-- end col-lg-8 -->

      <div class="col-lg-4 text-center white">
        <div class="mu-info">
          <div class="mu-date">
            <span class="mu-date-day">{{ date('j M', strtotime($microunit->created_at)) }}</span>
            <span class="mu-date-month">{{ date('Y', strtotime($microunit->created_at)) }}</span>
          </div>
        </div>
      </div><!-- end col-lg-4 -->
    </div><!-- .row for title and date description -->

    <!-- start row for main description -->
    <div class="row white">
      <div class="col-lg-4 col-lg-push-8 white text-center">
        <div class="mu-info-bt">
          <div class = "panel panel-default">
            <div class = "panel-body">
                <button class="btn bg-red-oplid btn-flat  btn-block">{{$microunit->muid}}</button>
                <button class="btn bg-orange-cat btn-flat btn-block">{{$microunit->category->name}}</button>
            </div>
          </div>
        </div>
        <div class = "panel panel-default">
          <div class = "panel-body mu-target-group">
            <div class="mu-target-group-icon">
              <i class="fa fa-map-marker" aria-hidden="true"></i>
              <span class="mu-target-group-title">Language</span>
            </div>
            <span>German, English, Greek</span>
          </div>
        </div><!-- end panel language description -->
      </div><!--end col-lg-4 -->
      <div class="col-lg-8 col-lg-pull-4 white text-center">
        <div class = "panel panel-default">
          <div class = "panel-body mu-main-info">
            <div class="mu-target-group-icon">
              <i class="fa fa-info-circle" aria-hidden="true"></i>
              <span class="mu-target-group-title">Info</span>
            </div>
            <span>
              {!!$microunit->description!!}
            </span>
          </div>
        </div><!-- end panel microunit description -->
        <div class = "panel panel-default">
          <div class = "panel-body mu-target-group">
            <div class="mu-target-group-icon">
              <i class="fa fa-users" aria-hidden="true"></i>
              <span class="mu-target-group-title">Target Group</span>
            </div>
            <span>
              {{$microunit->target}}
            </span>
          </div>
        </div><!-- end panel target group description -->
      </div><!--end col-lg-8 -->
    </div><!--end row -->
    <!-- end row for main description -->

    <div class="row white">
      <div class="col-lg-8 white text-center">
        <div class = "panel panel-default">
          <div class = "panel-body mu-tags">
            <div class="mu-tags-icon">
              <i class="fa fa-tag" aria-hidden="true"></i>
              <span class="mu-tags-title">Tags</span>
            </div>
            <span>chef, Cooking, Onion, Kitchen, Vegetables
            </span>
          </div>
        </div><!-- end panel microunit description -->
      </div><!--end col-lg-8 -->
      <div class="col-lg-4 white text-center">
        <div class="mu-info-bt">
          <div class = "panel panel-default">
            <div class = "panel-body mu-tags">
              <div class="mu-tags-icon">
                <i class="fa fa-creative-commons" aria-hidden="true"></i>
                <span class="mu-tags-title">Creative Commons</span>
              </div>
            </div>
          </div>
        </div>
      </div><!--end col-lg-4 -->
    </div><!--end row -->
    <!-- end row for tags -->
  </div><!--. end col-lg9 -->


@endsection