{%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%}