<%
# Copyright (C) 2011 - present Instructure, Inc.
#
# This file is part of Canvas.
#
# Canvas is free software: you can redistribute it and/or modify it under
# the terms of the GNU Affero General Public License as published by the Free
# Software Foundation, version 3 of the License.
#
# Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
# WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
# A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
# details.
#
# You should have received a copy of the GNU Affero General Public License along
# with this program. If not, see <http://www.gnu.org/licenses/>.
%>
<% content_for(:page_title) do %>
  <%= t("User Settings") %>
<% end %>

<% provide :right_side do %>
  <% if @current_user.registered? %>
  <%= render :partial => "ways_to_contact" %>
  <div>
    <hr />
    <a href="#" class="edit_settings_link btn button-sidebar-wide"><i class="icon-edit" aria-hidden="true"></i> <%= t('links.edit_settings', "Edit Settings") %></a>
    <% mfa_settings = @user.mfa_settings(pseudonym_hint: @current_pseudonym) %>
    <% if mfa_settings != :disabled %>
      <a href="<%= otp_login_path %>" class="btn button-sidebar-wide"><i class="icon-lock" aria-hidden="true"></i> <%= @user.otp_secret_key ? t('links.reconfigure_mfa', "Reconfigure Multi-Factor Authentication") : t('links.configure_mfa', "Set Up Multi-Factor Authentication") %></a>
    <% end %>
    <% if mfa_settings == :optional && @user.otp_secret_key %>
      <a href="<%= disable_mfa_path('self') %>" class="btn button-sidebar-wide" id="disable_mfa_link"><i class="icon-unlock" aria-hidden="true"></i> <%= t('links.disable_mfa', "Disable Multi-Factor Authentication") %></a>
    <% end %>
    <% if @user.otp_secret_key %>
        <a href="<%= one_time_passwords_path %>" class="btn button-sidebar-wide" id="otp_backup_codes_link" target="_blank"><i class="icon-lock" aria-hidden="true"></i> <%= t('links.otp_backup_codes', "Multi-Factor Authentication Backup Codes") %></a>
    <% end %>
    <a href="<%= dashboard_content_exports_path %>" class="btn button-sidebar-wide"><i class="icon-download" aria-hidden="true"></i> <%= t("Download Submissions") %></a>
    <% if @user.has_student_enrollment? && @domain_root_account && @domain_root_account.self_registration? && @user.grants_right?(@current_user, :generate_observer_pairing_code) %>
      <div id="pairing-code"></div>
    <% end %>
    <% if @domain_root_account.feature_allowed?(:epub_export) && !@domain_root_account.enable_offline_web_export? %>
        <%= link_to  epub_exports_path, class: 'btn button-sidebar-wide' do %>
          <i class="icon-download" aria-hidden="true"></i> <%= t("Download Course Content") %>
        <% end %>
    <% end %>
  </div>
  <% end %>
<% end %>

<% js_env folder_id: @user.profile_pics_folder.id,
          PASSWORD_POLICY: @domain_root_account.password_policy,
          PASSWORD_POLICIES: Hash[@password_pseudonyms.map{ |p| [p.id, p.account.password_policy]}],
          PROFILE: @user_data,
          INTERNATIONAL_SMS_ENABLED: @user.account.feature_enabled?(:international_sms)
%>
<% deferred_js_bundle :profile %>
<% css_bundle :profile_edit, :pairing_code %>

<% if service_enabled?(:avatars) %>
  <% if @user_data[:can_edit_avatar] %>
    <%= avatar(@user, url: '#', edit: true, class: "profile_pic_link #{@user.avatar_state}",
        title: t('titles.click_to_change_profile_pic', "Click to change profile pic"),
        sr_content: t('Click to change profile picture for %{display_name}', :display_name => @user.short_name)) %>
  <% else %>
    <%= avatar(@user, url: nil, edit: false, class: "profile_pic") %>
  <% end %>
