{% from "utils.html" import submit_button, danger_button, success_check, fail_cross %}
{% extends "layout.html" %}
{% block title %}Users{% endblock %}

{% macro check_or_cross(b) %}
{% if b %}
{{ success_check() }}
{% else %}
{{ fail_cross() }}
{% endif %}
{% endmacro %}

{% block content %}
<div class='w-full md:w-3/5 flex flex-col md:flex-row md:space-x-8 mb-8'>
  <div class='w-full md:w-2/5'>
    <h1 class='text-2xl font-light mb-4'>Create User</h1>
    <form action="{{ base_path }}/users" method="POST">
      <div class='flex-col space-y-2'>
        <div class='flex items-center space-x-4'>
          <span class='w-32'>Username</span>
          <input class='border rounded-sm p-1 text-sm w-48' required name="username" />
        </div>
        <div class='flex items-center space-x-4'>
          <span class='w-32'>Login ID</span>
          <input class='border rounded-sm p-1 text-sm w-48' name="login_id" />
        </div>
        <div class='space-y-1'>
          <div><input type="checkbox" name="is_developer" value="1" /> Developer</div>
          <div><input type="checkbox" name="is_service_account" value="1" /> Service Account</div>
        </div>
        <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
        <div class='mt-4'>
          {{ submit_button('Create') }}
        </div>
      </div>
    </form>
  </div>
  <div class='w-full md:w-2/5'>
    <h1 class='text-2xl font-light mb-4'>Reactivate User</h1>
    <form action="{{ base_path }}/users/activate" method="POST" id="reactivate-user-form">
      <div class='flex-col space-y-2'>
        <div class='flex items-center space-x-4'>
          <span class='w-32'>User ID</span>
          <input id="inactive-id" class='border rounded-sm p-1 text-sm w-48' name="id" />
        </div>
        <div class='flex items-center space-x-4'>
          <span class='w-32'>Username</span>
          <input id="inactive-username" class='border rounded-sm p-1 text-sm w-48' name="username" />
        </div>
        <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
        <div class='mt-4'>
          {{ submit_button('Reactivate') }}
        </div>
      </div>
    </form>
  </div>
  <div class='w-full md:w-2/5'>
    <h1 class='text-2xl font-light mb-4'>Delete User</h1>
    <form action="{{ base_path }}/users/delete" method="POST">
      <div class='flex-col space-y-2'>
        <div class='flex items-center space-x-4'>
          <span class='w-32'>User ID</span>
          <input class='border rounded-sm p-1 text-sm w-48' required name="id" />
        </div>
        <div class='flex items-center space-x-4'>
          <span class='w-32'>Username</span>
          <input class='border rounded-sm p-1 text-sm w-48' required name="username" />
        </div>
        <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
        <div class='mt-4'>
          {{ danger_button('Delete') }}
        </div>
      </div>
    </form>
  </div>
  <div class='w-full md:w-1/5'>
    <h1 class='text-2xl font-light mb-4'>Invalidate All User Sessions</h1>
    <form action="{{ base_path }}/users/invalidate_all_sessions" method="POST">
      <div class='flex-col space-y-4'>
        <p class='text-sm text-amber-700'>
          This will force all users to log back in to access the system. Any running jobs or batch submissions will continue to work normally.
        </p>
        <input type="hidden" name="_csrf" value="{{ csrf_token }}" />
        <div>
          {{ danger_button('Invalidate all user sessions') }}
        </div>
      </div>
    </form>
  </div>
</div>

<br />
<h1 class='text-2xl font-light mb-4'>Users</h1>
<div class="mb-4 flex space-x-4">
  <label class="inline-flex items-center">
    <input type="checkbox" id="show-active" class="form-checkbox">
    <span class="ml-2">Only Active</span>
  </label>
  <label class="inline-flex items-center">
    <input type="checkbox" id="show-developers" class="form-checkbox">
    <span class="ml-2">Only Developers</span>
  </label>
</div>
<table class="table-auto w-full" id="users-table">
  <thead>
    <tr>
      <th class='h-12 bg-slate-200 font-light rounded-tl pl-2'>ID</th>
      <th class='h-12 bg-slate-200 font-light text-left'>Username</th>
      <th class='h-12 bg-slate-200 font-light text-left'>Login ID</th>
      <th class='h-12 bg-slate-200 font-light text-left'>Hail Identity</th>
      <th class='h-12 bg-slate-200 font-light text-left'>State</th>
      <th class='h-12 bg-slate-200 font-light text-left'>Last Active</th>
      <th class='h-12 bg-slate-200 font-light'>Developer</th>
      <th class='h-12 bg-slate-200 font-light rounded-tr pr-2'>Robot</th>
    </tr>
  </thead>
  <tbody class='border border-collapse border-slate-50'>
    {% for user in users %}
    <tr class='border border-collapse hover:bg-slate-100 font-light'>
      <td class='text-center'>{{ user['id'] }}</td>
      <td>{{ user['username'] }}</td>
      <td>{{ user['login_id'] }}</td>
      <td>{{ user['hail_identity'] }}</td>
      <td class='text-center' data-state="{{ user['state'] }}">{{ user['state'] }}</td>
      <td class='text-center' data-state="{{ user['last_activated'] }}">{{ user['last_activated'] }}</td>
      <td class='text-center' data-developer="{{ user['is_developer'] }}">{{ check_or_cross(user['is_developer']) }}</td>
      <td class='text-center'>{{ check_or_cross(user['is_service_account']) }}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script defer src="{{auth_base_url}}/auth/static/js/users.js"></script>
{% endblock %}