<%= form_for @user do |f| %>
  <div class="crayons-card mb-6 grid gap-4 p-6">
    <header>
      <h3>Email Notification Settings</h3>
    </header>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_newsletter, class: "crayons-checkbox" %>
      <%= f.label :email_newsletter, "Send me weekly newsletter emails", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_digest_periodic, class: "crayons-checkbox" %>
      <%= f.label :email_digest_periodic, "Send me a periodic digest of top posts from my tags", class: "crayons-field__label" %>
    </div>
    <% if current_user.a_sustaining_member? %>
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :email_membership_newsletter, class: "crayons-checkbox" %>
        <%= f.label :email_membership_newsletter, "Send me sustaining membership newsletter emails", class: "crayons-field__label" %>
      </div>
    <% end %>
    <% if current_user.tag_moderator? %>
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :email_tag_mod_newsletter, class: "crayons-checkbox" %>
        <%= f.label :email_tag_mod_newsletter, "Send me tag moderator newsletter emails", class: "crayons-field__label" %>
      </div>
    <% end %>
    <% if current_user.has_role?(:trusted) %>
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :email_community_mod_newsletter, class: "crayons-checkbox" %>
        <%= f.label :email_community_mod_newsletter, "Send me community moderator newsletter emails", class: "crayons-field__label" %>
      </div>
    <% end %>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_comment_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_comment_notifications, "Send me an email when someone replies to me in a comment thread", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_follower_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_follower_notifications, "Send me an email when someone new follows me", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_mention_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_mention_notifications, "Send me an email when someone mentions me", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_badge_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_badge_notifications, "Send me an email when I receive a badge", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_connect_messages, class: "crayons-checkbox" %>
      <%= f.label :email_connect_messages, "Send me an email when I receive a direct message (while inactive)", class: "crayons-field__label" %>
    </div>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :email_unread_notifications, class: "crayons-checkbox" %>
      <%= f.label :email_unread_notifications, "Send me occasional reminders that I have unread notifications on #{community_name}", class: "crayons-field__label" %>
    </div>
  </div>

  <div class="crayons-card mb-6 grid gap-6 p-6">
    <header>
      <h3 class="mb-2">Mobile Notification Settings (Beta)</h3>
      <p>iOS only for now. Additional settings and platforms will be rolled out as new notification features are made available.</p>
    </header>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :mobile_comment_notifications, class: "crayons-checkbox" %>
      <%= f.label :mobile_comment_notifications, "Notify me when someone replies to me in a comment thread", class: "crayons-field__label" %>
    </div>
  </div>

  <div class="crayons-card mb-6 grid gap-6 p-6">
    <header>
      <h3 class="mb-2">Platform Notification Settings</h3>
      <p>Notifications that only appear on the <a href="<%= notifications_path %>">notifications page</a>.</p>
    </header>
    <div class="crayons-field crayons-field--checkbox">
      <%= f.check_box :welcome_notifications, class: "crayons-checkbox" %>
      <%= f.label :welcome_notifications, "Send me occasional tips on how to enhance my #{community_name} experience", class: "crayons-field__label" %>
    </div>
  </div>

  <% if current_user.trusted %>
    <div class="crayons-card mb-6 grid gap-6 p-6">
      <h3>Mod Notification Settings</h3>
      <div class="crayons-field crayons-field--checkbox">
        <%= f.check_box :mod_roundrobin_notifications, class: "crayons-checkbox" %>
        <%= f.label :mod_roundrobin_notifications, "Send me occasional community-success mod notifications", class: "crayons-field__label" %>
      </div>
    </div>
  <% end %>

  <%= f.hidden_field :tab, value: @tab %>
  <button type="submit" class="crayons-btn">Save</button>
<% end %>
