{layout @admin.html}
{block content}
<div class="column-group horizontal-gutters top-space">
  <div class="xlarge-75 large-75 medium-75 small-100 tiny-100">
    <h1>{_'users'}</h1>
  </div>
  <div class="xlarge-25 large-25 medium-25 small-100 tiny-100 bottom-space">
    <a class="ink-button green" href="{=BASE_URL}user/add">{_'new_user'}</a>
  </div>
</div>
<div class ="column-group horizontal-gutters">
  <div class="xlarge-75 large-75 medium-100 small-100 tiny-100">
    <form action="{=BASE_URL}user/search" method="POST" class="ink-form half-bottom-space">
      <input type="search" name="username" placeholder="{_}username{/_}">
      <input type="submit" class="ink-button blue" value="{_}search{/_}">
    </form>
    {if $users}
    <table class="ink-table alternating hover medium">
      <thead>
	<th class="align-left">{_'username'}</th>
	<th class="align-left">{_'email'}</th>
	<th class="align-left">{_'created_at'}</th>
	<th class="align-left">{_'updated_at'}</th>
	<th class="align-left">{_'last_login'}</th>
	<th colspan="3"></th>
      </thead>
      <tbody>
	{foreach $users as $user}
	<tr>
	  <td>{$user->username}</td>
	  <td>{$user->email}</td>
	  <td>{$user->created_at|date:$mediumDate}</td>
	  <td>{$user->updated_at|date:$mediumDate}</td>
	  <td>{$user->last_login|date:$mediumDate}</td>
	  {if $user->status}
	  <td><span class="ink-label green">{_}active{/_}</span></td>
	  {else}
	  <td><span class="ink-label grey">{_}inactive{/_}</span></td>
	  {/if}
	  <td><a href="{=BASE_URL}user/update/{$user->user_id}"><img alt="{_'update'}" src="public/images/edit_24.png"></a></td>
	  {var $confirm = ('confirm_delete_user'|translate:$user->username)}
	  <td><a href="{=BASE_URL}user/delete/{$user->user_id}"><img src="public/images/delete_24.png" onclick="return confirm('{$confirm|noescape}');" alt="{_}delete{/_}"></a></td>
	</tr>
	{/foreach}
      </tbody>
    </table>
    {include 'pagination/ink.html', url: BASE_URL . 'user/list?page=%d'}
    {else}
    <p class="align-center">{_}no_result_found{/_}</p>
    {/if}
  </div>
  <div class="xlarge-25 large-25 medium-100 small-100 tiny-100">
  </div>
</div>