<% end %>
<h1 style="padding-top: 0.3em;"><%= t("%{user_with_genitive} Settings", :user => @user.short_name, :user_with_genitive => I18n.form_proper_noun_singular_genitive(@user.short_name)) %></h1>
<div class="clear"></div>
<%= form_for @user, :url => profile_path, :html => {:id => "update_profile_form", :style => "margin-bottom: 20px;", :class => 'form-inline'} do |f| %>
<table class="profile_table">
  <tr>
    <% editable_name = @user.user_can_edit_name? %>
    <th scope="row"><%= f.blabel :name, :en => "Full Name" %></th>
    <td><span <% unless editable_name %>id="name"<% end %>
              class="full_name <%= editable_name ? 'display_data' : 'edit_or_show_data' %>"><%=h @user.name %></span>
      <%= f.text_field :name, :class => "edit_data", :maxlength => 255, :size => 30, "aria-describedby" => "hints_name" if editable_name %>
      <span id="hints_name" class="edit_or_show_data data_description"><br/><%= t('hints.name', "This name will be used for grading.") %></span>
  </tr>
  <tr>
    <th scope="row"><%= f.blabel :short_name, :en => "Display Name" %></th>
    <td><span <% unless editable_name %>id="short_name"<% end %>
              class="short_name <%= editable_name ? 'display_data' : 'edit_or_show_data' %>"><%=h @user.short_name %></span>
      <%= f.text_field :short_name, :class => "edit_data", :maxlength => 255, :size => 30, "aria-describedby" => "hints_short_name" if editable_name %>
      <span id="hints_short_name" class="edit_or_show_data data_description"><br/><%= t('hints.short_name', "People will see this name in discussions, messages and comments.") %></span>
    </td>
  </tr>
  <tr>
    <th scope="row"><%= f.blabel :sortable_name, :en => "Sortable Name" %></th>
    <td><span <% unless editable_name %>id="sortable_name"<% end %>
              class="sortable_name <%= editable_name ? 'display_data' : 'edit_or_show_data' %>"><%=h @user.sortable_name %></span>
      <%= f.text_field :sortable_name, :class => "edit_data", :maxlength => 255, :size => 30, "aria-describedby" => "hints_sortable_name" if editable_name %>
      <span id="hints_sortable_name" class="edit_or_show_data data_description"><br/><%= t('hints.sortable_name', "This name appears in sorted lists.") %></span>
    </td>
  </tr>
  <%# even if @domain_root_account.settings[:can_add_pronouns] is false, we still want to let someone that has pronouns set to see this so they can unset them  %>
  <% if @user.pronouns || @domain_root_account.settings[:can_add_pronouns] %>
    <tr>
      <th scope="row"><%= f.blabel :pronouns, :en => "Pronouns" %></th>
      <td>
        <span id="pronouns" class="<%= @domain_root_account.can_change_pronouns? ? 'display_data' : 'edit_or_show_data' %>"><%= @user.pronouns || t("None") %></span>
        <% if @domain_root_account.can_change_pronouns? %>
          <span class="edit_data">
            <%= f.select(
              :pronouns,
              options_for_select(([[t("None"), '']] + @domain_root_account.pronouns + [@user.pronouns]).compact.uniq, @user.pronouns))
            %>
          </span>
        <% end %>
        <span class="edit_or_show_data data_description">
          <br/>
          <%= t("This pronoun will appear after your name when enabled") %>
        </span>
      </td>
    </tr>
  <% end %>
  <% active_email_channels = @email_channels.select { |cc| cc.active? } %>
  <% if active_email_channels.length > 1 %>
    <tr>
      <th scope="row"><label for="default_email_id"><%= before_label(:default_email, "Default Email") %></label></th>
      <td>
        <span class="default_email unique_id display_data"><%=h @default_email_channel.path %></span>
        <select id="default_email_id" name="default_email_id" class="default_email edit_data">
          <% active_email_channels.select.each do |cc| %>
            <option value="<%= cc.id %>" <%= "selected" if cc == @default_email_channel %> ><%=h cc.path %></option>
          <% end %>
        </select>
      </td>
    </tr>
  <% end %>
  <% if available_locales.size > 1 %>
  <tr>
    <th scope="row"><%= f.blabel :locale, :en => "Language" %></th>
    <td>
      <% no_language = t("System Default (%{language})", :language => available_locales[infer_locale(:root_account => @domain_root_account, :accept_language => request.headers['Accept-Language'])]) %>
      <span class="locale display_data"><%= @user.locale ? available_locales[@user.locale] : no_language %></span>
      <span class="edit_data"><%= f.select :locale,
                                           [[no_language, nil]] + available_locales.invert.sort_by { |desc, _| Canvas::ICU.collation_key(desc) },
                                           {:selected => @user.locale}, {:class => 'locale', "aria-describedby" => "hints_language"} %>
      <%= render :partial => 'shared/locale_warning' %>
      <span id="hints_language" class="data_description"><br/><%= t('hints.language', "This will override any browser or account settings.") %></span>
      </span>
    </td>
  </tr>
  <% end %>
  <tr>
    <th scope="row"><%= f.blabel :time_zone, :en => "Time Zone" %></th>
    <td>
      <span class="time_zone display_data">
        <% if name = @user.time_zone.try(:name) %>
          <%= I18n.send(:translate, I18nTimeZone[name].keyify, name.dup) %>
        <% else %>
          <%= t(:none, "None") %>
        <% end %>
      </span>
      <span class="edit_data"><%= f.time_zone_select :time_zone, I18nTimeZone.us_zones, :model => I18nTimeZone, :default => (@domain_root_account.try(:default_time_zone) || "Mountain Time (US & Canada)") %></span>
    </td>
  </tr>
  <% if @domain_root_account == Account.default %>
    <tr>
      <td colspan="2">
        <div class="edit_data">
          <label for="user_subscribe_to_emails" class="checkbox">
            <%= f.check_box :subscribe_to_emails %>
            <%= t(:subscribe_to_emails, "I want to receive information, news and tips from Instructure") %>
          </label>
        </div>
      </td>
    </tr>
  <% end %>
  <% if !@password_pseudonyms.empty? %>
  <tr class="edit_data_row select_change_password_row" style="display: none;">
    <th scope="row"><%= before_label(:password, "Password") %></th>
    <td><label for="change_password_checkbox" class="checkbox"><input type="checkbox" id="change_password_checkbox" name="pseudonym[change_password]" value="1"/><%= t('labels.change_password', "Change Password") %></label></td>
  </tr>
  <% end %>
  <tr class="change_password_row" style="display: none;">
    <th class="nobr" scope="row"><label for="profile_pseudonym_id"><%= before_label(:password_for, "Password For") %></label></th>
    <td>
      <select name="pseudonym[password_id]" id="profile_pseudonym_id">
        <% @password_pseudonyms.each do |p| %>
          <option value="<%= p.id %>"><%= p.unique_id %></option>
        <% end %>
      </select>
    </td>
  </tr>
  <tr class="change_password_row" style="display: none;">
    <th scope="row"><label for="old_password"><%= before_label(:old_password, "Old Password") %></label></th>
    <td><input type="password" style="width: 150px;" id="old_password" name="pseudonym[old_password]"/></td>
  </tr>
  <tr class="change_password_row" style="display: none;">
    <th scope="row"><%= label :pseudonym, :password, before_label(:new_password, "New Password") %></th>
    <td><%= password_field :pseudonym, :password, :value => "", :style => "width: 150px;" %></td>
  </tr>
  <tr class="change_password_row" style="display: none;">
    <th scope="row"><%= label :pseudonym, :password_confirmation, before_label(:confirm_password, "Confirm Password") %></th>
    <td><%= password_field :pseudonym, :password_confirmation, :value => "", :style => "width: 150px;" %></td>
  </tr>
  <tr class="edit_data_row more_options_link_row" style="display: none;">
    <th scope="row" colspan="2"><a href="#" class="more_options_link" style="display: none;"><%= t('links.more_options', "more options") %></a></th>
  </tr>

  <tr class="edit_data_row" style="display: none;">
    <td colspan="2">
      <div class="form-actions">
        <button type="button" class="btn cancel_button"><%= t('#buttons.cancel', "Cancel") %></button>
        <button type="submit" class="btn btn-primary"><%= t('buttons.update_settings', "Update Settings") %></button>
      </div>
    </td>
  </tr>
