<div class="mb-sm-5 detail-page-top-navi d-flex justify-content-between align-items-center">

  <a href="{{back_link}}" role="button" class="btn btn-primary" id="user-detail-backlink"><i aria-hidden="true" class="fas fa-chevron-left"></i> Zurück</a>
  {% if canSeeUsername %}
    <h1 class="mx-3 mb-0 hyphens-auto text-break" id="detail-user">{{ listuser.name }}</h1>
  {% endif %}

  <button type="button" class="btn btn-primary {%if not edit %} invisible {% endif %}" data-toggle="modal" data-target="#usereditModal">
    <i aria-hidden="true" class="fas fa-edit"></i> Bearbeiten
  </button>

</div>
{% if edit %}
  {% include "user-list/user-edit-modal.html" %}
{% endif %}

<div class="row">
  <!--Allgemeine Information-->
  <div class="col-lg-6">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Allgemeine Informationen</h4>
      </div>
      <div class="box-body">
        {% if not hideMails %}
          {% if canSeeUsermail %}
            <p>E-Mail-Adresse: <a href="mailto:{{ listuser.mail }}">{{ listuser.mail }}</a></p>
          {% endif %}
        {% endif %}
        <p>User-ID: {{ listuser.id }}</p>
        {% if canSeeUsername %}
          <p>User-Name: {{ listuser.name }}</p>
        {% endif %}
        {% if canSeeUserPersonalname %}
          <p>Vorname: {% if first_name != null %} {{ first_name }} {% else %} - {% endif %}</p>
          <p>Nachname: {% if last_name != null %} {{ last_name }} {% else %} - {% endif %}</p>
        {% endif %}
        <p>Studienteilnehmer-ID: {% if listuser.studienid != null %} {{ listuser.studienid }} {% else %} - {% endif %}</p>
        <p>Studiengruppen-ID: {% if listuser.studiengruppenid != null %} {{ listuser.studiengruppenid }} {% else %} - {% endif %}</p>
        <p>Letzter Login: {% if listuser.lastlogin != null %} {{ listuser.lastlogin|date('d.m.Y \\u\\m H:i') }} Uhr{% else %} - {% endif %}</p>
        <p>Registriert am: {{ user_registered|date('d.m.Y \\u\\m H:i') }} Uhr</p>
        <p>Coach: {% if mentor %} {{ mentor.user_login }} {% else %} - {% endif %}</p>
        {% if privacy_terms_URL %} 
          {% if privacy_confirmed != 0 %}
            <p>Teilnahmebedingungen zugestimmt am: {{privacy_confirmed}}</p>
          {% else %} 
            <div id="privacy-warning" class="alert alert-warning" role="alert">
              <h5><i aria-hidden="true" class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
              <p>Dieser User hat den Teilnahmebedingungen noch nicht zugestimmt und kann die Plattform aktuell nicht nutzen.</p>
            </div>
          {% endif %}
        {% endif %}
      </div>
      <div class="box-footer">
        {% if resendRegistrationMail %}
          <button type="button" id="resend-registration-mail" class="pointer btn btn-secondary resend-registration-mail" userid="{{listuser.id}}">Registrierungsmail erneut senden</button>
        {% endif %}
      </div>
    </div>
  </div>
  {% if canSeeCoachingCard %}
  <!--Coaching-->
  <div class="col-lg-6 ">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Coaching {% if listuser.status != null %}<i aria-hidden="true" class="fas fa-exclamation-circle"></i>{% endif %}</h4>
      </div>
      <div class="box-body">
        <div class="row">
          <div class="col-12">
            {% if listuser.status == null %}
              <div class="text-center schriftgroesse"><p>Es sind aktuell keine Rückmeldungen offen.</p><h1><i aria-hidden="true" class="far fa-check-circle primary-color"></i></h1></div>
            {% else %}
              <div>
                <span class="schriftgroesse">Ausstehende Rückmeldungen für:</span>
                <div class="mb-5 mt-3">
                  {% for training in listuser.trainings %}
                    {% if training.id != "" %}
                      {% for lektion in training.lektionsliste %}
                        {% if lektion.id != "" and lektion.getTrainingAuto() == "2" and training.trainingauto == "2" and lektion.getFin() == 100 and not lektion.isFeedback() %}
                        <div class="d-flex justify-content-between mb-3">
                        <div class="p-2 w-100"><span class="align-middle"><strong>{{lektion.title}}</strong></span></div>
                        <div class="text-right w-100"><a class="btn btn-info" href="{{ message_feedback_urls[lektion.id] }}">Feedback schreiben</a></div>
                        </div>
                        {% endif %}
                      {% endfor %}
                    {% endif %}
                  {% endfor %}
                </div>
              </div>
            {% endif %}

            {#
            {% if listuser.activity == null %}
              <div class="text-center schriftgroesse"><p>Es sind aktuell keine Erinnerungen erforderlich.</p><h1><i class="far fa-check-circle primary-color"></i></h1></div>
            {% else %}
            <div>
              <span class="schriftgroesse">Erinnerungen erforderlich für:</span>
              <div class="mb-5 mt-3">
                {% for training in listuser.trainings %}
                  {% if training.id != "" %}
                    {% for lektion in training.lektionsliste %}
                      {% if lektion.id != "" and lektion.getTrainingAuto() == "2" and training.trainingauto == "2" and lektion.inactive %}
                      <div class="d-flex justify-content-between mb-3">
                      <div class="p-2 w-100"><span class="align-middle"><strong>{{lektion.title}}</strong></span></div>
                      <div class="text-right w-100"><a class="btn btn-info" href="{{ message_reminder_urls[lektion.id] }}">Erinnerung schreiben</a></div>
                      </div>
                        {% endif %}
                    {% endfor %}
                  {% endif %}
                {% endfor %}
              </div>
            </div>
            {% endif %}
            #}

          </div>
        </div>
      </div>
      {% if canSeeUserModus or canSendMessages %}
      <div class="box-footer d-flex justify-content-between">
        {% if canSeeUserModus %}
        <button class="btn btn-primary" type="button" value="{{ listuser.id }}" id="user-detail-startusermodus">User-Modus starten</button>
        {% endif %}
        {% if canSendMessages %}
        <div><a
        id="send-msg-button"
        href="{{ message_new_url }}"
        class="btn btn-primary"
        name="button"
        >Neue Nachricht</a>
        </div>
        {% endif %}
      </div>
      {% endif %}
    </div>
  </div>
  {% endif %}
  <!--Trainings-->
  <div class="col-lg-6 ">
    {%include 'user-list/card-trainings.html' with{'listuser':listuser,'training_button':true, 'urlT':urlT}%}
  </div>
  {% if canSeeCompanyInformationCard %}
  <!--Unternehmensinformationen-->
  <div class="col-lg-6 ">
    {% if listuser.companys is not empty %}
      <div class="card user-detail-box">
        <div class="box-header">
          <h4>Unternehmensinformationen</h4>
        </div>
        <div class="box-body">
          {% for comp in listuser.companys %}
            <p>Unternehmen: {{ comp.title }}</p>
            <p>Führungskraft: {% if comp.bossname is empty and comp.bossmail is empty%}<i>unbesetzt</i>{% else %}{{comp.bossname}}{% if not hideMails %}&nbsp;(<a href="mailto:{{ comp.bossmail }}">{{ comp.bossmail }}</a>){% endif %}{% endif %}</p>
              {% for group in comp.groups %}
                <p>Team: {{ group }}</p>
              {% endfor %}
            <br>
          {% endfor %}
        </div>
        <div class="box-footer"></div>
      </div>
    {% endif %}
  </div>
  {% endif %}

  {% if canSendMessages %}
  <!--Kommunikation-->
  <div class="col-lg-12 ">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Kommunikation</h4>
      </div>
      <div class="box-body">
        {{ mailbox | raw }}
      </div>
      <div class="box-footer"></div>
    </div>
  </div>
  {% endif %}
</div>
<!--/row-->
{% if canSeeUserStatistics %}
<div class="row">
  {% include "systemstatistics/systemstatistics-user-active-counthour.html" %}
  {% include "systemstatistics/systemstatistics-user-active-sumhour.html" %}
  {% include "systemstatistics/systemstatistics-user-active-countweekday.html" %}
  {% include "systemstatistics/systemstatistics-user-active-sumweekday.html" %}
  {% include "systemstatistics/systemstatistics-user-active-countpage.html" %}
  {% include "systemstatistics/systemstatistics-user-active-sumpage.html" %}
</div>
{% endif %}

<a href="{{back_link}}" role="button" class="btn btn-primary"> <i aria-hidden="true" class="fas fa-chevron-left"></i> Zurück</a>

<script>
  jQuery(document).ready(function() {
    {% if canSeeUsername %}
    var title = jQuery('#detail-user').text();
    jQuery('title').text('User-Details | ' + title);
    {% else %}
    jQuery('title').text('User-Details');
    {% endif %}
   
   jQuery('.user-detail-progress').children().first().children().attr('aria-expanded','true')
   jQuery('.user-detail-lessons').first().addClass('show');

    

    // Append ! to training as well after checking all its lessons
    jQuery('div .user-detail-progress').each(function (index) {
      jQuery(this).find('.user-detail-lessons').each(function(index) {
        jQuery(this).find('.user-detail-progress-number-lessons i').each( function (index) {
          if(jQuery(this).parent().parent().parent().find('.user-detail-progress-number .fa-exclamation-circle').length == 0) {
            jQuery(this).parent().parent().parent().find('.user-detail-progress-number').append('<i aria-hidden="true" class="fas fa-exclamation-circle highlight-color"></i>');
          }
        });
      });
    });
  });
</script>



<style>
  .pointer {
    cursor: pointer;
  }
</style>
