<div id="general-settings" class="settings-section is-active">
  <div class="settings-panel">
    <div class="title-wrap">
      <a class="mobile-sidebar-trigger">
        <i data-feather="menu"></i>
      </a>
      <h2>General Settings</h2>
    </div>

    <div class="settings-form-wrapper">
      <div class="settings-form">
        <div class="columns is-multiline">
          <div class="column is-6">
            <!--Field-->
            <div class="field field-group">
              <label>First Name</label>
              <div class="control has-icon">
                <input type="text" class="input is-fade" value="Jenna" />
                <div class="form-icon">
                  <i data-feather="user"></i>
                </div>
              </div>
            </div>
            <!--Field-->
            <div class="field field-group">
              <label>Email</label>
              <div class="control has-icon">
                <input
                  type="text"
                  class="input is-fade"
                  value="jennadavis@gmail.com"
                />
                <div class="form-icon">
                  <i data-feather="mail"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-6">
            <!--Field-->
            <div class="field field-group">
              <label>Last Name</label>
              <div class="control has-icon">
                <input type="text" class="input is-fade" value="Davis" />
                <div class="form-icon">
                  <i data-feather="user"></i>
                </div>
              </div>
            </div>
            <!--Field-->
            <div class="field field-group">
              <label>Backup Email</label>
              <div class="control has-icon">
                <input
                  type="text"
                  class="input is-fade"
                  value="jenn34@outlook.com"
                />
                <div class="form-icon">
                  <i data-feather="mail"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-12">
            <!--Field-->
            <div class="field field-group">
              <label>Address</label>
              <div class="control">
                <textarea
                  type="text"
                  class="textarea is-fade"
                  rows="1"
                  placeholder="Fill in your address..."
                ></textarea>
              </div>
            </div>
          </div>

          <div class="column is-12">
            <!--Field-->
            <div class="form-text">
              <p>
                Be sure to fill out your location settings. This will help us
                suggest you relevant friends and places you could like.
              </p>
            </div>
          </div>

          <div class="column is-6">
            <!--Field-->
            <div class="field field-group">
              <label>City</label>
              <div class="control has-icon">
                <input type="text" class="input is-fade" value="Melbourne" />
                <div class="form-icon">
                  <i data-feather="map-pin"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-6">
            <!--Field-->
            <div class="field field-group is-autocomplete">
              <label>Country</label>
              <div class="control has-icon">
                <input
                  id="country-autocpl"
                  type="text"
                  class="input is-fade"
                  value="Australia"
                />
                <div class="form-icon">
                  <i data-feather="globe"></i>
                </div>
              </div>
            </div>
          </div>

          <div class="column is-12">
            <div class="buttons">
              <button class="button is-solid accent-button form-button">
                Save Changes
              </button>
              <button class="button is-light form-button">Advanced</button>
            </div>
          </div>
        </div>
      </div>

      <div class="illustration">
        <img
          class="light-image"
          src="assets/img/illustrations/settings/1.svg"
          alt=""
        />
        <img
          class="dark-image"
          src="assets/img/illustrations/settings/1-dark.svg"
          alt=""
        />
        <p>
          If you'd like to learn more about general settings, you can read about
          it in the <a>user guide</a>.
        </p>
      </div>
    </div>
  </div>
</div>