</table>
<% end %>
<% if @current_user.registered? %>
<div style="<%= hidden unless @pseudonyms.length > 1 %> margin-bottom: 20px;">
<h2><%= t('headers.ways_to_log_in', "Ways to Log In") %></h2>
<table class="summary pseudonym_list">
  <thead>
    <tr>
      <th scope="col"><%= t('headers.organization', "Organization") %></th>
      <th scope="col"><%= t('headers.login', "Login") %></th>
      <th>&nbsp;</th>
    </tr>
  </thead>
<% @pseudonyms.each do |p| %>
  <% if p.first? || p.account_id %>
  <tr id="pseudonym_<%= p.id %>" class="pseudonym">
    <td><%= p.account.name %></td>
    <td><a href="<%= login_url(:host => HostUrl.context_host(p.account)) %>" class="not_external"><%= p.unique_id %></a></td>
    <td>
      <a class="delete_pseudonym_link no-hover" href="<%= profile_pseudonym_url(p.id) %>" style="<%= hidden unless can_do(p, @current_user, :delete) %>" title="<%= t('titles.remove_account_from_profile', "Remove account from this profile") %>"><%= image_tag "delete.png", :alt => t('Remove account from this profile') %></a>
    </td>
  </tr>
  <% end %>
<% end %>
</table>
<div style="text-align: center; display: none;">
  <a href="#" class="add"><%= t('links.add_account', "Add Account") %></a>
