{% extends 'basic.html' %}
{% block content %}
<img src="/avatar/user/{{ uid }}" class="profile-avatar-lmao" />

<h1>User: {{ uid }}</h1>

<div style="margin-bottom: 10px">
  <a class="btn btn-default" href="/admin/users" role="button">Back</a>
  <a class="btn btn-default" href="https://kasownik.hackerspace.pl/admin/member/{{ uid }}" role="button" target="_blank">View user in Kasownik</a>
  {% if not is_protected %}
  <a class="btn btn-default modalLink" href="/admin/users/{{ uid }}/add_mifareidhash" role="button">Add mifareIDHash</a>
  {% endif %}
</div>

<p>
  <strong>Belongs to groups:</strong>
  {% for group_name in groups %}
    <a href="/admin/groups/{{ group_name }}">{{ group_name }}</a>,
  {% endfor %}
</p>

<p>
  {% if is_protected %}
  <span class="label label-danger" title="You can’t modify this user because it belongs to a protected group">Protected user</span>
  {% endif %}
  Full LDAP record:
</p>

<table class="table profile-table">
  <tr>
    <th scope="col">Attribute</th>
    <th scope="col">Attribute</th>
    <th scope="col" class="profile-table-value">Value</th>
    <th scope="col" class="profile-table-options">Options</th>
  </tr>
  {% for attr, attr_readable, value in profile %}
    <tr>
      <td>{{ attr }}</td>
      <td>{{ attr_readable if attr_readable else '' }}</td>
      <td class="profile-table-value">{{ '(...omitted...)' if attr == 'jpegPhoto' else value }}</td>
      <td class="profile-table-options">
        {% if not is_protected and attr == 'mifareIDHash' %}
        <a class="modalLink" href="/admin/users/{{ uid }}/del_mifareidhash?value={{ value | urlencode }}"><span class="glyphicon glyphicon-minus-sign" aria-hidden="true"></span> Remove</a>
        {% endif %}
      </td>
    </tr>
  {% endfor %}
</table>

{% endblock %}

{% block head %}
<style type="text/css">
.profile-table td, .profile-table th {
  overflow: hidden;
  overflow-wrap: anywhere;
  width: 200px;
}
.profile-table td.profile-table-value,
.profile-table th.profile-table-value {
  width: max-content;
}
.profile-table td.profile-table-options,
.profile-table th.profile-table-options {
  width: 100px;
}
.profile-avatar-lmao {
  width: 120px;
  height: 120px;
  margin: 10px 0;
  border-radius: 10px;
  float: right;
  box-shadow: 5px 5px 0 #ddd;
  transition: transform 0.2s ease-in-out;
}
.profile-avatar-lmao:hover {
  transform: scale(1.2) rotate(359deg);
}
</style>
{% endblock %}

{% block scripts %}
<script>
$(document).ready(function() {
    $(".modalLink").click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href');
        $.get(url, function(data) {
            $(data).modal('show');
        });
    });
});
</script>
{% endblock %}
