{% extends "base.html" %}
{% load i18n thumbnail %}
{% block extra_css %}
  <style>
   .table td {
     vertical-align: middle;
   }
  </style>
{% endblock %}
{% block content %}
  <section class="section" >
    <div class="container" >
      <h1 class="title" >{% translate "All Users" %}</h1>
      {% include "messages.html" %}
      <div class="level">
	<div class="level-left">
	  <div class="level-item">
	    {% include "search_bar.html" %}	    
	  </div>
	</div>
	<div class="level-right">
	  <div class="level-item">
	    <div class="buttons">
	      {% if perms.accounts.add_user %}
		<a href="{% url "console:accounts:create" %}" class="button is-primary">{% translate "Add New User" %}</a>
	      {% endif %}
	    </div>
	  </div>
	</div>
      </div>

      {% if filter.filters %}
	{% include "filters.html" %}
      {% endif %}
      <div class="table-container">
	<table class="table is-bordered is-fullwidth">
	  <thead>
	    <tr>
	      <th>ID</th>
	      <th>{% translate "User Info" %}</th>
	      <th>{% translate "Groups" %}</th>
	      <th>{% translate "Active Status" %}</th>
	      <th>{% translate "Joined Date" %}</th>
	      <th>{% translate "Actions" %}</th>
	    </tr>
	  </thead>
	  <tbody>
	    {% for row in object_list %}
	      <tr>
		<td>#{{row.pk}}</td>
		<td>
		  <article class="media">
		    <figure class="media-left">
		      <p class="image is-48x48">
		      {% if row.avatar %}
			{% thumbnail row.avatar "48x48" crop="center" as im %}
			<img class="is-rounded" src="{{im.url}}" />
  	                {% endthumbnail %}
		      {% else %}
			<svg width="48" height="48" data-jdenticon-value="{{row.username}}"></svg>
		      {% endif %}
		      </p>
		    </figure>
		    <div class="media-content">
		      <p>{{row.nickname|default:"未设置"}}</p>
		      <p class="has-text-grey">{{row.username}}, {{row.email}}</p>
		    </div>
		  </article>
		</td>
		<td>{{row.groups.all|join:","}}</td>
		<td>{% include "render_boolean.html" with value=row.is_active %}</td>
		<td>{{row.date_joined}}</td>
		<td>
		  <div class="buttons">
		    {% if perms.accounts.change_user %}
		      <a class="button is-small is-light is-primary" href="{% url "console:accounts:edit" row.pk %}">{% translate "Edit" %}</a>
		    {% endif %}
		    {% if perms.accounts.set_password %}
		      <a class="button is-small is-light" href="{% url "console:accounts:set_password" row.pk %}">{% translate "Set Password" %}</a>
		    {% endif %}
		    {% if perms.accounts.delete_user %}
		      <a class="button is-small is-light is-danger" href="{% url "console:accounts:delete" row.pk %}">{% translate "Delete" %}</a>
		    {% endif %}
		  </div>
		</td>
	      </tr>
	    {% endfor %}
	  </tbody>
	</table>
      </div>
      {% include "pagination.html" %}
    </div>
  </section>
{% endblock %}
