<style>
    .table-hover tbody tr:hover td,
    .table-hover tbody tr td:hover {
        background: #FFD493;

    }
</style>
<div class="row">
    <div class="col-lg-12">
        <h1 class="page-header">Menus of Restaurants</h1>
<!--		<p><i><font color="blue"><i class="fa fa-info-circle" aria-hidden="true"></i> Select restaurant to change the menu</i></font></p>-->
        <table class="table table-borders table-striped table-hover">
            <thead>
                <tr>
				    <th></th>
                    <th>hasDishes</th>
                    <!--<th>Picture</th>-->
                    <th>Name</th>                    
                    <th>Address</th>
					<th>City</th>
                    <th>Country</th>
                </tr>
            </thead>
            <tbody>
                @{foreach item in model.list}
                <tr @{if item.Inactive} style="color:silver" @{fi} title="Click to view the menu" onclick="document.location.href='/menus/@{item.key}/@{item.Menu}'" style='cursor: pointer;'>
<!--                    <td style='vertical-align: middle;'>@{index+1}</td> -->
<!--                    <td style='vertical-align: middle;'>
                        <img src='@{item.thumbnail}' alt='@{item.Name}' style='max-width: 75px; max-height: 75px;'/>    
						</td>
 -->                <td><a href="/menus/@{item.key}/@{item.Menu}" title="Edit Menu"><font size="3" color="#FF9900"><i class="fa fa-eye fa-fw"></i></font></a></td>
					<td style="vertical-align: middle">@{if item.hasActiveDishes} <i class="fa fa-check" aria-hidden="true"></i> @{fi}</td>
					<td style='vertical-align: middle;'>@{item.Name}</td>
					<td style='vertical-align: middle;'>@{item.Address}</td>
                    <td style='vertical-align: middle;'>@{item.City}</td>                    
                    <td style='vertical-align: middle;'>@{item['Country']}</td>
                </tr>
                @{end}
            </tbody>
        </table>
    </div>
</div>