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

{% load projectroles_common_tags %}

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

{% block css %}
  {{ block.super }}
  <style type="text/css">
    .table#sodar-user-email-table tr td:nth-child(1) {
      width: 100%;
    }
    .table#sodar-user-email-table tr td:nth-child(5) {
      width: 80px;
    }
    /* Responsive modifications */
    @media screen and (max-width: 900px) {
      .table#sodar-user-email-table tr th:nth-child(3),
      .table#sodar-user-email-table tr td:nth-child(3) {
        display: none;
      }
    }
    @media screen and (max-width: 700px) {
      .table#sodar-user-email-table tr th:nth-child(4),
      .table#sodar-user-email-table tr td:nth-child(4) {
        display: none;
      }
    }
  </style>
{% endblock %}

{% block projectroles %}

{% get_app_setting 'projectroles' 'site_read_only' as site_read_only %}

<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 request.user.is_local and not site_read_only %}
          <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>
        <dt class="col-md-2">Authentication</dt>
        <dd class="col-md-10">{{ request.user.get_auth_type }}</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
        {% if request.user.is_superuser or not site_read_only %}
          <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>
        {% endif %}
      </h4>
    </div>
    <div class="card-body">
      <dl class="row">
        {% for setting in user_settings %}
          <dt class="col-md-5 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-7">
            {% 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>

  {% get_django_setting 'PROJECTROLES_SEND_EMAIL' as send_email %}
  {% get_django_setting 'PROJECTROLES_SITE_MODE' as site_mode %}
  {% if send_email %}
    <div class="card" id="sodar-user-email-card">
      <div class="card-header">
        <h4>
          <i class="iconify" data-icon="mdi:email-multiple"></i>
          Additional Email Addresses
          {% if site_mode == 'SOURCE' %}
            {% if request.user.is_superuser or not site_read_only %}
              <span class="sodar-header-input-group pull-right">
                <a role="button"
                   class="btn btn-primary"
                   id="sodar-user-btn-email-add"
                   href="{% url 'userprofile:email_create' %}">
                  <i class="iconify" data-icon="mdi:plus-thick"></i> Add Email
                </a>
              </span>
            {% endif %}
          {% endif %}
        </h4>
      </div>
      <div class="card-body p-0">
        <table class="table table-striped sodar-card-table"
               id="sodar-user-email-table">
          <thead>
            <tr>
              <th>Address</th>
              <th>Status</th>
              <th>Created</th>
              <th>Modified</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {% if add_emails.count > 0 %}
              {% for email in add_emails %}
                <tr class="sodar-user-email-table-row">
                  <td><a href="mailto:{{ email.email }}">{{ email.email }}</a></td>
                  <td class="text-nowrap text-{% if email.verified %}success{% else %}danger{% endif %}">
                    {% if email.verified %}Verified{% else %}Unverified{% endif %}
                  </td>
                  <td class="text-nowrap">{{ email.date_created | date:'Y-m-d H:i'}}</td>
                  <td class="text-nowrap">{{ email.date_modified | date:'Y-m-d H:i'}}</td>
                  <td class="text-right">
                    {% if site_mode == 'SOURCE' %}
                      {% if request.user.is_superuser or not site_read_only %}
                        <button class="btn btn-secondary dropdown-toggle sodar-list-dropdown"
                                type="button" data-toggle="dropdown"
                                aria-haspopup="true" aria-expanded="false">
                          <i class="iconify" data-icon="mdi:gear"></i>
                        </button>
                        <div class="dropdown-menu dropdown-menu-right sodar-user-email-dropdown">
                          <a class="dropdown-item sodar-user-email-resend {% if email.verified %}disabled{% endif %}"
                             href="{% url 'userprofile:email_verify_resend' sodaruseradditionalemail=email.sodar_uuid %}">
                            <i class="iconify" data-icon="mdi:send"></i> Resend Verification Mail
                          </a>
                          <a class="dropdown-item sodar-user-email-delete text-danger"
                             href="{% url 'userprofile:email_delete' sodaruseradditionalemail=email.sodar_uuid %}">
                            <i class="iconify" data-icon="mdi:close-thick"></i> Delete Address
                          </a>
                        </div>
                      {% endif %}
                    {% endif %}
                  </td>
                </tr>
              {% endfor %}
            {% else %}
              <tr id="sodar-user-email-table-not-found">
                <td class="bg-faded font-italic text-center" colspan="5">
                  No additional email addresses set.
                </td>
              </tr>
            {% endif %}
          </tbody>
        </table>
      </div>
    </div>
  {% endif %}
</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
          });
      }
      tour.addStep('additional_email', {
          title: 'Additional Email Addresses Card',
          text: 'This card displays additional email addresses set for the ' +
                'user and the ability to manage those addresses.',
          attachTo: '#sodar-user-email-card top',
          advanceOn: '.docs-link click',
          showCancelLink: true
      });
      tour.addStep('additional_email_add', {
          title: 'Add Email',
          text: 'If you want email notifications sent to one or more ' +
                'addresses other than your primary address, add those here. ' +
                'Addresses must be validated by following a link received in ' +
                'the initial email.',
          attachTo: '#sodar-user-btn-email-add left',
          advanceOn: '.docs-link click',
          showCancelLink: true
      });
  </script>
{% endblock javascript %}
