{{-- 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">
          @icon(fa-user-circle-o fa-pr fa-large)
          <h1>
            @if(authed() && user()->is($user))
              @sr(Your dashboard -)
            @else
              @sr(User's page -)
            @endif
            {{ $user->title }}
          </h1>

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

        <div class="card-body">
          @if($user->bio)
            <div class="mb-3">
              {!! Widget::collapsible($user->bio, 350, '8em')->srPrefix('About me:') !!}
            </div>
          @endif

          <table class="bio-table">
            <tbody>
            @if($user->website)
            <tr>
              <td class="text-center pr-2">@icon(fa-link, User's Website:)</td>
              <td>{!! Widget::tryLink($user->website) !!}</td>
            </tr>
            @endif

            <tr>
              <td class="text-center pr-2">@icon(fa-vcard-o, User's handle:)</td>
              <td>{{ $user->handle }}</td>
            </tr>

            <tr>
              <td class="text-center pr-2">@icon(fa-table, Tables:)</td>
              <td>{{ $tables_count }} table{{$tables_count!=1?'s':''}}</td>
            </tr>

            <tr>
              <td class="text-center pr-2">@icon(fa-calendar, Join date:)</td>
              <td>
                <span class="pr-1" data-toggle="tooltip" data-placement="right"
                      title="{{ $user->created_at->format('M n, Y \\a\\t G:i') }}">
                  Joined {{ $user->created_at->diffForHumans() }}
                </span>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>

    {{-- Table list card --}}
    <div class="col-md-8 mt-2 mt-md-0">
      <div class="card">
        <div class="card-header card-header-extra">
          @icon(fa-table fa-pr fa-large)
          <h2>
            @if(authed() && user()->is($user))
              Your Tables
            @else
              User's Tables
            @endif
          </h2>

          <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" aria-label="New Table">New</a>
          @endif
        </div>

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

  </div>
@endsection