{% extends 'base.html' %}
{% block title %}管理页面{% endblock %} 
{% block header %}
  <h2 class="text-center">管理主页</h2>
  <script>
    function control_modal(op, modal_id, uid='1'){
      modal_elm = document.getElementById(modal_id);
      if (op == 'active') {
        modal_elm.classList.add('active');
        model_form = document.getElementById("modal-form");
        model_form.attributes['action'].nodeValue = '/admin/updateuser/' + uid + '/';
      } else {
        modal_elm.classList.remove('active');
      }
    }
    </script>
{% endblock %}

{% block content %}
<div class="modal" id="modal-updateuser">
  <a onclick="control_modal('diactiate', 'modal-updateuser')" class="modal-overlay" aria-label="Close"></a>
  <div class="modal-container">
    <div class="modal-header">
      <a onclick="control_modal('diactiate', 'modal-updateuser')" class="btn btn-clear float-right" aria-label="Close"></a>
      <div class="modal-title h5">修改用户信息</div>
    </div>
    <div class="modal-body">
      <form id="modal-form" method="post" class="form-group" action="/admin/updateuser/1/">
        <label class="form-label" for="username">用户名</label>
        <input class="form-input" name="username" id="username"> 
        <label class="form-label" for="usermail">邮箱</label>
        <input class="form-input" name="usermail" id="usermail">         
      </form>
    </div>
    <div class="modal-footer">
      <input form="modal-form" class="btn btn-primary" type="submit" value="提交">
      <a href="" class="btn">取消</a>
    </div>
  </div>
</div>
  <div>
    <span>
      <h3 class="px-2">用户列表</h3>
    </span>
  </div>
  <div class="mx-2">
    <table class="table">
      <thead>
        <tr>
          <th>UID</th> <th>用户名</th> <th>邮箱</th> <th>用户空间</th> <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {% for user in users%}
        <tr>
          <td>{{ user['user_id'] }}</td>
          <td>{{ user['user_name'] }}</td>
          <td>{{ user['user_mail'] }}</td>
          <td>{{ user['user_limit'] / 1024 / 1024 }}GB</td>
          <td>
            <a class="btn" href="/admin/removeuser?uid={{user['user_id']}}" >删除</a>
            <a class="btn" onclick="control_modal('active', 'modal-updateuser', '{{user['user_id']}}')">修改</a>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  <div class="text-right p-2">
    <a href="/admin/adduser" class="btn btn-primary">新建用户</a>
  </div>
{% endblock %}