{% extends "base.html" %}
{% from "_ui.html" import page_head, role_pill, empty %}
{% block title %}Manage Users{% endblock %}
{% block content %}
{{ page_head('users', 'Manage Users', 'Add Leads and Users and control who can sign in.') }}

{% if not google_ready %}
<div class="flash error" role="alert">{{ icon('alert') }}<span>Google sign-in is not configured yet, so Leads and Users cannot use Google until it is (see README). The email code still works if email is set up.</span></div>
{% endif %}
{% if mail_on and not mail_ready %}
<div class="flash error" role="alert">{{ icon('alert') }}<span>Email sending is not set up yet, so welcome emails and sign-in codes will not be sent (see README). Users can still be added.</span></div>
{% endif %}
<style>
  .grid3 { display: grid; grid-template-columns: 1.2fr 1.5fr .7fr; gap: 18px 22px; }
  @media (max-width: 900px) { .grid3 { grid-template-columns: 1fr; } }
</style>

<div class="card">
  <div class="card-head"><h3>{{ icon('link') }} Sign-in address</h3></div>
  <div class="card-body">
    <p class="lead-text" style="margin-bottom:8px">Leads and Users all sign in here. Their role decides what they can do after signing in.</p>
    <a class="cell" href="{{ signin_url }}"><strong>{{ signin_url }}</strong></a>
  </div>
</div>

<div class="card">
  <div class="card-head"><h3>{{ icon('user-plus') }} Add Lead / User</h3></div>
  <div class="card-body">
    <p class="lead-text">They sign in with Google or an emailed code using this email. No password is needed.{% if mail_on %} A welcome email is sent to them using the template in Settings.{% endif %} Allowed domains: <strong>{{ domains|join(', ') }}</strong>.</p>
    <form method="post">
      <input type="hidden" name="csrf" value="{{ csrf_token }}">
      <div class="grid3">
        <div class="field">
          <label for="newName" class="req">Full name</label>
          <div class="input-icon">{{ icon('user') }}<input name="name" id="newName" placeholder="Full name" maxlength="100" required></div>
        </div>
        <div class="field">
          <label for="newEmail" class="req">Email</label>
          <div class="input-icon">{{ icon('mail') }}<input name="email" id="newEmail" type="email" placeholder="name@domain.com" title="Allowed domains: {{ domains|join(', ') }}" required></div>
        </div>
        <div class="field">
          <label for="newRole" class="req">Role</label>
          <select name="role" id="newRole">{% for r in roles %}<option value="{{ r }}">{{ r|capitalize }}</option>{% endfor %}</select>
        </div>
      </div>
      <div class="form-actions"><button class="btn">{{ icon('user-plus') }} Add</button></div>
    </form>
  </div>
</div>

<div class="card">
  <div class="card-head"><h3>{{ icon('users') }} Users</h3><span class="count">{{ rows|length }} total</span></div>
  <div class="card-body flush">
    <div class="table-wrap compact">
      <table class="grid">
        <thead>
          <tr><th class="num">S.No</th><th style="width:24%">Name</th><th>Email</th><th style="width:130px">Role</th><th class="act">Action</th></tr>
        </thead>
        <tbody>
          {% for u in rows %}
          <tr>
            <td class="num">{{ loop.index }}</td>
            {% if u.role == 'admin' %}
            <td><input name="name" form="uf{{ u.id }}" value="{{ u.name or '' }}" placeholder="Name" maxlength="100" aria-label="Name"></td>
            <td><span class="cell muted">{{ icon('lock') }}{{ u.username }} <small>(password login)</small></span></td>
            <td>{{ role_pill('admin') }}</td>
            <td class="act">
              <span class="btn-row">
                <input name="password" form="uf{{ u.id }}" type="password" placeholder="New password (optional)" aria-label="New password" style="width:200px">
                <button class="btn small" form="uf{{ u.id }}">{{ icon('save') }} Update</button>
              </span>
              <form id="uf{{ u.id }}" class="inline" method="post" action="{{ url_for('user_update', uid=u.id) }}"><input type="hidden" name="csrf" value="{{ csrf_token }}"></form>
            </td>
            {% else %}
            <td><input name="name" form="uf{{ u.id }}" value="{{ u.name or '' }}" placeholder="Full name" maxlength="100" required aria-label="Name"></td>
            <td>
              <input name="email" form="uf{{ u.id }}" type="email" value="{{ u.email or '' }}" placeholder="name@domain.com" required aria-label="Email">
              {% if not u.email %}<small style="color:var(--danger)">No email set: this login cannot sign in yet.</small>{% endif %}
            </td>
            <td><select name="role" form="uf{{ u.id }}" aria-label="Role">{% for r in roles %}<option value="{{ r }}" {{ 'selected' if r == u.role }}>{{ r|capitalize }}</option>{% endfor %}</select></td>
            <td class="act">
              <span class="btn-row">
                <button class="btn small" form="uf{{ u.id }}">{{ icon('save') }} Update</button>
                {% if u.email %}
                <form class="inline" method="post" action="{{ url_for('user_welcome', uid=u.id) }}">
                  <input type="hidden" name="csrf" value="{{ csrf_token }}">
                  <button class="btn icon mail" title="Send the welcome email again" aria-label="Send welcome email">{{ icon('mail') }}</button>
                </form>
                {% endif %}
                <form class="inline" method="post" action="{{ url_for('user_delete', uid=u.id) }}" onsubmit="return confirm('Delete this user?')">
                  <input type="hidden" name="csrf" value="{{ csrf_token }}">
                  <button class="btn icon del" title="Delete user" aria-label="Delete user">{{ icon('trash') }}</button>
                </form>
              </span>
              <form id="uf{{ u.id }}" class="inline" method="post" action="{{ url_for('user_update', uid=u.id) }}"><input type="hidden" name="csrf" value="{{ csrf_token }}"></form>
            </td>
            {% endif %}
          </tr>
          {% else %}
          <tr><td colspan="5" class="empty-cell">{{ empty('users', 'No users yet.') }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>
{% endblock %}