{% extends "base.html" %}
{% block content %}
  <h2 class="subtitle">
    {% if user.is_authenticated and user.role == "admin" %}
      <h3 class="subtitle text-left">注册账户列表：</h3>
      <table class="table" id="account-list-table">
        <thead>
          <tr>
            <th abbr="id" scope="col">id</th>
            <th abbr="email" scope="col">邮箱</th>
            <th abbr="name" scope="col">用户名</th>
            <th abbr="role" scope="col">角色</th>
            <th abbr="isActivated" scope="col">已激活</th>
            <th abbr="btn-submit" class="d-none" scope="col">提交</th>
            <th abbr="btn-delete" class="d-none" scope="col">删除</th>
          </tr>
        </thead>
        <tbody>
          {% for account in accounts %}
            <tr id="{{ 'account-%d'|format(account.id) }}">
              <td scope="row">{{ account.id }}</td>
              <td>{{ account.email }}</td>
              <td>{{ account.name }}</td>
              <td>
                <select>
                  <option value="admin" {% if account.role=="admin" %}selected{% endif %}>
                    admin
                  </option>
                  <option value="user" {% if account.role=="user" %}selected{% endif %}>
                    user
                  </option>
                </select>
              </td>
              <td>
                <input type="checkbox"
                       {% if account.isActivated %}checked{% else %}unchecked{% endif %}/>
              </td>
              <td>
                <button class="btn btn-info" onclick="submit_account(this)">提交</button>
              </td>
              <td>
                <button class="btn btn-danger" onclick="delete_account(this)">删除</button>
              </td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    {% endif %}
  </h2>
  {% with messages = get_flashed_messages() %}
    {% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
  {% endwith %}
  <script>
  var account_list = document.getElementById("account-{{ user.id }}");
  account_list.style.backgroundColor = "lightblue";
  Array.from(account_list.getElementsByTagName("*")).forEach(element => {
    try {
      element.disabled = true;
    } catch (error) {
    }
  });;
  </script>
  <script>
  function submit_account(obj) {
    var account = obj.parentElement.parentElement
    var data = {
      method: "update",
      id: account.children[0].innerHTML,
      email: account.children[1].innerHTML,
      name: account.children[2].innerHTML,
      role: account.children[3].children[0].value,
      isActivated: account.children[4].children[0].checked
    }
    $.ajax({
      type: 'POST',
      url: "{{ url_for('main.manage') }}",
      data: data,
      success: null,
      dataType: null
    }).always(function (data) {
        if (data.startsWith("fail")) {
          alert(data);
        }
        location.reload();
      });
  }

  function delete_account(obj) {
    var account = obj.parentElement.parentElement
    var data = {
      method: "delete",
      id: account.children[0].innerHTML,
      email: account.children[1].innerHTML,
      name: account.children[2].innerHTML,
      role: account.children[3].children[0].value,
      isActivated: account.children[4].children[0].checked
    }
    var ret = confirm("确认删除用户\"" + data.name + "\"吗？")
    if (ret == true) {
      $.ajax({
        type: 'POST',
        url: "{{ url_for('main.manage') }}",
        data: data,
        success: null,
        dataType: null
      }).always(function (data) {
        if (data.startsWith("fail")) {
          alert(data);
        }
        location.reload();
      });
    }
  }

  </script>
  {% with messages = get_flashed_messages() %}
    {% if messages %}<div class="notification is-danger">{{ messages[0] }}</div>{% endif %}
  {% endwith %}
{% endblock content %}