{{-- User's dashboard / profile page --}}
@extends('layouts.app')

@php
/** @var \App\Models\Table[] $tables */
/** @var \App\Models\User $user */
@endphp

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

    {{-- Dash card --}}
    <div class="col-md-4">
      <div class="card">
        <div class="card-header card-header-extra">
          <i class="fa-user-circle-o fa-pr fa-large"></i>{{ $user->title }}

          @if(authed() && user()->is($user))
            <a href="{{route('profile.edit')}}" class="btn ml-auto">Edit</a>
          @endif
        </div>

        <div class="card-body">
          @if (session('status'))
            <div class="alert alert-success" role="alert">
              {{ session('status') }}
            </div>
          @endif

          @if($user->bio)
            @if(mb_strlen($user->bio) > 250)
              <p id="bio-short" aria-hidden=true>
                {{mb_substr($user->bio, 0, 250)}}…
                <a class="text-muted small" title="Show more" href="#" onclick="$('#bio-short').addClass('hidden'); $('#bio-full').removeClass('hidden'); return false;">
                  [more]
                </a>
              </p>
              <p id="bio-full" class="hidden">
                {{ $user->bio }}
                <a class="text-muted small" title="Collapse" href="#" onclick="$('#bio-full').addClass('hidden'); $('#bio-short').removeClass('hidden'); return false;">
                  [collapse]
                </a>
              </p>
            @else
              <p>
                {{ $user->bio }}
              </p>
            @endif
          @endif

          @if($user->website)
            <p>
              <i class="fa-link fa-pr" aria-label="User's Website" title="User's Website"></i>{{--
              --}}<a href="{{ $user->website }}">{{ $user->website }}</a>
            </p>
          @endif

          <p class="mb-0">
            <i class="fa-calendar fa-pr" aria-hidden=true></i>{{--
            --}}Joined {{ $user->created_at->diffForHumans() }}
          </p>
        </div>
      </div>
    </div>

    {{-- Table list card --}}
    <div class="col-md-8">
      <div class="card">
        <div class="card-header card-header-extra">
          <span>
            @if(authed() && user()->is($user))
              Your Tables
            @else
              User's Tables
            @endif
          </span>

          <nav class="ml-auto" aria-label="Pages of the table list">
            {{ $tables->links(null, ['ulClass' => 'pagination-sm mb-0 pagination-outline-light']) }}
          </nav>

          @if(authed() && user()->is($user))
            <a href="{{route('table.create')}}" class="btn ml-3">New</a>
          @endif
        </div>

        @include('profile._table-list')
      </div>
    </div>

  </div>
@endsection