{% if profileLayout == "profile_layout_double_column" %}
<h1 class="text-center mb-5">{{ text.heading }}</h1>

<div >
  <h2 class="ml-3">{{ listuser.name }}</h2>
</div>

<div class="row">
{% if not hideMails %}
  <div class="col-lg-6">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>E-Mail</h4>
      </div>
      <div class="box-body">
        <form id="form-profile-mail">
          <ul class="font-size-small">
            <li>
              <label class="label-above"  for="user-mail">{{ text.change_mail }}</label>
            </li>
            <li class="m-b-20"><input type="text" id="user-mail" class="form-control m-b-0" name="email" value="{{mail}}"><span class="invalid-feedback d-none">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span></li>
            <li>
              <label class="label-above"  for="user-notification">{{ text.email_msg }}</label>
            </li>
          </ul>
          <div class="form-group">
            <label class="checkbox-inline" for="user-notification-1">
              <input type="radio" id="user-notification-1" class="form-radio-input" name="notification" value="1" {% if notifications == 1 %} checked {% endif %}/>
              Sie erhalten eine Benachrichtigung über neue Nachrichten in Ihrem Postfach.
            </label>
            <label class="checkbox-inline" for="user-notification-2">
              <input type="radio" id="user-notification-2" class="form-radio-input" name="notification" value="2" {% if notifications == 2 %} checked {% endif %}/>
              Sie erhalten nach {{messages_notification_days}} {% if messages_notification_days == "1" %} Tag {% else %} Tagen {% endif %} eine Benachrichtigung über ungelesene Nachrichten in Ihrem Postfach.
            </label>
            <label class="checkbox-inline" for="user-notification-0">
              <input type="radio" id="user-notification-0" class="form-radio-input" name="notification" value="0" {% if notifications == 0 %} checked {% endif %}/>
              Sie erhalten keine Benachrichtigung über ungelesene Nachrichten in Ihrem Postfach.
            </label>      
          </div>
          <button type="button" id="user-profil-submit-mail" class="btn btn-primary delete-button">{{ text.save }}</button>
          {{submitnonceprofmail | raw}}
          </form><!--change mail form-->
      </div><!--box body-->
      <div class="box-footer"></div>
    </div> <!-- card-->
  </div><!--lg-6-->
  {% endif %}
  <div class="col-lg-6">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>{{text.change_pw}}</h4>
      </div>
      <div class="box-body">
          <form id="form-profile-password">
            <div role="alert" id="user-profile-password-tooweak" class="d-none alert alert-warning">
              <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
              <p>
                Ihr Passwort ist nicht sicher genug.<br>Das Passwort sollte mindestens zwölf Zeichen lang sein. <br>Für ein stärkeres Passwort verwenden Sie Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen wie ! " ? $ % ^ & ).
              </p> 
            </div>
          <ul class="font-size-small">
            <li>
              <label class="label-above"  for="user-pw0">{{text.old_pw}}</label>
            </li>
            <li class="m-b-20"><input type="password" id="user-pw0" class="form-control m-b-0" name="pw0"><span class="invalid-feedback d-none">Ihr altes Passwort ist nicht korrekt.</span></li>
            <li>
              <label class="label-above"  for="user-pw1">{{text.new_pw}}</label>
            </li>
            <li><input type="password" id="user-pw1" class="form-control" name="pw1"></li>
            <li>
              <label class="label-above"  for="user-pw2">{{text.new_pw_repeat}}</label>
            </li>
            <li class="m-b-20"><input type="password" id="user-pw2" class="form-control m-b-0" name="pw2"><span class="invalid-feedback d-none">Ihr neues Passwort und die Wiederholung stimmen nicht überein.</span></li>
          </ul>
          <button type="button" id="user-profil-submit-password" class="btn btn-primary delete-button">{{ text.save }}</button>
          {{submitnonceprofedit | raw}}
        </form><!--change pw form -->
      </div><!--box body-->
      <div class="box-footer"></div>
    </div> <!-- card-->
  </div><!--lg-6-->
  {% if showName %}
  <div class="col-lg-6">
    <!--to be continued -->
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Name</h4>
      </div>
      <div class="box-body">
        <form id="form-profile-name">
          <p>Hier können Sie Ihren Vor- und Nachnamen eintragen beziehungsweise ändern.</p>
          <ul class="font-size-small">
            <li>
              <label class="label-above" for="user-firstname">Vorname:</label>
            </li>
            <li class="m-b-20"><input type="text" value="{{firstname}}" id="user-firstname" name="user_firstname" class="form-control m-b-0"></input></li>
            <li>
              <label class="label-above" for="user-lastname">Nachname:</label>
            </li>
            <li class="m-b-20"><input type="text" value="{{lastname}}" id="user-lastname" name="user_lastname" class="form-control m-b-0"></input></li>
          </ul>
          <button type="button" id="user-profil-submit-name" class="btn btn-primary delete-button">{{ text.save }}</button>
          {{submitnonceprofname | raw}}
        </form>
      </div>
    </div>
  </div><!--lg-6-->
  {% endif %}
  {% if showPhonenumber %}
  <div class="col-lg-6">
    <!--to be continued -->
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Telefonnummer</h4>
      </div>
      <div class="box-body">
        <form id="form-profile-phonenumber">
          <p>Hier können Sie Ihre Telefonnummer eintragen beziehungsweise ändern.</p>
          <ul class="font-size-small">
            <li>
              <label class="label-above" for="user-phonenumber">Telefonnummer:</label>
            </li>
            <li class="m-b-20"><input type="tel" value="{{phonenumber}}" id="user-phonenumber" name="user_phonenumber" class="form-control m-b-0"></input></li>
          </ul>
          <button type="button" id="user-profil-submit-phonenumber" class="btn btn-primary delete-button">{{ text.save }}</button>
          {{submitnonceprofphonenumber | raw}}
        </form>
      </div>
    </div>
  </div><!--lg-6-->
  {% endif %}
  {% if showTrainings %}
  <div class="col-lg-6">
    {%include 'user-list/card-trainings.html' with{'listuser':listuser, 'training_button':training_button, 'userCanSeeTrainingsProgress': userCanSeeTrainingsProgress}%}
  </div><!--lg-6-->
  {% endif %}
  {% if showRegistercode %}
  <div class="col-lg-6">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Freischaltecode</h4>
      </div>
      <div class="box-body">
        {%include 'user-register-key/register-code-user-redeem.html' with{'submitnonce':register_nonce}%}
      </div>
      <div class="box-footer"></div>
    </div> <!-- card-->
  </div><!--lg-6-->
  {% endif %}
  <div class="col-lg-6">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Löschen</h4>
      </div>
      <div class="box-body">
        <form id="form-profil-delete-content">
          <p>Alle auf dieser Plattform getätigten Eingaben unwiderruflich <strong>löschen</strong>:</p>
          <button type="button" id="user-profil-submit-delete-content" class="btn btn-primary delete-button">Eingaben löschen</button>
          {{submitnoncedelcontent | raw}}
        </form>
        <br>
        <br>
        {% if status_string != "" %}
        <div class="alert alert-warning">
          <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
          <p>
            Sie sind noch im Systems als {{status_string}} hinterlegt. Bitte tragen Sie dafür Sorge, dass Ihre Nachfolge geregelt ist, damit die Funktionen aller involvierten Personen erhalten bleiben.
          </p>
        </div>
        {% endif %}
        {% if listuser.id == 1 %}
          <div class="alert alert-warning pull-left text-left" style="width: 100%">
            <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
            <p>
                  Sie sind der User mit der ID 1. Dieser User hat innerhalb des WordPress-Systems wichtige Funktionen, die mit dem Löschen verloren gehen. Löschen Sie diesen User nur, wenn Sie wissen was Sie tun.
              </p>
          </div>
        {% endif %}
        <form id="form-profil-delete-account">
          <p>Den Account inklusive aller Eingaben unwiderruflich <strong>löschen</strong>:</p>
          <button type="button" id="user-profil-submit-delete-account" class="btn btn-primary delete-button">Account und Eingaben löschen</button>
          {{submitnoncedeluser | raw}}
        </form>
      </div>
      <div class="box-footer"></div>
    </div> <!-- card-->
  </div><!--lg-6-->
  {% if privacy_terms_URL %}
  <div class="col-lg-6">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4 class="{% if privacy_confirmed ==0 %} text-danger {% endif %}"> {% if privacy_confirmed ==0 %}<i class="fas fa-exclamation-triangle"></i> {% endif %} Teilnahmebedingungen</h4> 
      </div>
      {% if privacy_confirmed == 0 %}
      <div class="box-body border border-danger">
        <form id="form-profile-privacy">
          <div class="form-check d-flex align-items-center mb-3">
              <input type="checkbox" onchange="document.getElementById('user-profil-submit-privacy').disabled = !this.checked;" class="form-check-input is-invalid" id="privacy-checkbox" name="privacy_terms_confirmed" required>
            <label class="form-check-label ml-2" for="privacy-checkbox">Ich habe die <a href="{{privacy_terms_URL}}" target="_blank">Teilnahmebedingungen</a> gelesen und akzeptiert.</label>
          </div>
          <div class="invalid-feedback mb-3 d-block">
            Sie müssen den Teilnahmebedingungen zustimmen, um {{website_name}} nutzen zu können.
          </div>
          <button type="button" id="user-profil-submit-privacy" class="btn btn-primary delete-button" disabled>{{ text.save }}</button>
          {{submitnonceprofprivacy | raw}}
        </form>
      </div>
      {% else %}
        <div class="box-body">
          <p>Sie haben den <a href="{{privacy_terms_URL}}" target="_blank">Teilnahmebedingungen</a> am {{privacy_confirmed}} zugestimmt.</p>
          {% if rejectPrivacyTermsAllowed %}
            <p>Sie haben hier die Möglichkeit Ihre Teilnahme zu widerrufen. Die Nutzung von {{website_name}} ist dann nicht mehr möglich.</p>
            <form id="form-profile-privacy">
              <div class="form-check d-none">
                  <input type="checkbox" class="form-check-input" id="privacy-checkbox" name="privacy_terms_confirmed" disabled>
                  <label class="form-check-label ml-2" for="privacy-checkbox">Ich akzeptiere die <a href="{{privacy_terms_URL}}" target="_blank">Teilnahmebedingungen</a>.</label>
              </div>
              <button type="button" class="btn btn-danger" id="user-profil-submit-reject-privacy">Widerrufen</button>
              {{submitnonceprofprivacy | raw}}
            </form>
          {% else %}
            <p class="mb-0">Sie haben jederzeit die Möglichkeit Ihre Teilnahme zu widerrufen. Schreiben Sie dazu eine E-Mail an <a href="mailto:{{admin_mail}}">{{admin_mail}}</a>. Die Nutzung von {{website_name}} ist dann nicht mehr möglich.</p>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div>
  {% endif %}
