{{-- Basic table view --}}

@extends('layouts.app')

@php
/** @var \App\Models\Table $table */

if (!isset($tab) || $tab == '') $tab = 'edit-rows';
@endphp

@section('content')
<div class="row justify-content-start px-3">
  <div class="d-flex w-100 align-items-center">
    <small class="flex-grow-1" style="font-size: 120%;">
      <a href="{{ route('profile.view', $table->owner->name) }}" class="link-no-color">{{ $table->owner->handle }}</a>{{--
      --}}<span class="px-1">/</span>{{--
      --}}<b><a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->name }}</a></b>
    </small>

    <h1 class="mx-3">
      <a href="{{ $table->viewRoute }}" class="link-no-color">{{ $table->title }}</a>
    </h1>
    <a href="{{$table->draftDiscardRoute}}" class="btn btn-outline-danger mr-2" @tooltip(Discard changes)>
      @icon(fa-trash-o, sr:Discard)
    </a>
    @if(user()->ownsTable($table))
      <a href="" class="btn btn-outline-success" @tooltip(Save the changes and apply them as a new table revision)>
        @icon(fa-save fa-pr)Commit
      </a>
    @else
      <a href="" class="btn btn-outline-success" @tooltip(Submit your changes for review by the table owner)>
        @icon(fa-save fa-pr)Submit
      </a>
    @endif
  </div>
</div>

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link{{ $tab=='edit-rows'?' active':'' }}" href="{{ $table->getDraftRoute('edit-rows') }}">Edit Rows</a>
  </li>
  <li class="nav-item">
    <a class="nav-link{{ $tab=='add-rows'?' active':'' }}" href="{{ $table->getDraftRoute('add-rows') }}">Add Rows</a>
  </li>
  <li class="nav-item">
    <a class="nav-link{{ $tab=='manage-columns'?' active':'' }}" href="{{ $table->getDraftRoute('manage-columns') }}">Columns</a>
  </li>
  <li class="nav-item">
    <a class="nav-link{{ $tab=='review'?' active':'' }}" href="{{ $table->getDraftRoute('review') }}">Note & Review</a>
  </li>
  <li class="nav-item ml-auto pt-2 pr-2 opacity-fade" style="opacity:0" id="draft-busy">
    @icon(fa-hourglass, Working...)
  </li>
</ul>

<div class="row justify-content-center mb-2">
  @yield('tab-content')
</div>{{-- End of row --}}

@endsection