</div>
</div>

<% if @user.associated_root_accounts.shard(@user).any? { |a| a.feature_enabled?(:allow_opt_out_of_inbox) } %>
<h2><%= t('headers.inbox_opt_out', "Conversations Inbox Opt-out" ) %></h2>
<p>
  <label for="disable_inbox"><input type="checkbox" id="disable_inbox" <%= 'checked' if @user.disabled_inbox? %>/>
  <%= t('labels.disable_inbox', "Disable the Conversation's Inbox unread messages badge and send all conversation messages and notifications via email, ASAP.") %></label>
</p>
<% end %>

<% unless (@domain_root_account && @domain_root_account.service_enabled?(:none)) %>
<a name="registered_web_services"></a>
<h2><%= t('headers.web_services', "Web Services") %></h2>
<p><%= t(:web_services, <<-TEXT)
Canvas can make your life a lot easier by tying itself in with the web tools
you already use.  Click any of the services in "Other Services" to see what we mean.
TEXT
%></p>
<p>
<input type="checkbox" id="show_user_services" <%= 'checked' if @user.show_user_services %>/> <label for="show_user_services"><%= t('labels.show_user_services', "Let fellow course/group members see which services I've linked to my profile") %></label>
</p>
<table role="presentation" style="width: 100%;"><tr>
  <td
    <% if @domain_root_account.feature_enabled?(:responsive_awareness) %>
      class="services-cell"
    <% else %>
      style="vertical-align: top; width: 50%; padding-<%= direction('right') %>: 20px;"
    <% end %>
  >
    <h3><%= t('headers.registered_services', "Registered Services") %></h3>
    <div style="margin-<%= direction('left') %>: 20px; margin-bottom: 20px;">
    <ul id="registered_services" class="unstyled_list">
      <% @user.user_services.select{|s| feature_and_service_enabled?(s.service) }.each do |service| %>
        <li class="service clearfix" id="service_<%= service.service %>">
          <a href="<%= profile_user_service_url(service.id) %>" class="delete_service_link no-hover" style="float: <%= direction('right') %>; padding-top: 0.5em; padding-<%= direction('right') %>: 10px;" title="<%= t('titles.unregister_service', "Unregister Service") %>"><%= image_tag "delete_circle.png", :alt => t('Unregister Service') %></a>
          <a href="<%= service.service_user_link %>">
            <%= image_tag "#{service.service}.png", :style => "vertical-align: middle; float: #{ direction('left') };", :alt => '' %>
          </a>
          <div style="float: <%= direction('left') %>; padding-<%= direction('left') %>: 5px;">
            <%= service.service.titleize rescue t(:unknown_service, "Unknown") %>
            <div style="font-size: 0.6em; line-height: 0.5em;">
              <% if service.has_profile_link? %>
                <a href="<%= service.service_user_link %>">
                  <%= t('links.view_your_profile', "view your profile") %>
                  <% if service.has_readable_user_name? %>
                      <span><%= service.service_user_name %></span>
                  <% end %>
                </a>
              <% elsif service.has_readable_user_name? %>
                <span><%= service.service_user_name %></span>
              <% end %>
            </div>
          </div>
          <div class="clear"></div>
        </li>
      <% end %>
      <li id="service_blank" class="service clearfix" style="display: none;">
        <a href="<%= profile_user_service_url("{{ id }}") %>" class="delete_service_link no-hover" style="float: <%= direction('right') %>;" title="<%= t('titles.unregister_service', "Unregister Service") %>"><%= image_tag "delete_circle.png", :alt => t('Unregister Service') %></a>
        <span class="service">&nbsp;</span>
      </li>
    </ul>
    <%= t(:no_registered_services, "No Registered Services") if @user.user_services.empty? %>
    </div>
  </td>
  <td
    <% if @domain_root_account.feature_enabled?(:responsive_awareness) %>
      class="services-cell"
    <% else %>
      style="vertical-align: top; width: 50%; padding-<%= direction('left') %>: 20px;"
    <% end %>
  >
    <h3><%= t('headers.other_services', "Other Services") %></h3>
    <div style="margin-<%= direction('left') %>: 20px;">
    <%= before_label(:other_services, "Click any service below to register") %>
    <% services = @user.user_services.map{|s| s.service} %>
    <ul id="unregistered_services" class="unstyled_list">

      <li id="unregistered_service_google_drive" class="service" style="<%= hidden if !feature_and_service_enabled?(:google_drive) || services.include?("google_drive") %>">
        <a href="#" class="btn btn-small"><%= image_tag "google_drive_icon.png", :alt => '' %> <%= t('links.google_drive', "Google Drive") %></a>
        <div style="display: none; text-align: <%= direction('left') %>;" class="content" title="<%= t('titles.authorize_google_drive', "Authorize Google Drive") %>" id="unregistered_service_google_drive_dialog">
          <div>
            <%= image_tag "google_docs.png", :style => "float: #{direction('left')}; padding-#{ direction('right') }: 5px;", :alt => '' %>
            <div style="font-size: 1.2em; font-weight: bold;"><%= t('headers.google_drive_access', "Google Drive Access") %></div>
            <%= t(:google_drive_description, <<-TEXT)
                Once you authorize us to see your Google Drive you'll be able to submit your assignments
                            directly from Google Drive, and create and share documents with members of your classes.
                TEXT
            %>
            <div class="clear"></div>
          </div>
          <div style="text-align: center; margin-top: 10px;">
            <a class="btn" href="<%= oauth_url(:service => "google_drive", :return_to => settings_profile_url) %>"><%= t('buttons.authorize_google_drive', "Authorize Google Drive Access") %></a>
          </div>
        </div>
      </li>

      <li id="unregistered_service_skype" class="service" style="<%= hidden if services.include?("skype") || !service_enabled?(:skype) %>">
        <a href="#" class="btn btn-small"><%= image_tag "skype_icon.png", :alt => '' %> <%= t('links.skype', "Skype") %></a>
        <div style="display: none; text-align: <%= direction('left') %>;" class="content" title="<%= t('titles.register_skype', "Register Skype") %>" id="unregistered_service_skype_dialog">
          <div>
            <%= image_tag "skype.png", :style => "float: #{direction('left')}; padding-#{ direction('right') }: 5px;", :alt => '' %>
            <div style="font-size: 1.2em; font-weight: bold;"><%= t('headers.share_skype_id', "Share your Skype ID") %></div>
            <%= t(:skype_description, <<-TEXT)
            Skype offers free online voice and video calls.  Lots of students use
            Skype as a free, easy way to communicate.  If you register your Skype Name
            and enable visibility, then other students can easily find your contact
            and call or add you using Skype.
            TEXT
            %>
            <div class="clear"></div>
          </div>
          <div style="text-align: center; font-size: 1.2em; margin-top: 10px;">
            <%= form_for :user_service, :url => profile_create_user_service_url, :html => {:class => "create_user_service_form"}, :namespace => "skype" do |f| %>
            <%= f.hidden_field :service, :value => "skype" %>
            <table class="formtable" role="presentation">
              <tr>
                <td><%= f.blabel :user_name, :skype_name, :en => "Skype Name" %></td>
                <td><%= f.text_field :user_name, :style => "width: 150px;" %></td>
              </tr><tr>
                <td colspan="2">
                  <button type="submit" class="btn btn-primary"><%= t('buttons.save_skype_name', "Save Skype Name") %></button>
                </td>
              </tr>
            </table>
            <% end %>
          </div>
        </div>
      </li>
      <li id="unregistered_service_twitter" class="service" style="<%= hidden if services.include?("twitter") || !feature_and_service_enabled?(:twitter) %>">
        <a href="#" class="btn btn-small"><%= image_tag "twitter_icon.png", :alt => '' %> <%= t('links.twitter', "Twitter") %></a>
        <div style="display: none; text-align: <%= direction('left') %>;" class="content" title="<%= t('titles.authorize_twitter', "Authorize Twitter") %>" id="unregistered_service_twitter_dialog">
          <div>
            <%= image_tag "twitter.png", :style => "float: #{direction('left')}; padding-#{ direction('right') }: 5px;", :alt => '' %>
            <div style="font-size: 1.2em; font-weight: bold;"><%= t('headers.twitter_access', "Twitter Access") %></div>
            <%= mt(:twitter_description, <<-TEXT)
