@extends('layouts.app')
@section('js')
    <script src="{{ mix('js/pages.js') }}"></script>
@endsection
@section('content')
    <div class='row'>
        <div class='col-8 offset-col-2'>
            <h2 class="font-semibold text-xl text-gray-800 leading-tight">
                {{ __('Pages') }}
            </h2>
        </div>

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div id="" class="p-6 bg-white border-b border-gray-200">
                        <table class='table table-hover popular-posts-table'>
                            <thead>
                                <th>Page</th>
                                <th>Language</th>
                                <th>Access token</th>
                                <th></th>
                            </thead>
                            <tbody>
                            @foreach ($pages as $page)
                                <tr>
                                    <td>{{ $page->name }}</td>
                                    <td>{{ $page->lang }}</td>
                                    <td>
                                        <input id="input-access-token-{{$page->id}}" data-id="{{$page->id}}" class="form-control" type="text" value="{{ $page->access_token }}"/>
                                    </td>
                                    <td>
                                        <button data-id={{$page->id}} type="button" class="btn btn-primary btn-update" data-id="{{$page->id}}">Update</button>
                                    </td>
                                </tr>
                            @endforeach
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection