{% extends "base.html" %}

{% load crispy_forms_tags humanize i18n icons permissions translations %}

{% block nav_pills %}
  {% perm 'user.edit' as can_edit_user %}

  <ul class="nav nav-pills">
    <li class="nav-item">
      <a class="nav-link active"
         data-bs-target="#users"
         data-bs-toggle="tab"
         id="tab_users"
         href="#">{% translate "Users" %}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link"
         data-bs-target="#teams"
         data-bs-toggle="tab"
         id="tab_teams"
         href="#">{% translate "Teams" %}</a>
    </li>
    <li class="nav-item">
      <a class="nav-link"
         data-bs-target="#api"
         data-bs-toggle="tab"
         id="tab_api"
         href="#">{% translate "API access" %}</a>
    </li>
  </ul>
{% endblock nav_pills %}

{% block breadcrumbs %}
  <li class="breadcrumb-item">
    <a href="{{ object.get_absolute_url }}">{{ object }}</a>
  </li>
  <li class="breadcrumb-item">
    <a href="{% url 'manage-access' project=object.slug %}">{% translate "Access control" %}</a>
  </li>
{% endblock breadcrumbs %}

{% block content %}

  {% perm 'user.edit' as can_edit_user %}

  <div class="tab-content">
    <div class="tab-pane active" id="users">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">
            {% documentation_icon 'admin/access' 'groups' right=True %}
            {% translate "Users" %}
          </h4>
        </div>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>{% translate "Username" %}</th>
              <th>{% translate "Full name" %}</th>
              {% if can_edit_user %}
                <th>{% translate "E-mail" %}</th>
              {% endif %}
              <th>{% translate "Last sign in" %}</th>
              <th>{% translate "Teams" %}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for user in all_users %}
              {% include "trans/project-access-row.html" %}
            {% endfor %}
            {% for userblock in blocked_users %}
              <tr>
                <td>
                  <a href="{{ userblock.user.get_absolute_url }}">{{ userblock.user.username }}</a>
                </td>
                <td>{{ userblock.user.full_name }}</td>
                <td>{{ userblock.user.email }}</td>
                <td>
                  {% if userblock.user.last_login %}
                    {{ userblock.user.last_login|naturaltime }}
                  {% else %}
                    <em>{% translate "Not yet signed in" %}</em>
                  {% endif %}
                </td>
                <td>
                  <strong>
                    {% if userblock.expiry %}
                      {% blocktranslate with expiry=userblock.expiry|date:"DATE_FORMAT" %}Blocked until {{ expiry }}{% endblocktranslate %}
                    {% else %}
                      {% translate "Blocked permanently" %}
                    {% endif %}
                  </strong>
                </td>
                <td>
                  {% if userblock.note %}
                    <span title="{{ userblock.note }}">{% icon 'info.svg' %}</span>
                  {% endif %}
                  <form action="{% url "unblock-user" project=object.slug %}"
                        method="post"
                        class="inlineform">
                    {% csrf_token %}
                    <input type="hidden" name="user" value="{{ userblock.user.username }}" />
                    <button type="submit"
                            class="btn btn-link btn-xs"
                            title="{% translate "Unblock user" %}">{% icon 'close.svg' %}</button>
                  </form>
                </td>
              </tr>
            {% endfor %}
            {% for invitation in invitations %}
              <tr>
                {% if invitation.user %}
                  <td>
                    <a href="{{ invitation.user.get_absolute_url }}">{{ invitation.user.username }}</a>
                  </td>
                  <td>{{ invitation.user.full_name }}</td>
                  {% if can_edit_user %}<td>{{ invitation.user.email }}</td>{% endif %}
                {% else %}
                  <td colspan="{% if can_edit_user %}3{% else %}2{% endif %}">
                    <em>{% blocktranslate with email=invitation.email %}Invitation for {{ email }}{% endblocktranslate %}</em>
                  </td>
                {% endif %}
                <td>
                  <em>{% translate "Pending invitation" %}</em>
                </td>
                <td>
                  <span class="badge  text-bg-secondary">{{ invitation.group }}</span>
                </td>
                <td>
                  <form action="{{ invitation.get_absolute_url }}" method="post" class="inlineform">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="resend" />
                    <button type="submit"
                            class="btn btn-link btn-xs"
                            title="{% translate "Resend invitation" %}">{% icon 'refresh.svg' %}</button>
                  </form>
                  <button type="button"
                          class="btn btn-link btn-xs"
                          data-clipboard-value="{{ site_url }}{{ invitation.get_absolute_url }}"
                          data-clipboard-message="{% translate "Invitation link copied to clipboard." %}"
                          title="{% translate "Copy to clipboard" %}">{% icon "copy.svg" %}</button>
                  <form action="{{ invitation.get_absolute_url }}" method="post" class="inlineform">
                    {% csrf_token %}
                    <input type="hidden" name="action" value="remove" />
                    <button type="submit"
                            class="btn btn-link btn-xs red"
                            title="{% translate "Remove invitation" %}">{% icon 'delete.svg' %}</button>
                  </form>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
        <div class="card-body">
          <p class="help-block">
            {% translate "Once all its permissions are removed, the user will be removed from the project." %}
          </p>
        </div>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <form action="{% url "add-user" project=object.slug %}" method="post">
            {% csrf_token %}
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">
                  {% documentation_icon 'admin/access' 'invite-user' right=True %}
                  {% translate "Add a user" %}
                </h4>
              </div>
              <div class="card-body">{{ invite_user_form|crispy }}</div>
              <div class="card-footer">
                <input type="submit" class="btn btn-primary" value="{% translate "Add" %}" />
              </div>
            </div>
          </form>
          <form action="{% url "block-user" project=object.slug %}"
                method="post"
                id="block-user">
            {% csrf_token %}
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">
                  {% documentation_icon 'admin/access' 'block-user' right=True %}
                  {% translate "Block user" %}
                </h4>
              </div>
              <div class="card-body">{{ block_user_form|crispy }}</div>
              <div class="card-footer">
                <input type="submit" class="btn btn-danger" value="{% translate "Block" %}" />
              </div>
            </div>
          </form>
        </div>
        <div class="col-sm-6">
          <form action="{% url "invite-user" project=object.slug %}" method="post">
            {% csrf_token %}
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">
                  {% documentation_icon 'admin/access' 'invite-user' right=True %}
                  {% translate "Invite new user" %}
                </h4>
              </div>
              {% if invite_email_form %}
                <div class="card-body">{{ invite_email_form|crispy }}</div>
                <div class="card-footer">
                  <input type="submit" class="btn btn-primary" value="{% translate "Invite" %}" />
                </div>
              {% else %}
                <div class="card-body">
                  {% translate "You are not allowed to invite new users because new registrations are turned off." %}
                </div>
              {% endif %}
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="tab-pane" id="teams">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">
            {% documentation_icon 'admin/access' 'groups' right=True %}
            {% translate "Teams" %}
          </h4>
        </div>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>{% translate "Name" %}</th>
              <th>{% translate "Roles" %}</th>
              <th>{% translate "Languages" %}</th>
              <th>{% translate "Components" %}</th>
              <th>{% translate "Members" %}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for group in groups %}
              <tr>
                <td>{% include "auth/teams-name.html" %}</td>
                <td>{% include "auth/teams-roles.html" %}</td>
                <td>{% include "auth/teams-languages.html" %}</td>
                <td>{% include "auth/teams-components.html" %}</td>
                <td class="number">{% include "auth/teams-count.html" %}</td>
                <td>
                  <a href="{{ group.get_absolute_url }}"
                     class="btn btn-link btn-xs"
                     title="{% translate "Edit" %}">{% icon 'pencil.svg' %}</a>
                  <a href="#"
                     data-bs-toggle="modal"
                     data-bs-target="#delete_group_{{ group.id }}"
                     class="btn btn-link btn-xs red"
                     title="{% translate "Delete" %}">{% icon 'delete.svg' %}</a>
                  <form action="{{ group.get_absolute_url }}" method="post" class="inlineform">
                    {% csrf_token %}
                    <input type="hidden" name="next" value="{{ request.get_full_path }}" />
                    <div class="modal fade"
                         tabindex="-1"
                         role="dialog"
                         aria-labelledby="delete_group_title_{{ group.id }}"
                         aria-describedby="delete_group_body_{{ group.id }}"
                         id="delete_group_{{ group.id }}">
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h4 class="modal-title" id="delete_group_title_{{ group.id }}">{% translate "Are you absolutely sure?" %}</h4>
                            <button type="button"
                                    class="btn-close"
                                    data-bs-dismiss="modal"
                                    aria-label="{% translate "Close" %}"></button>
                          </div>
                          <div class="modal-body" id="delete_group_body_{{ group.id }}">
                            {% blocktranslate with name=group %}This will delete the team <b>{{ name }}</b> from this project.{% endblocktranslate %}
                            {% if group.user__count %}
                              {% blocktranslate count count=group.user__count %}This team contains {{ count }} member. Deleting the team might affect their access to the project.{% plural %}This team contains {{ count }} members. Deleting the team might affect their access to the project.{% endblocktranslate %}
                            {% endif %}
                          </div>
                          <div class="modal-footer">
                            <input type="submit"
                                   class="btn btn-danger"
                                   name="delete"
                                   value="{% translate "Delete" %}" />
                          </div>
                        </div>
                        <!-- /.modal-content -->
                      </div>
                      <!-- /.modal-dialog -->
                    </div>
                    <!-- /.modal -->
                  </form>
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      <form action="{% url "create-project-group" project=object.slug %}" method="post">
        <div class="card">
          <div class="card-header">
            <h4 class="card-title">
              {% documentation_icon 'admin/access' 'groups' right=True %}
              {% translate "Create new team" %}
            </h4>
          </div>
          <div class="card-body">{% crispy create_team_form %}</div>
          <div class="card-footer">
            <input type="submit" class="btn btn-primary" value="{% translate "Add" %}" />
          </div>
        </div>
      </form>
    </div>

    <div class="tab-pane" id="api">
      <div class="card">
        <div class="card-header">
          <h4 class="card-title">
            {% documentation_icon 'api' right=True %}
            {% translate "API access" %}
          </h4>
        </div>
        <table class="table table-striped">
          <thead>
            <tr>
              <th>{% translate "Name" %}</th>
              <th>{% translate "Expires" %}</th>
              <th>{% translate "Teams" %}</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% for user in project_tokens %}
              {% include "trans/project-access-row.html" %}
            {% endfor %}
          </tbody>
        </table>
      </div>

      <div class="row">
        <div class="col-sm-6">
          <form action="{% url "create-project-token" project=object.slug %}" method="post">
            {% csrf_token %}
            <div class="card">
              <div class="card-header">
                <h4 class="card-title">
                  {% documentation_icon 'api' right=True %}
                  {% translate "Create a project token" %}
                </h4>
              </div>
              <div class="card-body">{{ create_project_token_form|crispy }}</div>
              <div class="card-footer">
                <input type="submit" class="btn btn-primary" value="{% translate "Create" %}" />
              </div>
            </div>
          </form>
        </div>
        <div class="col-sm-6">
          <div class="card">
            <div class="card-header">
              <h4 class="card-title">
                {% documentation_icon 'api' right=True %}
                {% translate "Personal API key" %}
              </h4>
            </div>
            <table class="table table-striped">
              <tr>
                <th>{% translate "Your personal API key:" %}</th>
                <td>
                  <span class="auth-token">{{ user.auth_token.key }}</span>
                  <button type="button"
                          class="btn btn-link btn-xs"
                          data-visibility=".auth-token"
                          title="{% translate "Toggle API key visibility" %}">{% icon "eye.svg" %}</button>
                  <button type="button"
                          class="btn btn-link btn-xs"
                          data-clipboard-value="{{ user.auth_token.key }}"
                          data-clipboard-message="{% translate "API key copied to clipboard." %}"
                          title="{% translate "Copy to clipboard" %}">{% icon "copy.svg" %}</button>
                </td>
              </tr>
            </table>
            <div class="card-footer">
              <p class="help-block">{% translate "This is your personal API key, do not share it with anybody else." %}</p>
            </div>
          </div>
        </div>
      </div>
      {% include "snippets/ssh-key.html" %}
      {% documentation_icon 'vcs' right=True %}
    </div>
  </div>

{% endblock content %}