Twitter is a service for posting and subscribing to short messages.
If you have a Twitter account, you can register it here.  Then if you allow
fellow course/group members to see your registered services, they can
easily connect with your Twitter account.

You can also sign up to have notifications sent to your Twitter account.
These notifications will be sent as direct messages to yourself from
yourself, and won't appear in your public stream.
TEXT
            %>
            <div class="clear"></div>
          </div>
          <div style="text-align: center; margin-top: 10px;">
            <a class="btn btn-primary" href="<%= oauth_url(:service => "twitter", :return_to => settings_profile_url) %>"><%= t('buttons.authorize_twitter', "Authorize Twitter Access") %></a>
          </div>
        </div>
      </li>
      <li id="unregistered_service_delicious" class="service" style="<%= hidden if services.include?("delicious") || !service_enabled?(:delicious) %>">
        <a href="#" class="btn btn-small"><%= image_tag "delicious_icon.png", :alt => '' %> <%= t('links.delicious', "Delicious") %></a>
        <div style="display: none; text-align: <%= direction('left') %>;" class="content" title="<%= t('titles.delicious_login', "Delicious Login") %>" id="unregistered_service_delicious_dialog">
          <div>
            <%= image_tag "delicious.png", :style => "float: #{direction('left')}; padding-#{ direction('right') }: 5px;", :alt => '' %>
            <div style="font-size: 1.2em; font-weight: bold;"><%= t('headers.delicious_login', "Delicious Login") %></div>
            <%= t(:delicious_description, <<-TEXT)
            Delicious is a tool that lets you store and share your bookmarks with others.
            Canvas's rich content editor will let you search your Delicious tags
            to easily link from within Canvas to other resources you find useful.
            TEXT
            %>
            <div class="clear"></div>
          </div>
          <div style="font-size: 1.0em; margin-top: 10px;">
            <%= form_for :user_service, :url => profile_create_user_service_url, :html => {:class => "create_user_service_form"}, :namespace => "delicious" do |f| %>
            <%= f.hidden_field :service, :value => "delicious" %>
            <table role="presentation" class="formtable">
              <tr>
                <td><%= f.blabel :user_name, :en => "User Name" %></td>
                <td><%= f.text_field :user_name, :style => "width: 150px;" %></td>
              </tr><tr>
                <td><%= f.blabel :password, :en => "Password" %></td>
                <td><%= f.password_field :password, :style => "width: 150px;" %></td>
              </tr><tr>
                <td colspan="2">
                  <button type="submit" class="btn btn-primary"><%= t('buttons.save_login', "Save Login") %></button>
                </td>
              </tr>
            </table>
            <% end %>
          </div>
        </div>
      </li>
      <li id="unregistered_service_diigo" class="service" style="<%= hidden if services.include?("diigo") || !feature_and_service_enabled?(:diigo) %>">
        <a href="#" class="btn btn-small"><%= image_tag "diigo_icon.png", :alt => '' %> <%= t('links.diigo', "Diigo") %></a>
        <div style="display: none; text-align: <%= direction('left') %>;" class="content" title="<%= t('titles.diigo_login', "Diigo Login") %>" id="unregistered_service_diigo_dialog">
          <div>
            <%= image_tag "diigo.png", :style => "float: #{direction('left')}; padding-#{ direction('right') }: 5px;", :alt => '' %>
            <div style="font-size: 1.2em; font-weight: bold;"><%= t('headers.diigo_login', "Diigo Login") %></div>
            <%= t(:diigo_description, <<-TEXT)
            Diigo is a social bookmarking tool tailored specifically to research and
            education.
            Canvas's rich content editor will let you search your Diigo tags
            to easily link from within Canvas to other resources you find useful.
            TEXT
            %>
            <div class="clear"></div>
          </div>
          <div style="font-size: 1.0em; margin-top: 10px;">
            <%= form_for :user_service, :url => profile_create_user_service_url, :html => {:class => "create_user_service_form"}, :namespace => "diigo" do |f| %>
            <%= f.hidden_field :service, :value => "diigo" %>
            <table role="presentation" class="formtable">
              <tr>
                <td><%= f.blabel :user_name, :en => "User Name" %></td>
                <td><%= f.text_field :user_name, :style => "width: 150px;" %></td>
              </tr><tr>
                <td><%= f.blabel :password, :en => "Password" %></td>
                <td><%= f.password_field :password, :style => "width: 150px;" %></td>
              </tr><tr>
                <td colspan="2">
                  <button type="submit" class="btn btn-primary"><%= t('buttons.save_login', "Save Login") %></button>
                </td>
              </tr>
            </table>
            <% end %>
          </div>
        </div>
      </li>
    </ul>
    </div>
  </td>
