{{-- List of table revisions --}}

@extends('layouts.app')

@php
/** @var \App\Models\Table $table */
/** @var \App\Models\Revision[]|\Illuminate\Support\Collection $revisions */
@endphp

@section('content')
  <div class="row justify-content-start px-3">
    <div class="d-flex w-100 align-items-center">
      @include('table._header-handle')

      <h1 class="mx-3" id="table-title">{{ $table->title }}</h1>
      <a href="{{ $table->viewRoute }}" class="btn btn-outline-primary py-1 btn-sm" @tooltip(Back to Table)>
        @icon(fa-reply, sr:Back to Table)
      </a>
    </div>
  </div>

  <div class="row px-3 border-top pt-3">
    <div class="col-md-12">
      <h2>Table Revisions</h2>

      @php
        $revIds = $revisions->pluck('id');
      @endphp

      @foreach($revisions as $i => $revision)
        @php
        $num = count($revisions) - $i;
        @endphp
        <div class="x-revision rounded border box-shadow mb-3 p-2" id="revision-{{$revision->id}}">
          <div class="row">
            <div class="col-md-8">
              #{{$num}}
              – {{ $revision->created_at->format('Y-m-d, G:i:s') }}
              @if($i == 0)
                <span class="text-muted ml-1">(current)</span>
              @else
                <span class="text-muted ml-1">
                  (<a class="link-no-color" href="{{ $table->viewRoute }}?rev={{$num}}">see table in this revision</a>)
                </span>
              @endif
            </div>
            <div class="col-md-4 text-right">
              @if($revision->ancestor_id)
                @if ($revIds->contains($revision->ancestor_id))
                  <span class="x-revision-link text-muted" data-id="{{$revision->ancestor_id}}">Show parent</span>
                @else
                  <span class="text-muted">Forked from elsewhere</span>
                @endif
              @endif
            </div>
          </div>

          <div class="row">
            <div class="col-md-12" style="font-size:140%;">
              {{ $revision->note }}
            </div>
          </div>
        </div>
      @endforeach
    </div>
  </div>

@endsection

@push('scripts')
  <style>
    .x-revision.highlight {
      background: #a5d5ff;
      border-color: #a5d5ff;
    }

    .x-revision-link {
      cursor: pointer;
    }
  </style>

  <script>
    ready(function() {
      $('.x-revision-link').on('mouseenter', function () {
        $('#revision-'+$(this).data('id')).addClass('highlight');
      }).on('mouseleave', function () {
        $('#revision-'+$(this).data('id')).removeClass('highlight');
      })
    });
  </script>
@endpush