import React, { Component } from 'react';

class Contact extends Component {
  render() {
    return (
      <section className="page-section cta">
        <div class="container">
          <h1>Edit Profile</h1>
        	<hr>
      	<div class="row">
            <!-- edit form column -->
            <div class="col-md-9 personal-info">
              <div class="alert alert-info alert-dismissable">
                <a class="panel-close close" data-dismiss="alert">×</a>
                <i class="fa fa coffee"></i>
                This is an <strong>.alert</strong>. Use this to show important messages to the user.
              </div>
              <h3>Personal info</h3>

              <form class="form-horizontal" role="form">
                <div class="form-group">
                  <label class="col-lg-3 control-label">First name:</label>
                  <div class="col-lg-8">
                    <input class="form-control" type="text" value="Jane"></input>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Last name:</label>
                  <div class="col-lg-8">
                    <input class="form-control" type="text" value="Bishop"></input>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Company:</label>
                  <div class="col-lg-8">
                    <input class="form-control" type="text" value=""></input>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Email:</label>
                  <div class="col-lg-8">
                    <input class="form-control" type="text" value="janesemail@gmail.com"></input>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-lg-3 control-label">Time Zone:</label>
                  <div class="col-lg-8">
                    <div class="ui-select">
                      <select id="user_time_zone" class="form-control">
                        <option value="Hawaii">(GMT-10:00) Hawaii</option>
                        <option value="Alaska">(GMT-09:00) Alaska</option>
                        <option value="Pacific Time (US &amp; Canada)">(GMT-08:00) Pacific Time (US &amp; Canada)</option>
                        <option value="Arizona">(GMT-07:00) Arizona</option>
                        <option value="Mountain Time (US &amp; Canada)">(GMT-07:00) Mountain Time (US &amp; Canada)</option>
                        <option value="Central Time (US &amp; Canada)" selected="selected">(GMT-06:00) Central Time (US &amp; Canada)</option>
                        <option value="Eastern Time (US &amp; Canada)">(GMT-05:00) Eastern Time (US &amp; Canada)</option>
                        <option value="Indiana (East)">(GMT-05:00) Indiana (East)</option>
                      </select>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-3 control-label">Username:</label>
                  <div class="col-md-8">
                    <input class="form-control" type="text" value="janeuser"></input>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-3 control-label">Password:</label>
                  <div class="col-md-8">
                    <input class="form-control" type="password" value="11111122333"></input>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-3 control-label">Confirm password:</label>
                  <div class="col-md-8">
                    <input class="form-control" type="password" value="11111122333"></input>
                  </div>
                </div>
                <div class="form-group">
                  <label class="col-md-3 control-label"></label>
                  <div class="col-md-8">
                    <input type="button" class="btn btn-primary" value="Save Changes"></input>
                    <span></span>
                    <input type="reset" class="btn btn-default" value="Cancel"></input>
                  </div>
                </div>
              </form>
            </div>
        </div>
      </div>
      <hr>
      </section>
    );
  }
}

export default Contact;