</tr></table>
<% end %>
<h2><%= before_label(:'headers.approved_integrations', "Approved Integrations") %></h2>
<div style="margin-<%= direction('left') %>: 20px;">
  <% if AccessToken.visible_tokens(@user.access_tokens).empty? %>
    <div id="no_approved_integrations"><%= t(:no_approved_integrations, <<-TEXT)
      Third-party applications can request permission to access
      the Canvas site on your behalf.  As you begin authorizing
      applications you will see them listed here.
      TEXT
    %></div>
  <% end %>
  <div id="access_tokens_holder" style="<%= hidden if AccessToken.visible_tokens(@user.access_tokens).empty? %>">
    <%= t(:approved_integrations, <<-TEXT)
    These are the third-party applications you have authorized
    to access the Canvas site on your behalf:
    TEXT
    %>
    <table id="access_tokens" class="summary" style="margin-top: 10px;">
      <thead>
        <tr>
          <th scope="col"><%= t('headers.application_abbrev', "App") %></th>
          <th scope="col"><%= t('headers.purpose', "Purpose") %></th>
          <th scope="col"><%= t('headers.dates', "Dates") %></th>
          <td>&nbsp;</td>
          <td>&nbsp;</td>
        </tr>
      </thead>
      <tbody>
        <%= render :partial => "access_token", :collection => AccessToken.visible_tokens(@user.access_tokens) %>
        <%= render :partial => "access_token" %>
      </tbody>
    </table>
  </div>
  <% unless @real_current_user %>
    <div style="margin-top: 10px;">
      <a href="#" class="btn btn-primary add_access_token_link"><i class="icon-plus" aria-hidden="true"></i> <%= t('buttons.new_access_token', "New Access Token") %></a>
    </div>
  <% end %>
  <div id="token_details_dialog" style="display: none;" title="<%= t('titles.access_token_details', "Access Token Details") %>">
    <p><%= t(<<-TEXT, :wrapper => '<a href="https://canvas.instructure.com/doc/api/index.html" target="_blank" class="external">\1</a>')
      Access tokens can be used to allow other applications to make API calls
      on your behalf.  You can also generate access tokens and *use the Canvas
      Open API* to come up with your own integrations.
      TEXT
    %></p>

    <div class="loading_message"><%= t(:loading_token_details, "Loading Token Details...") %></div>
    <div class="error_loading_message"><%= t(:error_loading_token_details, "Error Loading Token Details") %></div>
    <div class="results">
      <table>
        <tr>
          <th scope="row"><%= before_label(:token, "Token") %></th>
          <td>
            <div class="visible_token">&nbsp;</div>
            <div class="full_token_warning"><%= mt(:full_token_warning, <<-TEXT)
