{%extends sitebase.html%}

{% block head %}

<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/vendor/js/jquery.validate.min.js"></script>

<script type="text/javascript" src="{% raw qiita_config.portal_dir %}/static/js/password_validation.js"></script>

<script type="text/javascript">

$( document ).ready(function() { dualpass_validator(); });

</script>

{% end %}

{%block content%}

<div class="row">

  <div class="col-lg-6">

    <h3>User Information</h3>

    <form role="form" action="{% raw qiita_config.portal_dir %}/profile/" method="post">

      <input type="hidden" name="action" value="profile">

      {% for form_item in profile %}

      <div class="form-group" style="display: flex; flex-direction: column;">

        <div style="display: inline; padding-left: 1em;">

          {% if form_item.id.startswith('social_') %}

            <img style="height: 24px; padding-right: 5px;" src="{% raw qiita_config.portal_dir %}/static/img/logo_{% raw form_item.id %}.png"/>

          {% end %}

          {% raw form_item.label %}

        </div>

        {% raw form_item(class_='form-control', placeholder=form_item.description) %}

        {% if form_item.errors %}

          <div style='color: #ff0000; padding-left: 10px;'>{% for e in form_item.errors %}{%raw e%}<br/>{% end %}</div>

        {% end %}

      </div>

      {% end %}

      {%if creation_timestamp is not None %}

        <div style="padding-left: 1em; padding-bottom: 1em; color: grey;">account created on {{creation_timestamp}}</div>

      {% end %}

      <div style="color:{% if msg.startswith('ERROR:') %}red{% else %}darkgreen{% end %};">{{msg}}</div>

      <button type="submit" class="btn btn-success">Save Edits</button>

    </form>

  </div>

  <div class="col-lg-6">

  <h3>Change Password</h3>

  <form role="form" action="{% raw qiita_config.portal_dir %}/profile/" method="post" id="change_pass" name="change_pass" class="dualpass">

  <input type="hidden" name="action" value="password">

<div class="form-group">

    <label for="oldpass" class="col-sm-10 control-label">Old Password</label>

      <input type="password" class="form-control" id="oldpass" name="oldpass">

</div>

<div class="form-group">

    <label for="newpass" class="col-sm-10 control-label">New Password</label>

      <input type="password" class="form-control" id="newpass" name="newpass">

</div>

<div class="form-group">

    <label for="newpass2" class="col-sm-10 control-label">Repeat New Password</label>

      <input type="password" class="form-control" id="newpass2" name="newpass2">

  </div>

<div style="color:red;">{{passmsg}}</div>

<button class="btn btn-danger">Change Password</button>

</form>

  </div>

</div>

{%end%}