{% extends "dashboard/base.html" %}
{% load staticfiles %}
{% load i18n %}
{% load crispy_forms_tags %}

{% block title-page %}{{ profile.username}} | {% trans "Profile" %}{% endblock %}

{% block content %}

<div class="row">
  <div class="col-md-{% if perms.auth.change_user %}8{% else %}12{% endif %}">
    <div class="panel panel-default">
      <div class="panel-heading">
        <div class="pull-right">
          {% if request.user.is_superuser %}
          <a href="{{ login_token }}" class="btn btn-danger btn-xs"
            title="{% trans "Log in as this user. Recommended to open in an incognito window." %}">
            <i class="fa fa-user-secret"></i>
            {% trans "Login as this user" %}
          </a>
          {% endif %}
          <a class="btn btn-default btn-xs" href="{% url "dashboard.views.user-list" %}">
            {% trans "Back" %}</a>
        </div>
        <h3 class="no-margin">
          <i class="fa fa-user"></i>
          {% include "dashboard/_display-name.html" with user=profile show_org=True %}
        </h3>
      </div>
      <div class="panel-body">
        <div class="row">
          <div class="col-sm-4">
            <img id="dashboard-profile-avatar" src="{{ avatar_url }}" class="img-rounded"/>
          </div>
          <div class="col-sm-8">
            <p>{% trans "Username" %}: {{ profile.username }}</p>
            <p>{% trans "Organization ID" %}: {{ profile.profile.org_id|default:"-" }}</p>
            <p>{% trans "First name" %}: {{ profile.first_name|default:"-" }}</p>
            <p>{% trans "Last name" %}: {{ profile.last_name|default:"-" }}</p>
            <p>
              {% if perm_email %}
                {% trans "Email address" %}: {{ profile.email }}
              {% endif %}
            </p>
            {% if request.user == profile %}
            <p>
              {% trans "Use email address as Gravatar profile image" %}:
              <input id="dashboard-profile-use-gravatar" data-user="{{ profile.username }}"
              {% if profile.profile.use_gravatar %}checked="checked"{% endif %}
              type="checkbox"/> <a href="https://gravatar.com">{% trans "What's Gravatar?" %}</a>
            </p>
            <a href="{% url "dashboard.views.profile-preferences" %}">{% trans "Change my preferences" %}</a>
            {% endif %}
          </div>
        </div>

        {% if perm_group_list %}
          <hr />
          <h4>
            <i class="fa fa-group"></i> {% trans "Groups" %}
          </h4>
          <ul class="dashboard-profile-group-list">
            {% for g in groups %}
            <li><a href="{{ g.profile.get_absolute_url }}">{{ g.name }}</a></li>
            {% empty %}
            {% trans "This user is not in any group." %}
            {% endfor %}
          </ul>
        {% endif %}

        <hr />

        <h4>
          <i class="fa fa-desktop"></i>
          {% trans "Virtual machines owned by the user" %} ({{ instances_owned|length }})
        </h4>
        <ul class="dashboard-profile-vm-list fa-ul">
        {% for i in instances_owned %}
          <li>
            <a href="{{ i.get_absolute_url }}">
              <i class="fa fa-li {{ i.get_status_icon }}"></i>
              {{ i }}
            </a>
          </li>
          {% empty %}
          <li>
            {% trans "This user have no virtual machines." %}
          </li>
        {% endfor %}
        </ul>

        <hr />

        <h4>
          <i class="fa fa-desktop"></i>
          {% trans "Virtual machines with access" %} ({{ instances_with_access|length }})
        </h4>
        <ul class="dashboard-profile-vm-list fa-ul">
        {% for i in instances_with_access %}
          <li>
            <a href="{{ i.get_absolute_url }}">
              <i class="fa fa-li {{ i.get_status_icon }}"></i>
              {{ i }}
            </a>
          </li>
          {% empty %}
          <li>
            {% trans "This user have no access to any virtual machine." %}
          </li>
        {% endfor %}
        </ul>
      </div>
    </div>
  </div>

  {% if perms.auth.change_user %}
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="no-margin">
          <i class="fa fa-user"></i>
          {% trans "Edit user" %}
        </h3>
      </div>
      <div class="panel-body">
        {% crispy form %}
      </div>
    </div>
  </div>
  {% endif %}

</div>

{% endblock %}