@extends("flowdash::layouts.{$layout}", [
  'title' => 'Profile',
  'user_header' => false
])

@section('content')
<div style="padding-bottom: calc(5.125rem / 2); position: relative; margin-bottom: 1.5rem;">
  <div class="bg-primary" style="min-height: 150px;">
    <div class="d-flex align-items-end {{ $containerClass ?? 'container' }} page__container" style="position: absolute; left: 0; right: 0; bottom: 0;">
      <div class="avatar avatar-xl">
        <img src="{{ asset('/vendor/flowdash/images/avatar/demi.png') }}" alt="avatar" class="avatar-img rounded" style="border: 2px solid white;">
      </div>
      <div class="card-header card-header-tabs-basic nav flex" role="tablist">
        <a href="#activity" class="active show" data-toggle="tab" role="tab" aria-selected="true">Activity</a>
        <a href="#purchases" data-toggle="tab" role="tab" aria-selected="false">Purchases</a>
        <a href="#emails" data-toggle="tab" role="tab" aria-selected="false">Emails</a>
        <a href="#quotes" data-toggle="tab" role="tab" aria-selected="false">Quotes</a>
      </div>
    </div>
  </div>
</div>

@php
$activity = [[
  'avatar' => "/vendor/flowdash/images/256_daniel-gaffey-1060698-unsplash.jpg",
  'name' => "Sherri J. Cardenas", 
  'date' => "3 days ago",
  'content' => '<p>Thanks for contributing to the release of FREE Admin Vision - PRO Admin Dashboard Theme <a href="">https://www.frontted.com/themes/admin-vision...</a> 🔥</p><p><a href="">#themeforest</a> <a href="">#EnvatoMarket</a></p>',
  'favorites' => 38,
  'likes' => 71
], [
  'avatar' => "/vendor/flowdash/images/256_rsz_1andy-lee-642320-unsplash.jpg",
  'name' => "Jenell D. Matney", 
  'date' => "4 days ago",
  'content' => '<p>Rails 5 Bootstrap 4 Boilerplate Admin Dashboard on <a href="">https://t.co/Wh7jE0yz4t</a> 😉',
  'card' => [
    'image' => "/vendor/flowdash/images/choose/demo1.png",
    'title' => "Admin Dashboard Template",
    'description' => "Made with Rails 5 and Bootstrap 4",
    'link' => "frontted.com"
  ],
  'favorites' => 156,
  'likes' => 351
]]
@endphp

<div class="{{ $containerClass ?? 'container' }} page__container">
  <div class="row">
    <div class="col-lg-3">
      <h1 class="h4 mb-1">Adrian Demian</h1>
      <p class="text-muted">@AdrianDemian</p>
      <p>Bootstrap 4 Admin Dashboard Themes</p>
      <div class="text-muted d-flex align-items-center">
        <i class="material-icons mr-1">location_on</i>
        <div class="flex">Dracula's Castle, Transilvania</div>
      </div>
      <div class="text-muted d-flex align-items-center">
        <i class="material-icons mr-1">link</i>
        <div class="flex"><a href="https://www.frontted.com">frontted.com</a></div>
      </div>
    </div>
    <div class="col-lg-9">
      <div class="tab-content">
        <div class="tab-pane active" id="activity">
          
          @foreach($activity as $item)
          <div class="card">
            <div class="px-4 py-3">
              <div class="d-flex mb-1">
                <div class="avatar avatar-sm mr-3">
                  <img src="{{ asset($item['avatar']) }}" alt="Avatar" class="avatar-img rounded-circle">
                </div>
                <div class="flex">
                  <div class="d-flex align-items-center mb-1">
                    <strong class="text-15pt">{{ $item['name'] }}</strong>
                    <small class="ml-2 text-muted">{{ $item['date'] }}</small>
                  </div>
                  <div>
                    {!! $item['content'] !!}
                  </div>
                  @if(isset($item['card']))
                  <a href="" class="card my-3 text-body decoration-0">
                    <img src="{{ asset($item['card']['image']) }}" alt="image" class="rounded card-img-top">
                    <span class="card-footer d-flex flex-column">
                      <strong>{{ $item['card']['title'] }}</strong>
                      <span>{{ $item['card']['description'] }}</span>
                      <span class="text-muted">{{ $item['card']['link'] }}</span>
                    </span>
                  </a>
                  @endif
                  <div class="d-flex align-items-center">
                    <a href="" class="text-muted d-flex align-items-center decoration-0"><i class="material-icons mr-1" style="font-size: inherit;">favorite_border</i> {{ $item['favorites'] }}</a>
                    <a href="" class="text-muted d-flex align-items-center decoration-0 ml-3"><i class="material-icons mr-1" style="font-size: inherit;">thumb_up</i> {{ $item['likes'] }}</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
          @endforeach

        </div>
      </div>
    </div>
  </div>
</div>
@endsection