{% extends "op_zz_frame.html" %}
{% block centercontent %}
<main class="ct-docs-content-col" role="main">
  <h1 class="ct-docs-page-h1-title" id="content">Tenant Users</h1>

  {% if errors %}
  <div class="alert alert-danger" role="alert">
    <ul class="mb-0">
      {% for error in errors %}
      <li>{{ error }}</li>
      {% endfor %}
    </ul>
  </div>
  {% endif %}

  {% if message %}
  <div class="alert alert-success" role="alert">{{ message }}</div>
  {% endif %}

  <div class="table-responsive tenant-users-table-wrapper">
    <table class="table align-items-center mb-0 tenant-users-table">
      <thead>
        <tr>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 px-3">Name</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 px-3">E-mail</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 px-3">Login</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 px-3">Password</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 px-3">Tenant</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 px-3">Visible menus</th>
          <th class="text-uppercase text-secondary text-xxs font-weight-bolder opacity-7 px-3">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for user in users %}
        <tr>
          <form method="post">
            <td class="align-middle px-3 py-3">
              <input class="form-control tenant-users-input" type="text" name="name" value="{{ user.name }}" required maxlength="255">
            </td>
            <td class="align-middle px-3 py-3">
              <input class="form-control tenant-users-input" type="email" name="email" value="{{ user.email }}" required maxlength="255">
            </td>
            <td class="align-middle px-3 py-3">
              <input class="form-control tenant-users-input" type="text" name="login" value="{{ user.login }}" required maxlength="64">
            </td>
            <td class="align-middle px-3 py-3">
              <input class="form-control tenant-users-input" type="password" name="password" placeholder="Leave blank to keep" autocomplete="new-password">
            </td>
            <td class="align-middle px-3 py-3">
              <select class="form-control tenant-users-tenant" name="tenant_id" required>
                <option value="" disabled {% if not user.tenant_id %}selected{% endif %}>Select tenant</option>
                {% for tenant in tenants %}
                <option value="{{ tenant.tenant_id }}" {% if tenant.tenant_id == user.tenant_id %}selected{% endif %}>{{ tenant.name }}</option>
                {% endfor %}
              </select>
            </td>
            <td class="align-middle px-3 py-3">
              <div class="tenant-users-visible-menus d-flex flex-wrap gap-3">
                {% set hidden = user.hidden_menus or [] %}
                {% for key, label in menu_choices %}
                <div class="form-check form-switch me-3">
                  <input class="form-check-input" type="checkbox" role="switch" id="user_{{ user.user_id }}_menu_{{ key }}" name="visible_menus" value="{{ key }}" {% if key not in hidden %}checked{% endif %}>
                  <label class="form-check-label" for="user_{{ user.user_id }}_menu_{{ key }}">{{ label }}</label>
                </div>
                {% endfor %}
              </div>
            </td>
            <td class="align-middle px-3 py-3">
              <input type="hidden" name="user_id" value="{{ user.user_id }}">
              <button class="btn btn-default btn-sm me-2" name="action" value="update" type="submit">Save</button>
              <button class="btn btn-default btn-sm" name="action" value="delete" type="submit" formnovalidate>Delete</button>
            </td>
          </form>
        </tr>
        {% endfor %}
        <tr>
          <form method="post">
            <td class="align-middle px-3 py-3">
              <input class="form-control tenant-users-input" type="text" name="name" required maxlength="255">
            </td>
            <td class="align-middle px-3 py-3">
              <input class="form-control tenant-users-input" type="email" name="email" required maxlength="255">
            </td>
            <td class="align-middle px-3 py-3">
              <input class="form-control tenant-users-input" type="text" name="login" required maxlength="64">
            </td>
            <td class="align-middle px-3 py-3">
              <input class="form-control tenant-users-input" type="password" name="password" required autocomplete="new-password">
            </td>
            <td class="align-middle px-3 py-3">
              <select class="form-control tenant-users-tenant" name="tenant_id" required>
                <option value="" selected disabled>Select tenant</option>
                {% for tenant in tenants %}
                <option value="{{ tenant.tenant_id }}">{{ tenant.name }}</option>
                {% endfor %}
              </select>
            </td>
            <td class="align-middle px-3 py-3">
              <div class="tenant-users-visible-menus d-flex flex-wrap gap-3">
                {% for key, label in menu_choices %}
                <div class="form-check form-switch me-3">
                  <input class="form-check-input" type="checkbox" role="switch" id="new_menu_{{ key }}" name="visible_menus" value="{{ key }}" checked>
                  <label class="form-check-label" for="new_menu_{{ key }}">{{ label }}</label>
                </div>
                {% endfor %}
              </div>
            </td>
            <td class="align-middle px-3 py-3">
              <button class="btn btn-primary btn-sm" name="action" value="add" type="submit">Add User</button>
            </td>
          </form>
        </tr>
      </tbody>
    </table>
  </div>
</main>
{% endblock %}