<% provide(:head_title, t("users.settings.account.preferences.head_title")) %>
<% provide(:container_class, "no-second-nav-container") %>

<%= render partial: "users/settings/sidebar.html.erb" %>
<div class="tab-content">
  <div class="tab-pane content-pane active" role="tabpanel">

    <div class="row">
      <div class="col-xs-12 col-sm-12">
        <%= form_for(@user,
                     url: update_preferences_path(format: :json),
                     remote: true,
                     html: {
                      method: :put,
                      'data-for' => 'settings[time_zone]',
                      'data-turbolinks' => false
                    }) do |f| %>
          <div data-part="view">
            <div class="form-group">
              <%= f.label t("users.settings.account.preferences.edit.time_zone_label") %>
              <div class="input-group" style="max-width: 500px;">
                <input class="form-control"
                       disabled="disabled"
                       autocomplete="off"
                       type="text"
                       value="<%= @user.settings[:time_zone] %>"
                       name="fake_user[settings][time_zone]"
                       id="fake_user_settings_time_zone">
                <span class="input-group-btn">
                  <a href="#" class="btn btn-default" data-action="edit"><%=t "general.edit" %></a>
                </span>
              </div>
              <small><%= t("users.settings.account.preferences.edit.time_zone_sublabel") %></small>
            </div>
          </div>
          <div data-part="edit" style="display: none;">
            <div class="well">
              <h4><%=t "users.settings.account.preferences.edit.time_zone_title" %></h4>
              <div class="form-group" style="max-width: 500px;">
                <%= f.select :time_zone, ActiveSupport::TimeZone.all.collect { |tz|
                      [tz.formatted_offset + " " + tz.name, tz.name]
                    }, {}, {class: 'form-control selectpicker', 'data-role': 'clear'} %>
                <small><%= t("users.settings.account.preferences.edit.time_zone_sublabel") %></small>
              </div>
              <div>
                <a href="#" class="btn btn-default" data-action="cancel"><%=t "general.cancel" %></a>
                <%= f.submit t("general.save"), class: "btn btn-success" %>
              </div>
            </div>
          </div>
        <% end %>
        <hr>
        <div class="notification-settings-container">
          <h4><%= t('notifications.title') %></h4>
          <%= form_for(@user,
                       url: notifications_settings_path(format: :json),
                       html: { method: :post, id: 'notifications-settings-panel' },
                       remote: true) do |f| %>
          <div class="row">
            <div class="col-sm-2">
              <span class="assignment hidden-sm">
                <i class="fas fa-newspaper"></i>
              </span>
            </div>
            <div class="col-sm-10">
              <strong><%=t 'notifications.form.assignments' %></strong>
              <p><%=t 'notifications.form.assignments_description' %></p>
              <div class="row">
                <div class="col-sm-4">
                  <%=t 'notifications.form.notification_scinote' %>
                </div>
                <div class="col-sm-8">
                  <%= check_box_tag :assignments_notification, @user.assignments_notification %>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <%=t 'notifications.form.notification_email' %>
                </div>
                <div class="col-sm-8">
                  <%= check_box_tag :assignments_notification_email, @user.assignments_email_notification %>
                </div>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-2">
              <%= image_tag 'icon_small/missing.png', class: 'img-circle ' %>
            </div>
            <div class="col-sm-10">
                <strong><%=t 'notifications.form.recent_notification' %></strong>
                <p><%=t 'notifications.form.recent_notification_description' %></p>
                <div class="row">
                  <div class="col-sm-4">
                    <%=t 'notifications.form.notification_scinote' %>
                  </div>
                  <div class="col-sm-8">
                    <%= check_box_tag :recent_notification, @user.recent_notification %>
                  </div>
                </div>
                <div class="row">
                  <div class="col-sm-4">
                    <%=t 'notifications.form.notification_email' %>
                  </div>
                  <div class="col-sm-8">
                    <%= check_box_tag :recent_notification_email, @user.recent_email_notification %>
                  </div>
                </div>
            </div>
          </div>
          <div class="row">
            <div class="col-sm-2">
              <span class="system-message hidden-sm"><i class="fas fa-chess-rook" aria-hidden="true"></i></span>
            </div>
            <div class="col-sm-10">
              <strong><%=t 'notifications.form.system_message' %></strong>
              <p><%=t 'notifications.form.system_message_description' %></p>
              <div class="row">
                <div class="col-sm-4">
                  <%=t 'notifications.form.notification_scinote' %>
                </div>
                <div class="col-sm-8">
                  <%= check_box_tag :system_message_notification %>
                </div>
              </div>
              <div class="row">
                <div class="col-sm-4">
                  <%=t 'notifications.form.notification_email' %>
                </div>
                <div class="col-sm-8">
                  <%= check_box_tag :system_message_notification_email, @user.system_message_email_notification %>
                </div>
              </div>
            </div>
          </div>
          <% end %>
        </div>
      </div>
    </div>
  </div>
  <div class="tab-pane tab-pane-settings" role="tabpanel"></div>
</div>

<%= javascript_include_tag "users/settings/account/preferences/index" %>
