{% extends "base.html" %}
{% block title %}Sign Up{% endblock %}
{% block content %}

{% with messages = get_flashed_messages(with_categories=true) %}

{% if messages %}

<div class="modal fade modal-warning" id="formerror" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
  aria-hidden="true">
  {% for category, message in messages %}
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
            aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">{{ category }}</h4>
      </div>
      <div class="modal-body">
        <div class="modal-message">
          {{ message }}
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  {% endfor %}
</div>

{% endif %}
{% endwith %}
<!-- style="padding-bottom: 20px " -->
<div class="col-xs-12">
  <div class="card">
    <div class="card-header">
      <div class="card-title">
        <div class="title">Update profile</div>
        Consider joining our <a
          href="https://ramp-studio.slack.com/shared_invite/MTg1NDUxNDAyNDk2LTE0OTUzOTcwMDQtMThlOWY1NWU0Mg"><strong>slack
            team</strong></a> if you would like to be part of the growing community of rampers.</font>
      </div>
    </div>
    <div class="card-body">
      <form class="ui form" method="post" action="" name="auth.update_profile">
        {{ form.hidden_tag() }}
        <div class="form-group">
          <label>Username</label>
          {{ form.user_name(disabled=True) }}
          {% for error in form.user_name.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>First name</label>
          {{ form.firstname(placeholder="firstname") }}
          {% for error in form.firstname.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>Last name</label>
          {{ form.lastname(placeholder="lastname") }}
          {% for error in form.lastname.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>Email</label>
          {{ form.email(placeholder="email") }}
          {% for error in form.email.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="checkbox">
          {{ form.is_want_news(placeholder="is_want_news") }}
          <label>I would like to receive news about future RAMP events</label>
          {% for error in form.is_want_news.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>LinkedIn URL</label>
          {{ form.linkedin_url(placeholder="linkedin_url") }}
          {% for error in form.linkedin_url.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>Twitter URL</label>
          {{ form.twitter_url(placeholder="twitter_url") }}
          {% for error in form.twitter_url.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>Facebook URL</label>
          {{ form.facebook_url(placeholder="facebook_url") }}
          {% for error in form.facebook_url.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>Google+ URL</label>
          {{ form.google_url(placeholder="google_url") }}
          {% for error in form.google_url.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>GitHub URL</label>
          {{ form.github_url(placeholder="github_url") }}
          {% for error in form.github_url.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>Short biography</label>
          {{ form.bio(placeholder="bio") }}
          {% for error in form.bio.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <div class="form-group">
          <label>Web site</label>
          {{ form.website_url(placeholder="website_url") }}
          {% for error in form.website_url.errors %}
          <span style="color: red;">[{{ error }}]</span>
          {% endfor %}
        </div>
        <input type="submit" value="Update" class="ui submit button">
    </div>
    </form>
   </div>
   <div class="card">
    <div class="card-header">
      <div class="card-title">
	<div class="title">Privacy</div>
      </div>
    </div>
    <div class="card-body">
    <input type="submit" value="Delete Account" class="ui submit button", id="delete-account-btn">
   </div>
   </div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
  $(function () {
    $('#formerror').modal('toggle');

    $('#delete-account-btn').click(() => {
      if (confirm(`
	     WARNING: You are about to delete your RAMP account.
	     This action is not reversible.
	     Note that all your personal information will be removed, however
	     your submissions will remain on the RAMP platform.

	     Are you sure?
        `) === true) {
	window.location.href = '/delete_profile';
     }
    });
  });

</script>
{% endblock %}