</div> <!--row-->

{% include 'user-profile/user-profile-delete-account-modal.html' %}
{% include 'user-profile/user-profile-delete-content-modal.html' %}
{% include 'user-profile/user-profile-save-mail-modal.html' %}
{% include 'user-profile/user-profile-save-name-modal.html' %}
{% include 'user-profile/user-profile-save-password-modal.html' %}
{% include 'user-profile/user-profile-save-phonenumber-modal.html' %}
{% include 'user-profile/user-profile-save-privacy-modal.html' %}

<script>
  var site_url = '{{url}}';
  jQuery(document).ready(function() {
 
    jQuery('.user-detail-progress').children().first().children().attr('aria-expanded','true')
    jQuery('.user-detail-lessons').first().addClass('show');

    {% if privacy_terms_URL and privacy_confirmed == 0 %}
        jQuery('html, body').animate({
          scrollTop: jQuery("#form-profile-privacy").offset().top-120
        }, 1000);
    {% endif %}

  });
</script>
{% elseif profileLayout == "profile_layout_single_column" %}
<h1 class="text-center mb-5">{{ text.heading }}</h1>

<div >
  <h2 class="ml-3">{{ listuser.name }}</h2>
</div>

<div class="row">
  <div class="col-lg-12">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Meine Daten</h4>
      </div>
      <div class="box-body">
        {% if not hideMails %}
        <form id="form-profile-mail">
          <ul class="font-size-small">
            <li>
              <label class="label-above"  for="user-mail">{{ text.change_mail }}</label>
            </li>
            <li class="m-b-20"><input type="text" id="user-mail" class="form-control m-b-0" name="email" value="{{mail}}"><span class="invalid-feedback d-none">Bitte geben Sie eine gültige E-Mail-Adresse ein.</span></li>
            <li>
              <label class="label-above"  for="user-notification">{{ text.email_msg }}</label>
            </li>
          </ul>
          <div class="form-group">
            <label class="checkbox-inline" for="user-notification-1">
              <input type="radio" id="user-notification-1" class="form-radio-input" name="notification" value="1" {% if notifications == 1 %} checked {% endif %}/>
              Sie erhalten eine Benachrichtigung über neue Nachrichten in Ihrem Postfach.
            </label>
            <label class="checkbox-inline" for="user-notification-2">
              <input type="radio" id="user-notification-2" class="form-radio-input" name="notification" value="2" {% if notifications == 2 %} checked {% endif %}/>
              Sie erhalten nach {{messages_notification_days}} {% if messages_notification_days == "1" %} Tag {% else %} Tagen {% endif %} eine Benachrichtigung über ungelesene Nachrichten in Ihrem Postfach.
            </label>
            <label class="checkbox-inline" for="user-notification-0">
              <input type="radio" id="user-notification-0" class="form-radio-input" name="notification" value="0" {% if notifications == 0 %} checked {% endif %}/>
              Sie erhalten keine Benachrichtigung über ungelesene Nachrichten in Ihrem Postfach.
            </label>      
          </div>
          <button type="button" id="user-profil-submit-mail" class="btn btn-primary delete-button">{{ text.save }}</button>
          {{submitnonceprofmail | raw}}
        </form><!--change mail form-->
        <hr>
        {% endif %}
        <form id="form-profile-password">
          <div role="alert" id="user-profile-password-tooweak" class="d-none alert alert-warning">
            <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
            <p>
              Ihr Passwort ist nicht sicher genug.<br>Das Passwort sollte mindestens zwölf Zeichen lang sein. <br>Für ein stärkeres Passwort verwenden Sie Groß- und Kleinbuchstaben, Zahlen und Sonderzeichen wie ! " ? $ % ^ & ).
            </p> 
          </div>
          <ul class="font-size-small">
            <li>
              <label class="label-above"  for="user-pw0">{{text.old_pw}}</label>
            </li>
            <li class="m-b-20"><input type="password" id="user-pw0" class="form-control m-b-0" name="pw0"><span class="invalid-feedback d-none">Ihr altes Passwort ist nicht korrekt.</span></li>
            <li>
              <label class="label-above"  for="user-pw1">{{text.new_pw}}</label>
            </li>
            <li><input type="password" id="user-pw1" class="form-control" name="pw1"></li>
            <li>
              <label class="label-above"  for="user-pw2">{{text.new_pw_repeat}}</label>
            </li>
            <li class="m-b-20"><input type="password" id="user-pw2" class="form-control m-b-0" name="pw2"><span class="invalid-feedback d-none">Ihr neues Passwort und die Wiederholung stimmen nicht überein.</span></li>
          </ul>
          <button type="button" id="user-profil-submit-password" class="btn btn-primary delete-button">{{ text.save }}</button>
          {{submitnonceprofedit | raw}}
        </form><!--change pw form -->
        {% if showName or showPhonenumber %}
        <hr>
        {% endif %}
        {% if showName %}
        <form id="form-profile-name">
          <p>Hier können Sie Ihren Vor- und Nachnamen eintragen beziehungsweise ändern.</p>
          <ul class="font-size-small">
            <li>
              <label class="label-above" for="user-firstname">Vorname:</label>
            </li>
            <li class="m-b-20"><input type="text" value="{{firstname}}" id="user-firstname" name="user_firstname" class="form-control m-b-0"></input></li>
            <li>
              <label class="label-above" for="user-lastname">Nachname:</label>
            </li>
            <li class="m-b-20"><input type="text" value="{{lastname}}" id="user-lastname" name="user_lastname" class="form-control m-b-0"></input></li>
          </ul>
          <button type="button" id="user-profil-submit-name" class="btn btn-primary delete-button">{{ text.save }}</button>
          {{submitnonceprofname | raw}}
        </form>
          {% if showPhonenumber %}
          <hr>
          {% endif %}
        {% endif %}
        {% if showPhonenumber %}
        <form id="form-profile-phonenumber">
          <p>Hier können Sie Ihre Telefonnummer eintragen beziehungsweise ändern.</p>
          <ul class="font-size-small">
            <li>
              <label class="label-above" for="user-phonenumber">Telefonnummer:</label>
            </li>
            <li class="m-b-20"><input type="tel" value="{{phonenumber}}" id="user-phonenumber" name="user_phonenumber" class="form-control m-b-0"></input></li>
          </ul>
          <button type="button" id="user-profil-submit-phonenumber" class="btn btn-primary delete-button">{{ text.save }}</button>
          {{submitnonceprofphonenumber | raw}}
        </form>
        {% endif %}
      </div><!--box body-->
      <div class="box-footer"></div>
    </div> <!-- card-->
  </div><!--lg-12-->

  {% if showTrainings %}
  <div class="col-lg-12">
    {%include 'user-list/card-trainings.html' with{'listuser':listuser, 'training_button':training_button, 'userCanSeeTrainingsProgress': userCanSeeTrainingsProgress}%}
  </div><!--lg-12-->
  {% endif %}

  {% if showRegistercode %}
  <div class="col-lg-12">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Freischaltecode</h4>
      </div>
      <div class="box-body">
        {%include 'user-register-key/register-code-user-redeem.html' with{'submitnonce':register_nonce}%}
      </div>
      <div class="box-footer"></div>
    </div> <!-- card-->
  </div><!--lg-12-->
  {% endif %}

  <div class="col-lg-12">
    <div class="card user-detail-box">
      <div class="box-header">
        <h4>Löschen</h4>
      </div>
      <div class="box-body">
        <form id="form-profil-delete-content">
          <p>Alle auf dieser Plattform getätigten Eingaben unwiderruflich <strong>löschen</strong>:</p>
          <button type="button" id="user-profil-submit-delete-content" class="btn btn-primary delete-button">Eingaben löschen</button>
          {{submitnoncedelcontent | raw}}
        </form>
        <br>
        <br>
        {% if status_string != "" %}
        <div class="alert alert-warning">
          <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
          <p>
            Sie sind noch im Systems als {{status_string}} hinterlegt. Bitte tragen Sie dafür Sorge, dass Ihre Nachfolge geregelt ist, damit die Funktionen aller involvierten Personen erhalten bleiben.
          </p>
        </div>
        {% endif %}
        {% if listuser.id == 1 %}
        <div class="alert alert-warning pull-left text-left" style="width: 100%">
          <h5><i class="fas fa-exclamation-triangle"></i>&nbsp;Warnung</h5>
          <p>
            Sie sind der User mit der ID 1. Dieser User hat innerhalb des WordPress-Systems wichtige Funktionen, die mit dem Löschen verloren gehen. Löschen Sie diesen User nur, wenn Sie wissen was Sie tun.
          </p>
        </div>
        {% endif %}
        <form id="form-profil-delete-account">
          <p>Den Account inklusive aller Eingaben unwiderruflich <strong>löschen</strong>:</p>
          <button type="button" id="user-profil-submit-delete-account" class="btn btn-primary delete-button">Account und Eingaben löschen</button>
          {{submitnoncedeluser | raw}}
        </form>
      </div>
      <div class="box-footer"></div>
    </div> <!-- card-->
  </div><!--lg-12-->
  {% if privacy_terms_URL %}
    <div class="col-lg-12">
      <div class="card user-detail-box">
        <div class="box-header">
          <h4 class="{% if privacy_confirmed ==0 %} text-danger {% endif %}"> {% if privacy_confirmed ==0 %}<i class="fas fa-exclamation-triangle"></i> {% endif %} Teilnahmebedingungen</h4> 
        </div>
        {% if privacy_confirmed == 0 %}
        <div class="box-body border border-danger">
          <form id="form-profile-privacy">
            <div class="form-check d-flex align-items-center mb-3">
              <input type="checkbox" onchange="document.getElementById('user-profil-submit-privacy').disabled = !this.checked;" class="form-check-input is-invalid" id="privacy-checkbox" name="privacy_terms_confirmed" required>
              <label class="form-check-label ml-2" for="privacy-checkbox">Ich habe die <a href="{{privacy_terms_URL}}" target="_blank">Teilnahmebedingungen</a> gelesen und akzeptiert.</label>
          </div>
          <div class="invalid-feedback mb-3 d-block">
            Sie müssen den Teilnahmebedingungen zustimmen, um {{website_name}} nutzen zu können.
          </div>
          <button type="button" id="user-profil-submit-privacy" class="btn btn-primary delete-button" disabled>{{ text.save }}</button>
          {{submitnonceprofprivacy | raw}}
        </form>
      </div>
      {% else %}
        <div class="box-body">
          <p>Sie haben den <a href="{{privacy_terms_URL}}" target="_blank">Teilnahmebedingungen</a> am {{privacy_confirmed}} zugestimmt.</p>
          {% if rejectPrivacyTermsAllowed %}
            <p>Sie haben hier die Möglichkeit Ihre Teilnahme zu widerrufen. Die Nutzung von {{website_name}} ist dann nicht mehr möglich.</p>
            <form id="form-profile-privacy">
              <div class="form-check d-none">
                  <input type="checkbox" class="form-check-input" id="privacy-checkbox" name="privacy_terms_confirmed" disabled>
                  <label class="form-check-label ml-2" for="privacy-checkbox">Ich akzeptiere die <a href="{{privacy_terms_URL}}" target="_blank">Teilnahmebedingungen</a>.</label>
              </div>
              <button type="button" class="btn btn-danger" id="user-profil-submit-reject-privacy">Widerrufen</button>
              {{submitnonceprofprivacy | raw}}
            </form>
          {% else %}
            <p class="mb-0">Sie haben jederzeit die Möglichkeit Ihre Teilnahme zu widerrufen. Schreiben Sie dazu eine E-Mail an <a href="mailto:{{admin_mail}}">{{admin_mail}}</a>. Die Nutzung von {{website_name}} ist dann nicht mehr möglich.</p>
          {% endif %}
        </div>
      {% endif %}
    </div>
  </div><!--lg-12-->
  {% endif %}
</div> <!--row-->

{% include 'user-profile/user-profile-delete-account-modal.html' %}
{% include 'user-profile/user-profile-delete-content-modal.html' %}
{% include 'user-profile/user-profile-save-mail-modal.html' %}
{% include 'user-profile/user-profile-save-name-modal.html' %}
{% include 'user-profile/user-profile-save-password-modal.html' %}
{% include 'user-profile/user-profile-save-phonenumber-modal.html' %}
{% include 'user-profile/user-profile-save-privacy-modal.html' %}

<script>
  var site_url = '{{url}}';
  jQuery(document).ready(function() {
 
    jQuery('.user-detail-progress').children().first().children().attr('aria-expanded','true')
    jQuery('.user-detail-lessons').first().addClass('show');

    {% if privacy_terms_URL and privacy_confirmed == 0 %}
        jQuery('html, body').animate({
          scrollTop: jQuery("#form-profile-privacy").offset().top-120
        }, 1000);
    {% endif %}

  });
</script>
{% endif %}