<div class="row">
  <div class="col s12 m4 grey-text">
    <h4>Public information</h4>
    <p class="flow-text">
      This information is visible to other users on <%= link_to 'your profile', current_user %>.
    </p>
  </div>
  <div class="col s12 m8">
    <div class="card">
      <div class="card-content">
        <div class="field">
          <%= f.label 'Name (visible on your profile and forum posts)' %><br />
          <%= f.text_field :name, autofocus: true %>
        </div>

        <%= f.label 'Username' %><br />
        <div class="input-field">
          <i class="material-icons prefix black-text">alternate_email</i>
          <%= f.text_field :username, data: { length: 40 }, placeholder: 'your-username-here', class: 'with-character-counter' %>
          <small class="help-text">Your Notebook.ai profile will be available at https://www.notebook.ai/@username.</small><br />
          <small class="help-text">Up to 40 numbers, letters, and/or the following symbols are allowed: <strong>- _ $ + ! *</strong></small>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="row">
          <div class="col s12 m6 l4">
            <label>Your current avatar</label>
            <br /><br />
            <%= image_tag current_user.image_url(size=160), class: 'hoverable materialboxed' %>
          </div>
          <div class="col s12 m6 l8">
            <label>Upload a new avatar</label>
            <div class="file-field input-field">
              <div class="blue btn">
                <span>Upload</span>
                <%= f.file_field :avatar %>
              </div>
              <div class="file-path-wrapper">
                <input class="file-path validate" type="text" placeholder="Upload an image">
              </div>
            </div>
            <div class="help-text">
              Supported file types: .png, .jpg, .jpeg, .gif
            </div>
            <div class="help-text">
              After selecting an image here, submit your changes with the usual "Save changes" button at the bottom of this page to save it.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="input-field">
          <%= f.text_area :bio, class: 'materialize-textarea with-character-counter', data: { length: 500 } %>
          <%= f.label 'Bio' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :interests, class: 'materialize-textarea' %>
          <%= f.label 'Interests' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :favorite_genre, class: 'materialize-textarea' %>
          <%= f.label 'Favorite genre' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :favorite_author, class: 'materialize-textarea' %>
          <%= f.label 'Favorite author' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :favorite_book, class: 'materialize-textarea' %>
          <%= f.label 'Favorite book' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :favorite_quote, class: 'materialize-textarea' %>
          <%= f.label 'Favorite quote' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :inspirations, class: 'materialize-textarea' %>
          <%= f.label 'Inspirations' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :other_names, class: 'materialize-textarea' %>
          <%= f.label 'Other names' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :website, class: 'materialize-textarea' %>
          <%= f.label 'Website' %><br />
        </div>
      </div>
    </div>

    <div class="card lighten-5">
      <div class="card-content">
        <div class="field">
          <%= f.label 'Favorite page type' %><br />
          <%= f.select(:favorite_page_type, Rails.application.config.content_types[:all].map { |type| [type.name.pluralize, type.name] }, include_blank: 'None') %>
          <small class="help-text">Selecting a page here will prominently display it on your profile and somewhat theme your profile page to match.</small><br />
        </div>
      </div>
    </div>

    <div class="card yellow lighten-5">
      <div class="card-content">
        <div class="field">
          <%= f.label 'Custom Premium badge text' %><br />
          <%= f.text_field :forums_badge_text, data: { length: 20 }, class: 'with-character-counter black-text', placeholder: 'Premium Supporter' %>
          <small class="help-text">Premium users can customize the badge that appears under their name on their profile and next to their name on the forums.</small><br />
        </div>
      </div>
    </div>

  </div>
</div>

<div class="row">
  <div class="col s12 m4 grey-text">
    <h4>Private information</h4>
    <p class="flow-text">
      This information is only ever visible to you.
    </p>
    <p>
      Notebook.ai will never share this information, but may also look at it to better understand its users.
    </p>
  </div>

  <div class="col s12 m8">
    <div class="card">
      <div class="card-content">
        <div class="field">
          <%= f.label 'Email (always completely private)' %><br />
          <%= f.email_field :email %>
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        <div class="input-field">
          <%= f.text_field :age, class: 'materialize-textarea' %>
          <%= f.label 'Age' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :location, class: 'materialize-textarea' %>
          <%= f.label 'Location' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :gender, class: 'materialize-textarea' %>
          <%= f.label 'Gender' %><br />
        </div>

        <div class="input-field">
          <%= f.text_field :occupation, class: 'materialize-textarea' %>
          <%= f.label 'Occupation' %><br />
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-content">
        Last login
        <%= time_ago_in_words current_user.current_sign_in_at %> ago
        from IP 
        <span class="spoiler"><%= current_user.current_sign_in_ip %></span>.
      </div>
    </div>
  </div>
</div>

<% if devise_mapping.confirmable? && resource.pending_reconfirmation? %>
  <div>Currently waiting confirmation for: <%= resource.unconfirmed_email %></div>
<% end %>

<div class="row">
  <div class="col s12 m4 grey-text">
    <h4>Password change</h4>
    <p class="flow-text">
      Leave this blank unless you want to change your password.
    </p>
  </div>
  <div class="col s12 m8">
    <div class="card">
      <div class="card-content">
        <div class="field">
          <%= f.label 'New password' %><br />
          <%= f.password_field :password, autocomplete: "off" %>
        </div>

        <div class="field">
          <%= f.label 'New password (again)' %><br />
          <%= f.password_field :password_confirmation, autocomplete: "off" %>
        </div>
      </div>
    </div>
  </div>
</div>
