@extends('layouts.main')

@section('page-specific-styles')
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.css">
@endsection

@section('content')
<div class="container">
  <table class="table table-bordered" id="sports">
    <thead>
      <tr>
        <th>KEY</th>
        <th>GROUP</th>
        <th>TITLE</th>
        <th>DESCRIPTION</th>
      </tr>
    </thead>
    <tbody>
    @forelse($sports as $sport)
    <tr>
        <td><a href="{{ url('odd/api/test/sport/'.$sport->key.'/list') }}"> {{ $sport->key  }} </a></td>
        <td>{{ $sport->group  }}</td>
        <td>{{ $sport->title  }}</td>
        <td>{{ $sport->description  }}</td>
    </tr>
    @empty
    <tr>
        <td>No Sports</td>
    </tr>
    @endforelse
    </tbody>
  </table>
</div>
@endsection

@section('page-specific-scripts')
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.js"></script>
<script>
    let table = new DataTable('#sports', {
    });
</script>
@endsection