{% extends 'projectroles/base.html' %}

{% load projectroles_common_tags %}

{% block title %}User Profile for {{ request.user.get_full_name }}{% endblock %}

{% block projectroles %}

<div class="row sodar-pr-content-title pt-2">
  <h2 class="sodar-pr-content-title">{{ request.user.get_full_name }}</h2>
  <div class="sodar-pr-content-title-secondary text-muted">
    User Profile
  </div>
</div>

<div class="container-fluid sodar-page-container">
  <div class="card" id="sodar-user-details-card">
    <div class="card-header">
      <h4>
        <i class="iconify" data-icon="mdi:account-details"></i> Details
        {% if local_user %}
          <span class="sodar-header-input-group pull-right">
            <a role="button"
               class="btn btn-primary"
               id="sodar-user-btn-update"
               href="{% url 'projectroles:user_update' %}">
              <i class="iconify" data-icon="mdi:lead-pencil"></i> Update User
            </a>
          </span>
        {% endif %}
      </h4>
    </div>
    <div class="card-body">
      <dl class="row">
        {% if request.user.get_full_name != request.user.username %}
          <dt class="col-md-2">Full Name</dt>
          <dd class="col-md-10">{{ request.user.get_full_name }}</dd>
        {% endif %}
        <dt class="col-md-2">Username</dt>
        <dd class="col-md-10">{{ request.user.username }}</dd>
        {% if request.user.email %}
          <dt class="col-md-2">Email</dt>
          <dd class="col-md-10">
            <a href="mailto:{{ request.user.email }}">{{ request.user.email }}</a>
          </dd>
        {% endif %}
        <dt class="col-md-2">UUID</dt>
        <dd class="col-md-10"><code>{{ request.user.sodar_uuid }}</code></dd>
        <dt class="col-md-2">Date Joined</dt>
        <dd class="col-md-10">{{ request.user.date_joined | date:'Y-m-d H:i' }}</dd>
      </dl>
    </div>
  </div>

  <div class="card" id="sodar-user-settings-card">
    <div class="card-header">
      <h4>
        <i class="iconify" data-icon="mdi:tune"></i> Settings
        <span class="sodar-header-input-group pull-right">
        <a role="button"
           class="btn btn-primary {% if not user_settings or user_settings|length == 0 %}disabled{% endif %}"
           href="{% url 'userprofile:settings_update' %}"
           id="sodar-user-btn-settings">
          <i class="iconify" data-icon="mdi:lead-pencil"></i> Update Settings
        </a>
        </span>
      </h4>
    </div>
    <div class="card-body">
      <dl class="row">
        {% for setting in user_settings %}
          <dt class="col-md-4 font-weight-bold">
            {{ setting.label }}
          {% if setting.description %}
            {% get_info_link setting.description as info_link %}
            <span class="pull-right">{{ info_link | safe }}</span>
          {% endif %}
          </dt>
          <dd class="col-md-8">
            {% if setting.value == None or setting.value == '' %}
              <span class="text-muted">N/A</span>
            {% else %}
              {{ setting.value }}
            {% endif %}
          </dd>
        {% empty %}
          <dd class="col-12 text-center text-muted font-italic">
            No user settings available.
          </dd>
        {% endfor %}
      </dl>
    </div>
  </div>
</div>

{% endblock projectroles %}

{% block javascript %}
  {{ block.super }}
  <!-- Tour content -->
  <script type="text/javascript">
      tourEnabled = true;
      tour.addStep('user_profile', {
          title: 'User Profile',
          text: 'In this app you can see your user profile and alter user ' +
                'settings.',
          advanceOn: '.docs-link click',
          showCancelLink: true
      });
      tour.addStep('user_details', {
          title: 'User Details Card',
          text: 'This card displays details of your user account.',
          attachTo: '#sodar-user-details-card top',
          advanceOn: '.docs-link click',
          showCancelLink: true
      });
      if ($('#sodar-user-btn-update').length) {
          tour.addStep('user_details_update', {
              title: 'Update User Details',
              text: 'Click on this button to open a form to edit your user ' +
                    'details. This feature is only available for local user ' +
                    'accounts.',
              attachTo: '#sodar-user-btn-update left',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
      tour.addStep('user_settings', {
          title: 'User Settings Card',
          text: 'This card displays site-wide user level settings and how ' +
                'they are currently set for your user account.',
          attachTo: '#sodar-user-settings-card top',
          advanceOn: '.docs-link click',
          showCancelLink: true
      });
      if ($('#sodar-user-btn-settings').length) {
          tour.addStep('user_settings_update', {
              title: 'Update User Settings',
              text: 'Click on this button to open a form for editing your ' +
                    'user settings.',
              attachTo: '#sodar-user-btn-settings left',
              advanceOn: '.docs-link click',
              showCancelLink: true
          });
      }
  </script>
{% endblock javascript %}