**Copy this token down now**. Once you leave this page you won't be able to
retrieve the full token anymore, you'll have to regenerate it to get a new
value.
TEXT
            %></div>
          </td>
        </tr><tr>
          <th scope="row"><%= before_label(:token_application, "App") %></th>
          <td class="app_name">&nbsp;</td>
        </tr><tr>
          <th scope="row"><%= before_label(:token_purpose, "Purpose") %></th>
          <td class="purpose">&nbsp;</td>
        </tr><tr>
          <th scope="row"><%= before_label(:token_created, "Created") %></th>
          <td class="created">&nbsp;</td>
        </tr><tr>
          <th scope="row"><%= before_label(:token_last_used, "Last Used") %></th>
          <td class="used">&nbsp;</td>
        </tr><tr>
          <th scope="row"><%= before_label(:token_expires, "Expires") %></th>
          <td class="expires">&nbsp;</td>
        </tr>
        <% unless @real_current_user %>
          <tr class="refresh_token">
            <td colspan="2">
              <div class="button-container">
                <button class="btn regenerate_token"><%= t('buttons.regenerate_token', "Regenerate Token") %></button>
              </div>
            </td>
          </tr>
        <% end %>
      </table>
    </div>
  </div>
  <div id="add_access_token_dialog" style="display: none;" title="<%= t('titles.new_access_token', "New Access Token") %>">
    <h2><%= t('headers.generate_access_token', "Generate an Access Token") %></h2>
    <%= mt(:generate_access_token_description, <<-TEXT, :documentation_url => 'https://canvas.instructure.com/doc/api/index.html')
