@extends('layouts.master')

@section('content')
<div class="row">
	<div class="col-md-12">
		<table class="table table-striped table-bordered custab">
		    <thead>
		        <tr>
		            <th class="text-center">No</th>
		            <th class="text-center">Word</th>
		            <th class="text-center">Meaning</th>
		            <th class="text-center">Action</th>
		        </tr>
		    </thead>
		    <tbody>
		    	@foreach($all_vocabularies as $vocabulary)
			    	<tr>
		                <td class="text-center">{{ ++$i }}</td>
		                <td class="text-center">{{ $vocabulary->word }}</td>
		                <td class="text-center">{{ $vocabulary->meaning }}</td>
		                <td class="text-center">
							<a class='btn btn-info btn-xs' href="{{url('admin/vocabulary_edit/')}}/{{$vocabulary->id}}">
		                		<span class="glyphicon glyphicon-edit"></span> Edit
		                	</a>
		                </td>
		            </tr>
	            @endforeach
		    </tbody>
		</table>
		<div class="col-md-12">
			<span class="pull-right">
				{!! $all_vocabularies->render() !!}
			</span>
        </div>
	</div>
</div>
<style type="text/css">
.custab{
    border: 1px solid #ccc;
    padding: 5px;
    margin: 5% 0;
    box-shadow: 3px 3px 2px #ccc;
    transition: 0.5s;
    background:#fff;
}
.custab:hover{
    box-shadow: 3px 3px 0px transparent;
    transition: 0.5s;
}
</style>
@endsection