Access tokens are what allow third-party applications to access Canvas
resources on your behalf. These tokens are normally created automatically for
applications as needed, but if [you're developing a new or limited
project](%{documentation_url}) you can just generate the token from here.
TEXT
    %>
    <%= form_for :access_token, :url => profile_tokens_url, :html => {:id => "access_token_form", :style => "margin-top: 10px;"} do |f| %>
      <table class="formtable" role="presentation">
        <tr>
          <td><%= f.blabel :purpose, :en => "Purpose" %></td>
          <td><%= f.text_field :purpose %></td>
        </tr>
        <tr>
          <td>
            <%= f.blabel :expires_at, en: "Expires", id: "token_expires_at_accessible_label" %>
          </td>
          <td>
            <div>
              <%= f.text_field :expires_at,
                               class: "expires_field datetime_field",
                               style: "width: 120px;",
                               "aria-labelledby" => "token_expires_at_accessible_label",
                               "aria-describedby" => "leave_blank_for_no_expiration",
                               "data-tooltip" => "{\"position\":\"top\",\"force_position\":\"true\"}",
                               title: accessible_date_format %>
            </div>
            <div style="font-size: 0.8em;" class="hint" id="leave_blank_for_no_expiration">
              <%= t('hints.expires_at', "leave blank for no expiration") %>
            </div>
          </td>
        </tr>
          <td colspan="2">
            <div class="button-container">
              <button class="btn cancel_button" type="button"><%= t('#buttons.cancel', "Cancel") %></button>
              <button class="btn btn-primary submit_button" type="submit"><%= t('buttons.generate_token', "Generate Token") %></button>
            </div>
          </td>
        </tr>
      </table>
    <% end %>
  </div>
</div>

<h2 aria-hidden=true><%= t(:feature_options, 'Feature Options') %></h2>
<div class="feature-flag-wrapper">
  <!-- this is populated by FeatureFlagAdminView -->
</div>

<div id="profile_pic_dialog" style="display: none;">
  <a href="<%= profile_pics_url %>" class="profile_pics_url" style="display: none;">&nbsp;</a>
  <%= t(:profile_pictures, "Select the image you'd like to use as your profile pic, or upload a new image:") %>
  <div class="profile_pic_list" style="background: #eee; padding: 5px; -moz-border-radius: 5px; margin: 5px 10px;">
    <h3 style="padding-<%= direction('left') %>: 10px; padding-top: 10px;"><%= t('headers.loading_images', "Loading Images...") %></h3>
    <div class="clear"></div>
  </div>
  <a href="#" class="add_pic_link add"><%= t('links.upload_new_image', "Upload a new Image") %></a>
  <%= form_for :attachment, :url => context_url(@user, :context_files_url, :format => 'json'), :html => {:id => "add_pic_form", :style => "display: none;"} do |f| %>
    <input type="hidden" name="format" value="text" />
    <%= f.file_field :uploaded_data %>
    <button type="submit" class="btn btn-small"><%= t('buttons.add_picture_file', "Add File") %></button>
  <% end %>
  <div class="form-actions">
    <button type="button" class="btn cancel_button button-secondary"><%= t('#buttons.cancel', "Cancel") %></button>
    <button type="button" class="btn select_button btn-primary"><%= t('buttons.select_image', "Select Image") %></button>
  </div>
</div>
<% else %>
  <% js_bundle :confirm_email %>
  <p class="alert alert-info">
    <%= t <<-TEXT, :email => @current_user.email, :wrapper => {'*' => '<a href="' + re_send_confirmation_path(@current_user, @current_user.communication_channel) + '" class="re_send_confirmation_link">\1</a>'}
      Before you can edit your profile, you need to verify your email address (%{email}) by clicking the link in the email we sent you.
      If you don't see it, *click to re-send the email*, and make sure to check your spam box.
    TEXT
    %>
  </p>
<% end %>
